初码干货使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

Posted 2020-08-02

提示：阅读本文需提前了解的相关知识

1、阿里云（https://www.aliyun.com）

2、阿里云CDN（https://www.aliyun.com/product/cdn）

3、阿里云OSS（https://www.aliyun.com/product/oss）

4、HTTPS（http://baike.baidu.com/view/14121.htm）

阅读目录结构

引：

一、准备工作

二、整体功能结构

三、具体实现步骤

四、关键点和问题处理

五、延伸与扩展

六、总结与思考

---

引：

在日常的开发过程中，会越来越多的使用诸如Bootstrap等前端框架，又或是 JQuery Form这样的第三方JS插件，这些框架和插件中的CSS、JS、字体文件的大小相较于纯粹的页面html代码的大小，那是要远远超出。拿Bootstrap举例，连JQuery一起，核心文件压缩后大小超过500K，即使GZIP传输，也超过150K，而页面中HTML代码，GZIP后应该至多就5-10K，由此可见，将资源文件剥离出Web服务器，使用CDN加速方式进行访问，不仅极大的减轻了服务器带宽的经济压力，也5倍以上提升了单节点Web服务器的页面浏览承载能力，更重要的是，使用CDN也产生了类似多线网络的效果，用户端的体验更佳。

所以越来越多的开发团队和公司，已经习惯于使用公共CDN服务，来对核心库进行加速，例如百度静态资源公共库，又例如360网站卫士常用前端公共库CDN服务，但CDN服务的美妙又不仅于此

所以如何建设自己的CDN加速库并充分挖掘其应用价值，这就是今天要讨论的重点

前人种树后人乘凉，如果从底层开始建设并购买各地节点服务器，未免愚蠢，以第三方云平台服务为基础，充分利用其业务功能、管理菜单、API接口、实践经验等，来构建自己的私有CDN服务才是上策，既然涉及到第三方云平台，那就开始了漫长的试用过程，在过去的一年内，分别试用过包括腾讯云CDN、七牛云CDN、阿里云CDN、微软云CDN等好多CDN服务，比较客观的结论是：虽然阿里云在节点数量、质量等核心指标上并不一定是最佳（CDN加速技术和服务质量评估不在本文讨论范围内），但就开发人员的开发体验与运维人员的管理体验来说，阿里云是最佳的。

正所谓，阿里云在模仿并赶超AWS的道路上，越来越6

那么我们就使用阿里云的相关服务，来建设自己的CDN加速应用，所要实现的功能用一句话来概括就是

借助阿里云的OSS和CDN服务，来构建私有CDN加速库，为Web开发提供核心库加速访问支撑，并进一步深入挖掘CDN加速功能在图片存储访问等其他开发场景中的应用

以下是具体实现步骤

一、准备工作

1、阿里云认证账号一个（记得充100块）

2、准备域名1个并完成在阿里云的备案（这里购买了alphams.cn域名）

3、对准备的域名申请SSL证书（这里选择从RapidSSL颁发【推荐一个淘宝的证书卖家，店铺名称：琥珀主机，不仅价格公道，店主对SSL的相关技术知识也非常专业，本次实践中阿里云有个公钥私钥坑多亏了这位店主的指导】）

4、从模板网站购买收费模板一套（这里买的是比较常见的Unify Responsive Template）

二、整体功能结构

应用结构如下图所示

三、具体实现步骤

1、将域名alphams.cn的解析绑定到阿里云云解析上

注：阿里云有个一年88元的VIP解析套餐，性价比较高

绑定后如下：

2、开通阿里云OSS并添加一个Bucket，叫amscdn

注：这里选择了所属区域为华东2，因为博主的ECS服务器购买在华东2，具体可以根据实际情况来选择

添加结果如下：

这里的OSS外网域名：amscdn.oss-cn-shanghai.aliyuncs.com，即待会要添加的CDN服务的回源地址（如果OSS绑定了域名，也可以使用域名作为回源地址）

