HTML5技术

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

字号+ 作者:H5之家 来源:博客园 2016-07-03 16:00 我要评论( )

提示:阅读本文需提前了解的相关知识 阅读目录结构 引: 一、准备工作 二、整体功能结构 三、具体实现步骤 四、关键点和问题处理 五、延伸与扩展 六、总结与思考 引: 在日常的开发过程中,会越来越多的使用诸如Bootstrap等前端框架,又或是 JQuery Form这样

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

阅读目录结构

引:

一、准备工作

二、整体功能结构

三、具体实现步骤

四、关键点和问题处理

五、延伸与扩展

六、总结与思考

引:

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

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

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

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

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

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

以下是具体实现步骤

一、准备工作

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

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

二、整体功能结构

应用结构如下图所示

image_thumb[6]

三、具体实现步骤

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

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

image

绑定后如下:

image

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

image

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

添加结果如下:

image

image

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

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

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

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

image

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

image

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

image

绑定后如下:

image

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

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

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

image

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    2017-04-30 16:00

  • 对于Bootstrap的介绍以及如何使用 - novai-L

    对于Bootstrap的介绍以及如何使用 - novai-L

    2017-04-29 09:00

  • 在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    2017-04-28 15:00

  • 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 - nzbin

    探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 - nzb

    2017-04-25 09:02

网友点评
t