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域名如下表所示:
资源类型 |
CDN域名 |
CNAME |
---|---|---|
TAPD js资源 |
js.tapd.cn |
js.tapd.cn.cdn.dnsv1.com |
TAPD css资源 |
css.tapd.cn |
css.tapd.cn.cdn.dnsv1.com |
TAPD img资源 |
img.tapd.cn |
img.tapd.cn.cdn.dnsv1.com |
TAPD FE(前端库) 静态资源 |
static-fe.tapd.cn |
static-fe.tapd.cn.cdn.dnsv1.com.cn |
下面以static-fe.tapd.cn为例,演示具体的CDN接入流程:
- 在腾讯云CDN产品页面新增一个加速域名,回源地址填写产品服务器的IP地址(由于回源协议选择协议跟随,无需手动填写回源地址的端口)。
由于TAPD SaaS产品本身部署在腾讯云容器集群中,此处填写的集群中Ingress的IP地址即可(注意Ingress需要拥有公网LB)
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%左右。且对于访问延迟越高的城市,加速效果越好。
![](https://jkboy.com/wp-content/uploads/2021/10/Pasted-11.png)