注：按照阿里云的说法，使用OSS作为CDN的回源，流量费更低

3、对刚开通的OSSBucket节点amscdn进行域名绑定

虽然amscdn这样一个OSS节点是用于内部访问，但是为了装个逼，也给绑定一下域名，阿里提供了快速菜单入口

这里选择了使用cdnoss.alphams.cn作为绑定域名

刚才也说了，阿里云的综合服务是不错的，在这里的体验就体现优势了，能够自动给域名添加相关解析（不知道其他云服务现在有这样的服务没，至少去年其他平台没有见到或者不全）

绑定后如下：

这里有个CDN缓存刷新，我没有太搞明白，因为对于CDN服务来说，这里的OSS只是一个源，与最终使用这个源的CDN并无直接技术关联关系，阿里云的这个操作，如果有人知道是什么意思，麻烦告知一下。

4、开通阿里云CDN并添加一个加速域名

这里使用cdn.alphams.cn作为加速域名

业务类型选择“图片小文件加速”

源站类型就OSS域名，地址是刚才已经添加的OSS节点amscdn的外网地址（注：内网地址是否更快或者是否有效未知，按照技术上的理解，CDN的源站即使在阿里云内网也起不到加速作用，因为是全国分布读取的）

添加完成，下面进行配置

这里只配置了GZIP智能压缩，其余的配置不是特别熟悉和了解，如需配置建议深入了解过后再行设置

HTTPS安全加速在下一段中会单独来说

这时候进入阿里云的域名解析菜单中的CDN加速选项

可以看到有一个一键配置CNAME的按钮，点击后就会自动增加相关的CNAME解析

5、测试是否成功

到这里就完成了基本的配置，下面试一试是否成功，进入OSS的管理菜单

先到OSS节点amscdn中上传一个CSS文件MicrosoftYaHeiFix.css

上传成功后得到OSS的访问地址：http://amscdn.oss-cn-shanghai.aliyuncs.com/MicrosoftYaHeiFix.css ，在浏览器访问成功

再试一下OSS域名的访问效果：http://cdnoss.alphams.cn/MicrosoftYaHeiFix.css，浏览器访问也成功

最后试一下CDN回源是否成功：http://cdn.alphams.cn/MicrosoftYaHeiFix.css，浏览器访问也成功

6、继续添加HTTPS访问支持

HTTPS的潮流已经不可逆转，在这里我们也装个逼，添加对HTTPS的支持，不得不说，在这些细节方面，阿里云还是蛮不错的（比如微软云中国，在6月之前就只能通过后台客服手动添加证书去支持HTTPS）

点击刚才的HTTPS安全加速，按照如下进行配置，这里的证书内容和私钥，可以问SSL证书发行商要（这里有个大坑，后面会说到）

配置好以后显示已经启用了HTTPS安全加速

试一下是否成功：https://cdn.alphams.cn/MicrosoftYaHeiFix.css，浏览器访问也成功

查看一下证书

7、放入博客园代码中查看效果

刚才的代码是对页面中所有字体都统一为微软雅黑，在博客园的设置中加入如下一段

保存后刷新博客页面，可以看到确实都变成了微软雅黑

8、通过OSS管理工具资源文件进行管理

以上是整个配置和调试过程，下面才进入正题，在日常的开发和网站运维中，有如下场景是可以使用CDN进行加速的

1、购买的第三方前端商业框架或者公司自有封装好的前端框架。此类场景中，框架核心文件基本不会有大的修改，可以稳定的运行于CDN上

2、常用JS插件。文件处理、分页、表格处理等常用JQuery插件或者Bootstrap插件，可以稳定的运行于CDN上

3、固定的媒体文件。网站Logo、广告位图片、Banner图片等，可以稳定的运行于CDN上

既然有这么多文件需要进行加速，那么有序、便捷的管理就特别重要，由于所实践的项目并不是很大，因此采用如下两种管理方式

