百度智能云实战——静态文件 CDN 加速
导读：互联网进入移动互联网时代后，产品形态有几次大的演进。最初，H5 站点如雨后春笋般的出现，大量 H5 站点迅速占领 PC 市场，中期，为了追求极致用户体验，大量原生 Android、IOS 应用出现，为用户提供更好的需求和体验满足，当前，集体验、研发效率、推广效率于一身的超级 APP+小程序的模式，变成了人们更青睐的选择。可以看到，每个时代都有自己的主角，我们很容易将自己的重心放到主角身上，而忽略了配角的作用。
最近在公司项目研发中，发现不管是 APP 还是小程序中，都有大量能力和需求，是由曾经的主角 H5 来承接，H5 的跨平台、迭代效率高、丰富的技术和人力生态，使它还在持续的发光发热，为互联网做出自己的贡献。但是，在 H5 项目研发过程中，发现我们明显降低了 H5 的要求。我们将更多的精力投入到需求满足，交互体验上，却忽略了我们的基本底线，性能。H5 的一些基本性能优化方式，如 SSR、静态资源加速，在积压的需求面前，也被大家遗忘在角落。希望通过本文的阅读，能给大家提供一个依托百度智能云和 CDN 技术进行静态文件加速的方案，为 H5 优化做出一名后端 RD 的贡献。
全文 6160 字，预计阅读时间 18 分钟
一、CDN 简介
1.1、CDN 是什么
CDN 的全称是(Content Delivery Network)，即内容分发网络，将源站内容分发至遍布全国的加速节点，缩短用户查看内容的延迟，提高用户访问网站的响应速度与网站的可用性，解决网络带宽小、用户访问量大、网点分布不均等问题。
简单的说，CDN 的工作原理就是将您源站的资源缓存到位于全球各地的 CDN 节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每个用户的请求都回您的源站获取，避免网络拥塞、缓解源站压力，保证用户访问资源的速度和体验。
1.2、CDN 工作原理
CDN 主要通过解决以下几个问题来保证资源访问速度和体验：
1、解决服务器端的“第一公里”问题
2、缓解甚至消除了不同运营商之间互联的瓶颈造成的影响
3、减轻了各省的出口带宽压力
4、缓解了骨干网的压力
5、优化了网上热点内容的分布
那么，CDN 是如何工作来解决上述问题的呢？下面简单介绍一下 CDN 的加速原理：
如上图所示，CDN 加速详细步骤如下：
1、网站用户请求 Local DNS 查询 my.com 的地址；
2、Local DNS 请求权威 DNS；
3、权威 DNS 返回配置的 CNAME:
my.com.a.bdydns.com；
4、Local DNS 请求 my.com.a.bdydns.com 对应的 IP；
5、Baidu 智能 DNS 根据智能调度返回离用户最近的接入点 IP；
6、LocalDNS 返回 my.com 的 IP 地址并缓存到浏览器；
7、用户向 CDN 节点发起 HTTP/HTTPS 请求，访问 my.com 的内容；
8、CDN 通过百度智能云加速链路，将请求转发至多线中心节点；
9、中心节点向源站发起回源请求；
10、源站向中心节点返回响应；
11、中心节点、边缘节点将响应返回用户，并缓存响应内容。
以上是用户首次访问资源的详细步骤，如果之前已经有其他用户访问过相同的资源，则这个详细步骤会简化为：
1、网站用户查询 my.com 的地址；
6、LocalDNS 返回已缓存的 my.com 的 IP 地址；
7、向 CDN 节点发起 HTTP/HTTPS 请求，访问 my.com 的内容；
11、边缘节点发现缓存数据，响应返回请求返回数据；
通过对比分析可以发现，CDN 主要针对已访问过的数据或者静态文件进行加速，可加速的原因主要在以下两个关键节点：
1、步骤 5 智能调度：会通过 CNAME 域名，访问百度 DNS，根据用户网络和地域解析到最优的接入 IP 节点，并缓存到 LocalDNS 中，减少用户后续 IP 接入的时间。因为不是所有的客户都可能做到多地域多网络接入，使用 CDN 可以屏蔽这些多地域多网络部署细节，消除不同运营商、不同地域的网络瓶颈，使客户的静态资源即使只部署在北方联通机房，全国各地各网络的用户也都可以享受到差距不大的访问速度；
2、步骤 11 边缘节点发现缓存数据，响应返回请求返回数据：这里直接将命中缓存的数据返回，避免了回源站点，减少了源站的带宽压力，大大提升了资源加载速度。
1.3、名词解释
域名
Domain Name，由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域）。域名是一个 IP 地址上有“面具” 。一个域名的目的是便于记忆和沟通的一组服务器的地址（网站，电子邮件，FTP 等）。
CNAME
CNAME 全称 Canonical Name，即别名，可以用来把一个域名解析到另一个域名，当 DNS 系统在查询 CNAME 左面的名称的时候，都会转向 CNAME 右面的名称再进行查询，一直追踪到最后的 PTR 或 A 名称，成功查询后才会做出回应，否则失败。
CNAME 域名
在百度智能云 CDN 接入加速域名后，系统给对应域名分配一个”CNAME 域名”，用将加速域名在域名服务提供商处完成 CNAME 配置指向这个 CNAME 域名。配置生效后，域名解析的工作就正式转向百度智能云，该域名所有的请求都将转向百度智能云 CDN 的节点。
CNAME 记录
即：域名解析中的别名记录。用来把一个域名解析到另一个域名，再由另一个域名提供 IP 地址。CNAME 记录允许您将多个名字映射到同一台服务器。例如，您有一台服务器名为“host.mydomain.com”（A 记录），您希望用它同时提供 WWW 和 MAIL 服务。那么您可以在您的 DNS 解析服务商为该服务器设置两个别名（CNAME）：WWW 和 MAIL，将这两个别名的全称“www.mydomain.com”和“mail.mydomain.com”都指向“host.mydomain.com”。添加该 CNAME 后，所有访问这两个 CNAME 的请求都会被转到 host.mydomain.com。
DNS
Domain Name System，域名系统，因特网上作为域名和 IP 地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的 IP 数串。通过主机名得到该主机名对应的 IP 地址的过程叫做域名解析（或主机名解析）。
边缘节点
是百度智能云 CDN 用于缓存客户源站内容以便快速响应不同地域用户请求的网络节点。边缘节点指网络结构中靠近用户的网络节点，对接入用户有相对于源站而言更好的响应能力和连接速度。CDN 边缘节点将访问量较大的内容缓存到边缘节点的服务器上，以此来提高网终端用户访问网站内容的速度和质量。
静态内容
指用户多次访问某一资源，不同请求中访问到的数据都是相同的内容。例如：html、css 和 js 文件、图片、视频、软件安装包、apk 文件、压缩包文件等。
动态内容
指用户多次访问某一资源，响应返回的数据是不相同的内容。
例如：API 接口、.jsp、.asp、.php、.perl 和 .cgi 文件等。
回源 HOST
即回源域名， CDN 节点在回源时，在源站访问的站点域名，详情请参见回源配置。当服务器源站存在多个不同站点时，CDN 将根据您的回源 HOST 域名，决定 CDN 将从哪一个站点中获取资源。
源站
源站指用户运行业务的网站服务器，是 CDN 加速分发数据的来源。百度智能云 CDN 的源站可以选择自有源站或对象存储（BOS）。
注：以上内容部分摘抄自百度智能云 CDN 产品介绍。
详见：百度智能云 CDN(https://cloud.baidu.com/doc/CDN/s/Zjwvydyev)
二、项目背景
项目来源于百度旗下汽车信息与服务平台：有驾，目标是优化有驾产品全矩阵内 H5 产品加载速度，给用户更好的浏览体验。
有驾 H5 服务于有驾 M 站(https://m.yoojia.com)， 有驾运营活动，有驾 APP 和有驾小程序内的 H5 产品，应用非常广泛。自从有驾成立以来，一直处于业务高速发展阶段，短时间内完成了小程序、APP、M 站、PC 站全矩阵产品的研发上线。初期为了业务逻辑复用、敏捷开发和快速上线，后端代码和前端没有做很好的业务隔离，接口逻辑与模板逻辑、静态文件同机部署。20 年年中，随着业务越来越复杂，我们逐渐对后端体系架构进行了优化升级，使用 BFF、微服务、DDD 的思想，对后端大单体应用进行更合理的分层。目前我们将整个架构拆解为接入层、BFF 层、微服务层和基础设施层，完成业务抽象的同时，很好的完成了前后端的隔离。
在对整个架构进行合理划分后，在性能方向，可以更好的进行分工，FE 同学负责展示层面的性能优化，RD 同学负责接口性能优化，本来分工明确，且效果显著。但是，在整理静态文件的优化方案时，发现分工不是很明确，不知道应该谁来负责。笔者作为项目负责人，利用空余时间，在 FE 配合下完成了静态文件的 CDN 加速工作，收益明显，过程中遇到一些问题，希望记录下来，分享给有需求的同学，助力大家在成为全栈工程师的路上越走越好。
三、问题分析
有驾业务大量依赖 H5 能力，H5 的速度体验逐渐成为影响用户体验的一大核心问题。静态文件主要包括 css、js、字体等，每个页面加载都会请求大量的静态文件，所以在我们已经使用了一些技术手段去优化渲染能力后，静态文件的加载成了我们的一个可能的优化点。静态文件上 CDN 加速，是一个业界比较简单和广泛的优化手段，因此，希望对静态文件进行 CDN 加速，利用 CDN 能力，提升静态文件访问速度，同时在 CDN 进行数据的 gzip 压缩，进一步提升加载速度。
笔者作为后端同学，了解到的静态文件 CDN 加速方式有两种：
1）CDN 回源加速：静态文件和接口文件都可以进行缓存。
用户静态文件的域名改为 CDN 域名，请求静态文件时会请求到 CDN 节点
CDN 节点查看自身节点有没有该内容的缓存（可以是 uri 粒度，也可以是 url 粒度，理论上接口数据也可以被缓存）
如果 CDN 节点有该内容的缓存且没有过期，则直接返回给用户，结束
如果 CDN 节点没有该内容的缓存或者缓存过期，则请求回源的源站地址拉取内容，如果返回的 http 状态码符合约定（可以是只缓存 200，也可以指定 301，302 也缓存），则 CDN 将内容进行缓存，否则不缓存
不论回源请求结果如何，都会将回源结果返回给用户，结束（这里区别只是回源后何时对数据进行缓存）
2）对象存储服务(https://cloud.baidu.com/product/bos.html)部署加速：
只能缓存静态文件，无法缓存接口数据。
静态文件在代码上线环节，不仅仅要部署到模板服务器，还需要通过脚本推送到远端的对象存储服务中
静态文件直接使用对象存储服务器提供的 CDN 域名访问（CDN 到对象存储服务器应该也属于回源加速）
个人理解，两种方式的适用场景如下：
1）CDN 回源加速：适用于部署时可分开部署，先上静态文件，再上模板文件的场景，否则会有线上流量损失。
2）对象存储服务(https://cloud.baidu.com/product/bos.html)部署加速：
理论上适用于所有场景，但是需要额外开发上传脚本，并要保证脚本的可靠性和文件的存在性。
四、操作步骤
本次有驾静态文件加速项目，选择了更低成本的 CDN 回源加速的方案，具体操作步骤如下：
1）自行申请用于加速的 CDN 域名；
2）将申请的域名绑定到百度公有云提供的 CNAME 域名上，可参考百度智能云 CDN 接入指引(https://cloud.baidu.com/doc/CDN/s/Jjwvyetym)；
3）将申请的域名的回源地址配置到对应的回源域名，使静态文件访问时可以自动回源和缓存；
4）FE 需要在模板中，将所有静态文件域名替换成新申请的域名；
5）设置 CDN 缓存时间，根据自己的需求设置即可，可参考百度智能云 CDN 接入指引(https://cloud.baidu.com/doc/CDN/s/Jjwvyetym)中关于缓存设置的介绍；
6）需要设置 CDN 域名的跨域白名单，允许域名跨域，比如有驾，我们需要在 yoojia.com 域和 baidu.com 域访问 CDN 域名，则需要把http://yoojia.com, https://yoojia.com, http://baidu.com, https://baidu.com 域名设置为可跨域访问；
7）针对 CDN 流量，需要加一个来源标记，辅助接入层完成流量识别功能，针对 CDN 流量不进行 redirect（主要原因是为了简单起见，初期在接入层做了整站的 301 跳转适配 PC 访问 M 站，M 站访问 PC 的情况，后续这个能力更精细化控制，改到了路由层实现，这个标记可以不用了，但是可以作为一种特殊情况下的解决方案）；
8）全站功能回归验证。
五、操作详解
下面是百度智能云 CDN 操作过程的一些关键步骤，供大家参考（PS：CDN 配置，不懂的一定搞清楚再配置，否则就是用默认配置，本文中未提及的部分最好不修改，如有需求详细阅读相关配置文档或者咨询客服，确认后再修改）
5.1、域名申请
自行申请域名即可
5.2、CNAME 域名绑定
参考百度智能云 CDN 接入域名：
(https://cloud.baidu.com/doc/CDN/s/Qjwvyea10)
5.3、CDN 域名配置
1）配置回源地址，如下图：
2）设置自己的缓存生效时间
3）增加 http 头，这里增加了 cdnfrom:xxx，接入层和后端可以通过这个标记识别 cdn 流量，做相应操作。
4）在访问控制 tab 下，为 baidu.com 和 yoojia.com 域名增加跨域白名单（如果需要线下验证，也可以给线下机器加白名单）
5）修改接入层 redirect 逻辑，针对 cdn 来的流量，不要 301 跳转
5.4、线下 &线上验证
修改静态文件域名，并完成验证，必要时候可以提测进行全功能回归测试。
六、注意事项
本节很重要，一定要认真读一下
1）CDN 回源加速：
适用于部署时可分开部署，先上静态文件，再上模板文件的场景，否则会有线上流量损失
针对静态文件，要尊重文件的客观存在性，不存在的文件，http code 一定返回 404，不能做兜底逻辑，路由到其他非 404 的页面（比如统一定位到一个 404 错误页面，但是 http code 是 200）
不能对静态文件有任何形式的适配跳转，否则可能会导致 CDN 缓存错误的数据
PS：一句话概括，就是一定要保证 CDN 缓存的数据是正确的数据，如果有可能缓存到错误的数据，那就不应该采用方案一，或者应该修改后端保证 CDN 缓存的正确性（本文中就做了大量的工作来解决这一问题）
2）静态文件直接部署 CDN 加速：
一定要保证在上模板前，对应的静态文件已经成功推送到远端的对象存储服务器
七、收益总结
推荐阅读：
---------- END ----------
百度 Geek 说
百度官方技术公众号上线啦！
技术干货 · 行业资讯 · 线上沙龙 · 行业大会
招聘信息 · 内推信息 · 技术书籍 · 百度周边
欢迎各位同学关注
百度官方技术账号 2021.01.22 加入
关注我们，带你了解更多百度技术干货。
评论