TAPD SaaS产品静态资源接入腾讯云CDN——动静结合场景下的实践经验分享

业务场景

为了优化对外服务时前端页面加载性能，TAPD SaaS产品打算将静态资源文件接入腾讯云CDN进行访问加速。

CDN原理以及相关概念简介

CDN——Content Delivery Network，即内容分发网络。

从上图可以看出，CDN本质上是一种空间换时间的策略：将内容缓存在终端用户附近，从而提高内容的访问速度。

名词解释：

oc节点：可供用户直接访问的cdn节点

中间源：指oc节点的上游节点，处于oc和源站之间，中间源可缓解源站压力且可提高cdn的回源质量；

源站：CDN文件资源的出处，oc节点和中间源的缓存文件都来源于此。本文中源站即指TAPD SaaS产品的服务器；

CDN原理与流程：

正常情况下，DNS解析后获取到的是源站，也就是产品内容服务器的IP地址。随后浏览器通过IP向源站发起HTTP请求，服务器将请求内容传送给浏览器；

而引入CDN服务后，DNS域名解析权会交给CDN专用DNS服务器（基于配置的CNAME），后者会返回CDN全局负载均衡设备的地址到本地DNS，最终本地DNS请求负载均衡设备，获取到最适合的OC节点IP并回应给客户端。随后客户端通过IP向OC节点发起HTTP请求，若有缓存资源则直接获取，否则依次回源中间源站、源站获取内容。

接入方案与流程

TAPD采用了开关机制来控制是否使用CDN加速：通过开关，可以将静态资源url中的域名在CDN和非CDN之间进行切换。各类型的资源及其对应CDN域名如下表所示：

下面以static-fe.tapd.cn为例，演示具体的CDN接入流程：

1. 在腾讯云CDN产品页面新增一个加速域名，回源地址填写产品服务器的IP地址（由于回源协议选择协议跟随，无需手动填写回源地址的端口）。

由于TAPD SaaS产品本身部署在腾讯云容器集群中，此处填写的集群中Ingress的IP地址即可（注意Ingress需要拥有公网LB）

Ingress配置信息页面

CDN加速域名配置页面

加速域名创建后会生成专有的CNAME，如上图中CNAME即为static-fe.tapd.cn.cdn.dnsv1.com.cn

2. 在缓存配置页面为该加速域名配置缓存时间以及缓存文件规则

3. 在DNS 服务商（如 Dnspod）处，申请对应的CDN域名（此处即static-fe.tapd.cn），并配置该域名指向加速域名创建后生成的CNAME

4. 在源站服务器nginx配置中添加对于回源host（static-fe.tapd.cn）的解析，确保回源时能够从源站服务器正常拿到静态资源。

以上步骤完成后，即可通过CDN域名来加速&访问源站的静态资源。

遇到的问题以及解决方案

• 静态资源接入cdn后，每次代码发布更新都会产生CDN缓存过期的问题。

问题原因：如果CDN节点存在发布前旧版的静态资源，就不会从源站拉取发布更新后的静态资源

解决方案：静态资源文件名进行版本化改造，文件名后带上版本号。每次发布更新静态资源的同时也会更新资源名中的版本号，如此一来回源时便不会受CDN节点中缓存的旧版静态资源影响（文件名不同不会命中缓存）。

• 动态生成的静态资源偶尔会出现回源失败

问题原因：TAPD中部分静态资源是在页面访问时动态生成的。因此生成资源和获取资源的接口并非同一个。正常情况下生成和获取资源的请求会分发到同一个容器中，所以不会有问题。然而而当cdn开启时，由于资源生成是通过页面请求触发的，而访问则是走cdn回源获取，所以回源到的容器可能不是资源生成的容器，此时便会出现获取的资源尚未生成不存在的问题，表现为回源失败。

• 解决方案：将需要动态生成的静态资源接入腾讯云cos（对象存储），源站资源访问接口优先从cos中获取资源（如果cos中存在该资源的话）

接入效果

由于接入时间尚短，所以先简单基于腾讯云前端性能监控的数据来进行对比。选取了接入前和接入后各自一周的数据，接入前后静态资源平均加载时长的对比情况如下图：

可以看出，cdn开启后，相比开启前，静态资源加载速度平均提升了约20%左右。且对于访问延迟越高的城市，加速效果越好。