①使用阿里云官方提供的OSS客户端工具进行源文件管理

②使用阿里云网站在线CDN刷新功能进行日常CDN资源的刷新

首先去阿里云云市场购买价格为0元的OSS客户端工具，地址是：https://market.aliyun.com/products/53690006/cmgj000281.html?spm=5176.730005.203.4.sNXFiY

然后在ECS服务器上安装软件并使用阿里云Access Key ID和Access Key Secret登录，这里选择的就是刚才的华东2区域（上海）

注：为了提高上传速度（内网上行带宽可达到100M以上），这里我们已经有了和OSS在同一个内网区域的ECS服务器，如果没有也没关系，就在本地电脑使用就行了

软件会要求设置一个6位快捷数字密码

软进去后可以看到，刚才添加MicrosoftYaHeiFix.css文件已经在里面了

我们分别新建两个文件夹，叫Template和Library，分别用于存储固定模板和第三方JS插件，拿出准备好的Unify模板，最新版本号是1.9.4，所以文件目录这样建

将Template目录上传

上传完毕，选择一个文件测试一下 https://cdn.alphams.cn/Template/Unify/1.9.4/assets/css/app.css， 访问成功

再试一下在Web开发中的效果，选取一个模板中页面

官方的页面地址是：http://htmlstream.com/preview/unify-v1.9.4/page_misc_blank.html 

这个页面采用的是本地资源文件存储方式，现在我们新建一个页面，CDNTest.html，复制完全一样的HTML代码，只是将所有资源文件都替换为已经生效的CDN地址

把这个页面放到一个临时的域名（http://cdntest.alphams.cn/CDNTest.html）下进行访问，访问成功！

至此，对模板库CDN加速的配置，算是成功了

9、对博客园加入对Windows Live Writer代码高亮插件wlwsyntaxhighlighter的支持

上一段中，添加了一个Template模板库，下面再试试添加一个插件，正好需要在博客园写博客是需要代码高亮的，就拿这个做实验吧

在Windows Live Writer中，使用的插件是wlwsyntaxhighlighter，而对其提供支撑的就是SyntaxHighlighter库。

wlwsyntaxhighlighter在官网介绍中的使用方法为：

那么我们先将插件上传到OSS中

测试地址：https://cdn.alphams.cn/Library/SyntaxHighlighter/3.0.83/styles/shCore.css，可以访问

然后将如下代码添加到博客园个人设置中

 

保存， 然后在Windows Live Writer中添加一段代码，看看效果如何

。。。。。。。。。。。。。。。

哈哈，不行了，我编不下去了，这一段其实是骗人的，wlwsyntaxhighlighter的版本太老了，我下载的是SyntaxHighlighter库的最新版本，所以根本没法达到效果，这里只是告诉大家一个学习和工作思路，如何充分发挥想象，利用已经搭建好的CDN服务为自己服务。

我自己用的Windows Live Writer插件是PreCode Snippet，不过也并非完全瞎写，拿wlwsyntaxhighlighter举例是因为它在Windows Live Writer里面是所见即所得编辑模式的，可在编辑时进行修改。所以如果有谁有更好的相关插件也可以给我推荐一下，微软把插件下载都下架了，Open Live Writer还不成熟，也只能将就用了。。

已经完成了吗？别着急，还有点额外的细节值得关注

四、关键点和问题处理

在整个方案的实践过程中，也走过弯路遇到过一些问题，主要有如下几个

1、不同浏览器对字体文件的识别

不同厂家的CDN服务似乎对于HTTP头的处理不太一样，而HTTP头的处理又会影响浏览器对资源文件的识别和加载，虽然其中原理我并不专业，但例如谷歌浏览器的最新版本或者手机上的Chromium内核的浏览器对某些前端框架中的字体文件的加载就有怪癖，需要设置服务器的某些跨域属性（腾讯云CDN刚上线时，由于无法设置HTTP头，就无法解决这个问题，现在不知道解决没），虽然说不出详细的门道来，不过经过搜索，也找到了解决办法，例如

