百度智能云实战——静态文件CDN加速

原创
2021/12/23 11:19
阅读数 2.2K

图片

导读:互联网进入移动互联网时代后,产品形态有几次大的演进。最初,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加速:

  • 一定要保证在上模板前,对应的静态文件已经成功推送到远端的对象存储服务器

七、收益总结

image.png

推荐阅读

百度搜索中台海量数据管理的云原生和智能化实践

百度搜索中“鱼龙混杂”的加盟信息,如何靠AI 解决?

|快速剪辑-助力度咔智能剪辑提效实践

---------- END ----------

百度 Geek 说

百度官方技术公众号上线啦!

技术干货 · 行业资讯 · 线上沙龙 · 行业大会

招聘信息 · 内推信息 · 技术书籍 · 百度周边

欢迎各位同学关注

展开阅读全文
加载中
点击加入讨论🔥(1) 发布并加入讨论🔥
打赏
1 评论
2 收藏
0
分享
返回顶部
顶部