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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初码干货使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践相关的知识,希望对你有一定的参考价值。

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

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图片加速功能》


作者:张柔,发布于 

以上是关于初码干货使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践的主要内容,如果未能解决你的问题,请参考以下文章

初码-Azure系列-文章目录

初码干货记一次分布式B站爬虫任务系统的完整设计和实施

初码-爬虫系列-文章目录

初码-Azure系列-存储队列的使用与一个Azure小工具(蓝天助手)

CDN快讯阿里云对HTTP/3新一代网络传输协议QUIC浅析

使用阿里云对docker拉取镜像加速