在阿里云里面的对应解决办法就是来到CDN管理菜单中

添加HTTP头，参数为access-control-allow-origin，取值为*

这样就解决了问题

2、SSL证书密钥的处理

证书这玩意还真是复杂，完全日不懂，之前在进行支付宝退款开发时就头疼过一次，而阿里云官方提供的帮助只能找到如下：

证书格式说明

各大证书公司颁发的证书格式又有微小的差别，在本次实践中，我先是花了2个多小时研究证书的公钥和私钥，然后又花了1个小时转化格式，都没能成功，最后求助于淘宝证书卖家，1分钟就给我转化好了适合阿里云的格式。。这也是无语了，所以在这里劝大家，术业有专攻，如果弄不懂，及时求助，如果有时间，那就对整个证书体系的所有技术知识都了解一遍，也是不错的，如果有好心人，可以写一篇文章专门讲解一下

3、阿里云OSS对HTTPS的支持

在实践的过程中发现，阿里云OSS无法内置直接支持HTTPS的访问方式，而官方的回答如下：

从技术本质来说，CDN是无法完全替代OSS服务的，对象存储服务虽然是单服务器，但是在例如企业网盘、下载站等场景中，依然有很大的应用空间，所以OSS的HTTPS支持也很有必要，在这里一方面希望阿里云能够早日加入配置式的OSS的HTTPS支持，另一方面，对于反向代理的实现，日后有空，也好好研究一下

4、相对路径绝对路径问题

在实践过程中，有遇到需要对购买的商业模板进行改造的需求，例如引用图片地址、字符串资源等，而改造过程中，势必遇到需要对JS或者CSS文件内的相关图片应用路径。这里需要特别留意的是，在JS和CSS中

在CSS中出现的相对路径，是以CSS文件所在路径为基准的，而JS中的路径则是以导入此JS的网页文件所在的位置为基准的

这一点大家需要特别留意

5、阿里云路径长度问题

在实践中，也遇到了有的商业模板，目录层次特别长，在上传OSS的时候，就无法上传，应该是阿里云对最大路径长度做了限制，在这里建议不要超过5级。

结束了吗，还有没，重构是好习惯，想好以后会有怎样的扩展也很重要

下面就谈一谈这样CDN功能，还有能哪些功能和应用上的扩展

五、延伸与扩展

以上所述解决方案，在开发规模20人月以内的软件外包项目以及互联网敏捷项目中，有过多次非常稳定的实践，但这不是终点，如果深入下去，还有更多可深入挖掘的地方

1、权限控制

既然是架设自有的CDN加速服务，那就要求相关资源不能够给其他系统或者不希望给到的用户访问，针对这个需求，阿里云提供了两种解决方案

①防盗链。防盗链的原理很简单，通过判断HTTP头中的Refer地址，从而给出对应的权限应答，对于在本文中对模板和插件资源文件进行CDN加速的场景，防盗链是最简单也最适合的权限控制授权，因为只要设置自己要用的网站的Web地址就可以达到权限控制的效果。

②鉴权。鉴权是阿里云的一个较为复杂的权限体系，具体的讲解在这URL鉴权功能，适合于CDN下载或者CDN企业内部文件管理等应用场景，具体的实现方法今天不过多讨论

2、图片上传处理

通常所说的网站资源文件有CSS、JS、IMAGE和FONT，在这里要讨论的是CDN加速对于图片处理的应用，值得注意的是：

阿里云的OSS的图片处理CDN加速机制，对于Web开发中的图片上传存储这一传统问题的解决，真是非常傻瓜和美妙

我们先回顾一下传统开发中图片存储解决办法，无非以下几种

①在数据库以Blob字段存储图片完整的二进制数据

