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

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

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

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

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

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

阅读目录结构

引：

1、准备工做

2、总体功能结构

3、具体实现步骤

4、关键点和问题处理

5、延伸与扩展

6、总结与思考

---

引：

在平常的开发过程当中，会愈来愈多的使用诸如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块）

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

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

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

2、总体功能结构

应用结构以下图所示

3、具体实现步骤

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

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

绑定后以下：

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

注：这里选择了所属区域为华东2，由于博主的ECS服务器购买在华东2，具体能够根据实际状况来选择

添加结果以下：

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

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

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

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

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

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

绑定后以下：

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

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

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

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

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

添加完成，下面进行配置

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

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

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

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

五、测试是否成功

到这里就完成了基本的配置，下面试一试是否成功，进入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，浏览器访问也成功

六、继续添加HTTPS访问支持

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

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

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

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

查看一下证书

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

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

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

八、经过OSS管理工具资源文件进行管理

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

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

二、经常使用JS插件。文件处理、分页、表格处理等经常使用JQuery插件或者Bootstrap插件，能够稳定的运行于CDN上

三、固定的媒体文件。网站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加速的配置，算是成功了

九、对博客园加入对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还不成熟，也只能将就用了。。

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

4、关键点和问题处理

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

一、不一样浏览器对字体文件的识别

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

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

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

这样就解决了问题

二、SSL证书密钥的处理

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

证书格式说明

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

三、阿里云OSS对HTTPS的支持

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

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

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

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

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

这一点你们须要特别留意

五、阿里云路径长度问题

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

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

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

5、延伸与扩展

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

一、权限控制

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

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

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

二、图片上传处理

一般所说的网站资源文件有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/

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

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

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

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

6、总结与思考

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

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

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

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

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

---

做者：张柔，发布于  博客园  与  初码博客

转载请注明出处，欢迎邮件交流：zhangrou@printhelloworld.com，或者加QQ群参与讨论：11444444