②将图片保存在服务器上本地目录下，将文件名存入数据库String字段中

③架设单独图片服务器，将图片的完整URL地址存入数据库String字段中

三种方式在不同规模不同领域的开发中，都有遇到过，也有稳定的解决方案，但这些都过时了！如果大家留意看的话，各大网站早就开始架设自己图片（头像、相册等）CDN加速服务器

而在这里，我们也要做同样的事情，让中小开发项目也能够实现图片上传的云存储并进行加速访问。

由于这个话题也可以单独成文，在这里只做简要介绍，先看完整的图片上传->存储->展现功能结构

针对这个结构，最终的图片呈现3种方式。

①阿里云OSS呈现。最基本的图片云存储，将图片存入阿里云对象存储服务中

②阿里云OSS的CDN加速呈现。对阿里云对象存储服务进行CDN加速，呈现图片仍然是原图

③阿里云OSS的内置图片服务CDN加速呈现。利用阿里云对象存储服务的图片服务，使得呈现的图片能够按照预设的尺寸改变样式和大小

对三种呈现方式我们分别使用域名

http://image.alphams.cn

https://imagecdn.alphams.cn

https://imageservice.alphams.cn

下面是简要的操作步骤

先建一个图片OSSBucket，命名为amsimage

绑定域名image.alphams.cn

继续添加图片CDN

配置CNAME

添加HTTPS支持

对刚才添加的amsimage添加图片处理服务

使用域名imageservice.alphams.cn

添加阿里云OSS内置的图片CDN加速服务成功

进入CDN管理菜单继续给imageservice的CDN服务添加证书增加HTTPS支持

下面继续添加3个阿里云OSS图片服务内置的样式

然后我写了一个测试的系统，方便大家能看明白（这个后面会单独成文讲解）

https://aliyunimagecdn.alphams.cn/

可以看到，一个图片的上传，可以延伸出多种方式与格式的访问，用于不同的场景。

3、使用阿里云的API进行企业级OSS和CDN管理

前面的功能结构图里面可以看到，针对CDN地址的刷新和OSS数据的上传管理，还是依赖第三方工具或者阿里云Web管理端，事实上，阿里云已经提供了非常丰富的管理API，利用这些API，可以构建属于企业自己的OSS和CDN管理工具，达到功能与内部管理相结合的效果，更有利于团队协作与绩效管理。这块私有管理工具我有计划去写，但是时间依然不够，如果以后有写好，也会写一篇文章来介绍一下。

至此，整个研究和实践就告一段落了，学会总结是非常重要的

六、总结与思考

虽然在今天写出文章，但整个尝试和实践过程也经历了好几个月，如果说有什么总结和思考，最大的感触就是

云服务已经不再是所谓的虚拟机或者VPS了，而是真正的深入到了开发和应用的每一个细节和难点，利用云服务已经能够真正的解决问题、提升效率，甚至对软件开发、产品研发、互联网运营起到了某些革命性的突破作用，最近一波特别火的直播APP潮流，我想，和各大云平台提供傻瓜式的直播解决方案是密不可分的，将原来需要独立研发数月之久的直播技术体系，用十几个API就轻松解决，恰恰我们今天讨论的CDN功能就是直播解决方案中重要的一个环节，这也是对CDN加速服务的应用级深度拓展，所以，在这一波云服务发展浪潮里，在各大厂商还处于波动前行的过程中，如果能够静下心来，深入研究和实践相关云服务功能对原有生产力的改造，伴随着云服务厂商的发展而成长，这将是一笔非常宝贵的开发经验和人生历练！

感谢阅读本文，相关文章预告：

以上所探讨的相关技术与解决方案，在很多实践场景中都能用到，后面我将陆续写一些相关文章分享给大家，先预告一篇

《通过阿里云技术对百度UEditor编辑器的.NET版本进行改造，加入CDN图片加速功能》

---

作者：张柔，发布于  博