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

布满荆棘的人生 2021-09-16 08:10 219阅读 0赞

> 提示：阅读本文需提前了解的相关知识
> 
> 1、阿里云（[https://www.aliyun.com][https_www.aliyun.com]）
> 
> 2、阿里云CDN（[https://www.aliyun.com/product/cdn][https_www.aliyun.com_product_cdn]）
> 
> 3、阿里云OSS（[https://www.aliyun.com/product/oss][https_www.aliyun.com_product_oss]）
> 
> 4、HTTPS（[http://baike.baidu.com/view/14121.htm][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服务，来对核心库进行加速，例如[百度静态资源公共库][Link 1]，又例如[360网站卫士常用前端公共库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][]颁发【推荐一个淘宝的证书卖家，店铺名称：[琥珀主机][Link 2]，不仅价格公道，店主对SSL的相关技术知识也非常专业，本次实践中阿里云有个公钥私钥坑多亏了这位店主的指导】）

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

二、整体功能结构

应用结构如下图所示

[![image\_thumb\[6\]][image_thumb_6]][image_thumb_6_image_thumb_6]

三、具体实现步骤

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

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

[![image][]][image 1]

绑定后如下：

[![image][image 2]][image_image 2]

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

[![image][image 3]][image_image 3]

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

添加结果如下：

[![image][image 4]][image_image 4]

[![image][image 5]][image_image 5]

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

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

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

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

[![image][image 6]][image_image 6]

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

[![image][image 7]][image_image 7]

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

[![image][image 8]][image_image 8]

绑定后如下：

[![image][image 9]][image_image 9]

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

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

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

[![image][image 10]][image_image 10]

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

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

[![image][image 11]][image_image 11]

添加完成，下面进行配置

[![image][image 12]][image_image 12]

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

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

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

[![image][image 13]][image_image 13]

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

[![image][image 14]][image_image 14]

5、测试是否成功

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

[![image][image 15]][image_image 15]

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

[![image][image 16]][image_image 16]

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

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

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

6、继续添加HTTPS访问支持

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

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

[![image][image 17]][image_image 17]

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

[![image][image 18]][image_image 18]

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

查看一下证书

[![image][image 19]][image_image 19]

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

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

[![image][image 20]][image_image 20]

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

[![image][image 21]][image_image 21]

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][https_market.aliyun.com_products_53690006_cmgj000281.html_spm_5176.730005.203.4.sNXFiY]

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

[![image][image 22]][image_image 22]

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

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

[![image][image 23]][image_image 23]

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

[![image][image 24]][image_image 24]

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

[![image][image 25]][image_image 25]

将Template目录上传

[![image][image 26]][image_image 26]

上传完毕，选择一个文件测试一下 [https://cdn.alphams.cn/Template/Unify/1.9.4/assets/css/app.css][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][http_htmlstream.com_preview_unify-v1.9.4_page_misc_blank.html]

[![image][image 27]][image_image 27]

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

[![image][image 28]][image_image 28]

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

[![image][image 29]][image_image 29]

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

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

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

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

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

[![image][image 30]][image_image 30]

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

[![image][image 31]][image_image 31]

测试地址：[https://cdn.alphams.cn/Library/SyntaxHighlighter/3.0.83/styles/shCore.css][https_cdn.alphams.cn_Library_SyntaxHighlighter_3.0.83_styles_shCore.css]，可以访问

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

[![image][image 32]][image_image 32]

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

[![image][image 33]][image_image 33]

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

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

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

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

四、关键点和问题处理

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

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

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

[![image][image 34]][image_image 34]

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

[![image][image 35]][image_image 35]

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

[![image][image 36]][image_image 36]

这样就解决了问题

2、SSL证书密钥的处理

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

### [证书格式说明][Link 4] ###

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

3、阿里云OSS对HTTPS的支持

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

[![image\_thumb\[2\]][image_thumb_2]][image_thumb_2_image_thumb_2]

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

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

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

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

这一点大家需要特别留意

5、阿里云路径长度问题

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

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

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

五、延伸与扩展

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

1、权限控制

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

[![image][image 37]][image_image 37]

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

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

2、图片上传处理

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

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

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

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

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

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

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

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

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

[![图片加速][983921-20160702141321187-1082221198.jpg]][983921-20160702141321187-1082221198.jpg 1]

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

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

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

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

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

[http://image.alphams.cn][http_image.alphams.cn]

[https://imagecdn.alphams.cn][https_imagecdn.alphams.cn]

[https://imageservice.alphams.cn][https_imageservice.alphams.cn]

下面是简要的操作步骤

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

[![image][image 38]][image_image 38]

绑定域名image.alphams.cn

[![image][image 39]][image_image 39]

[![image][image 40]][image_image 40]

[![image][image 41]][image_image 41]

继续添加图片CDN

[![image][image 42]][image_image 42]

配置CNAME

[![image][image 43]][image_image 43]

添加HTTPS支持

[![image][image 44]][image_image 44]

[![image][image 45]][image_image 45]

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

[![image][image 46]][image_image 46]

[![image][image 47]][image_image 47]

使用域名imageservice.alphams.cn

[![image][image 48]][image_image 48]

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

[![image][image 49]][image_image 49]

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

[![image][image 50]][image_image 50]

[![image][image 51]][image_image 51]

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

[![image][image 52]][image_image 52]

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

[https://aliyunimagecdn.alphams.cn/][https_aliyunimagecdn.alphams.cn]

[![image][image 53]][image_image 53]

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

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

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

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

[https://blog.csdn.net/ww3614358/article/details/52162929][https_blog.csdn.net_ww3614358_article_details_52162929]

[https_www.aliyun.com]: https://www.aliyun.com/
[https_www.aliyun.com_product_cdn]: https://www.aliyun.com/product/cdn
[https_www.aliyun.com_product_oss]: https://www.aliyun.com/product/oss
[http_baike.baidu.com_view_14121.htm]: http://baike.baidu.com/view/14121.htm
[Link 1]: http://cdn.code.baidu.com/
[360_CDN]: http://libs.useso.com/
[RapidSSL]: https://www.rapidssl.com/
[Link 2]: https://shop60534645.taobao.com/
[Link 3]: https://wrapbootstrap.com/
[Unify Responsive Template]: https://wrapbootstrap.com/theme/unify-responsive-website-template-WB0412697
[image_thumb_6]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141238593-1022491959.png
[image_thumb_6_image_thumb_6]: /images/20210725/bb07553cd49d41c1bf2f45588a16caad.png
[image]: /images/20210725/d8f9e5f436f34a1e8b2e8ac2b385f105.png
[image 1]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141239234-1710553265.png
[image 2]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141240906-672526558.png
[image_image 2]: /images/20210725/f091c0e3a69646caa599c5742499607f.png
[image 3]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141242296-1794339118.png
[image_image 3]: /images/20210725/45875689964b4d58a79cb60d4b0bd5a9.png
[image 4]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141243921-209865090.png
[image_image 4]: /images/20210725/8d892729b39e456ebc91453fb4171b97.png
[image 5]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141245327-1626819613.png
[image_image 5]: /images/20210725/dc49aa8932d14b8eb89d21984fde37cd.png
[image 6]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141246156-366054440.png
[image_image 6]: /images/20210725/8b050078eb2846ce968bbdb0be1bbb44.png
[image 7]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141247124-543617611.png
[image_image 7]: /images/20210725/42c1f7f3e98a46b5a5d638abc3078da9.png
[image 8]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141248296-105326281.png
[image_image 8]: /images/20210725/ba22e4cf8f2642d5b8d28bf6bceb681a.png
[image 9]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141249171-699083918.png
[image_image 9]: /images/20210725/d8c12efef552494b843a688c7bda2b8e.png
[image 10]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141250437-173556655.png
[image_image 10]: /images/20210725/2ee273b8c9074e67b098d2b4cffb95d3.png
[image 11]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141252265-1724530030.png
[image_image 11]: /images/20210725/d0923e2690094a5b85a7b186c69123c5.png
[image 12]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141253359-886856640.png
[image_image 12]: /images/20210725/e0dd61383eda4346917df95b52b68639.png
[image 13]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141254546-704826265.png
[image_image 13]: /images/20210725/3fb1611489bc4d59b6877bae575f3cc0.png
[image 14]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141255531-5634232.png
[image_image 14]: /images/20210725/44850ce8782e4e65b45a3ea288a9b4e2.png
[image 15]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141256109-1307216781.png
[image_image 15]: /images/20210725/5256163262a940ff87e51ff4d1a003b0.png
[image 16]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141257202-1119368206.png
[image_image 16]: /images/20210725/71bbb4947e65461ba1a0244c3e34730f.png
[http_amscdn.oss-cn-shanghai.aliyuncs.com_MicrosoftYaHeiFix.css]: http://amscdn.oss-cn-shanghai.aliyuncs.com/MicrosoftYaHeiFix.css
[http_cdnoss.alphams.cn_MicrosoftYaHeiFix.css]: http://cdnoss.alphams.cn/MicrosoftYaHeiFix.css
[http_cdn.alphams.cn_MicrosoftYaHeiFix.css]: http://cdn.alphams.cn/MicrosoftYaHeiFix.css
[image 17]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141257999-1174071311.png
[image_image 17]: /images/20210725/1acfc56ae52d403a93a2434518b42be1.png
[image 18]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141258968-2077584004.png
[image_image 18]: /images/20210725/139ec92c06e4478a85a62df2a5c55f65.png
[https_cdn.alphams.cn_MicrosoftYaHeiFix.css]: https://cdn.alphams.cn/MicrosoftYaHeiFix.css
[image 19]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141259952-1765596270.png
[image_image 19]: /images/20210725/036e57103d814a99b9ae558c08584ea2.png
[image 20]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141300952-544418245.png
[image_image 20]: /images/20210725/100de71e573043428fcb273cd14311e7.png
[image 21]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141301640-1946674132.png
[image_image 21]: /images/20210725/a9b43b6317f24dca822d7a491c4bb954.png
[https_market.aliyun.com_products_53690006_cmgj000281.html_spm_5176.730005.203.4.sNXFiY]: https://market.aliyun.com/products/53690006/cmgj000281.html?spm=5176.730005.203.4.sNXFiY
[image 22]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141302984-840378706.png
[image_image 22]: /images/20210725/2f8b9c7a585f4a2b8d36dd3e80345e1a.png
[image 23]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141303687-245002089.png
[image_image 23]: /images/20210725/dc1060ca3f3e48baa3b00256174af626.png
[image 24]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141304874-69082739.png
[image_image 24]: /images/20210725/1bcc478080d9489db362db494ab624d4.png
[image 25]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141305656-1696765714.png
[image_image 25]: /images/20210725/6f02d93bc55c419db701000833572d10.png
[image 26]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141306562-572143700.png
[image_image 26]: /images/20210725/7ef07c00c39a463fb52c04ddf62a5ead.png
[https_cdn.alphams.cn_Template_Unify_1.9.4_assets_css_app.css]: https://cdn.alphams.cn/Template/Unify/1.9.4/assets/css/app.css
[http_htmlstream.com_preview_unify-v1.9.4_page_misc_blank.html]: http://htmlstream.com/preview/unify-v1.9.4/page_misc_blank.html
[image 27]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141307984-1889455594.png
[image_image 27]: /images/20210725/f025eb7d548b40dd8c71c58108f222fa.png
[image 28]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141309577-1387416032.png
[image_image 28]: /images/20210725/94a1580852b24c44b922100f69758013.png
[http_cdntest.alphams.cn_CDNTest.html]: http://cdntest.alphams.cn/CDNTest.html
[image 29]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141310749-928472155.png
[image_image 29]: /images/20210725/d974f2e898104ceb96958994fc5f354d.png
[wlwsyntaxhighlighter]: http://wlwsyntaxhighlighter.codeplex.com/
[SyntaxHighlighter]: http://alexgorbatchev.com/SyntaxHighlighter/
[image 30]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141311671-1307759879.png
[image_image 30]: /images/20210725/ae606377c2e9433e9c30faf71b17a382.png
[image 31]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141312577-1391004524.png
[image_image 31]: /images/20210725/fa86423ae9cc408799480c82b3e27c74.png
[https_cdn.alphams.cn_Library_SyntaxHighlighter_3.0.83_styles_shCore.css]: https://cdn.alphams.cn/Library/SyntaxHighlighter/3.0.83/styles/shCore.css
[image 32]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141313765-268458086.png
[image_image 32]: /images/20210725/5ca7eb47053048e58168ee71a0d1b3f8.png
[image 33]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141314765-64749537.png
[image_image 33]: /images/20210725/3391645793884f27bc339ccbef53ff04.png
[PreCode Snippet]: http://precode.codeplex.com/
[Open Live Writer]: http://openlivewriter.org/
[image 34]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141315921-2132058549.png
[image_image 34]: /images/20210725/36f1f499da454e6296251dde7896ac65.png
[image 35]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141317031-151616599.png
[image_image 35]: /images/20210725/f4f43c5face44cac899180f2b5c9e4ba.png
[image 36]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141318249-952617106.png
[image_image 36]: /images/20210725/63fee6ea785b46f599317a29da940279.png
[Link 4]: https://help.aliyun.com/document_detail/27268.html
[image_thumb_2]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141319140-1437834913.png
[image_thumb_2_image_thumb_2]: /images/20210725/348577533f61416ba5c24e337379e37a.png
[image 37]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141320296-402571888.png
[image_image 37]: /images/20210725/74ae3a6049324cb8bcfa2d773c587b3b.png
[URL]: https://help.aliyun.com/document_detail/27135.html
[983921-20160702141321187-1082221198.jpg]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141321187-1082221198.jpg
[983921-20160702141321187-1082221198.jpg 1]: /images/20210725/e5c12111fd4d4e0abc34f6ed34f6d8ac.png
[http_image.alphams.cn]: http://image.alphams.cn/
[https_imagecdn.alphams.cn]: https://imagecdn.alphams.cn/
[https_imageservice.alphams.cn]: https://imageservice.alphams.cn/
[image 38]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141322140-1969447212.png
[image_image 38]: /images/20210725/678c998b49d64ff8a1b6f03a2fda0a6b.png
[image 39]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141323343-584561665.png
[image_image 39]: /images/20210725/6cab2e13f6db4454b525b7fb158f837a.png
[image 40]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141324421-1932299500.png
[image_image 40]: /images/20210725/2c0c4497f0ba4ae2a73e8f84184802f6.png
[image 41]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141325171-573344267.png
[image_image 41]: /images/20210725/8cfef5a90e354acdbd539048d9904293.png
[image 42]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141326671-2097301610.png
[image_image 42]: /images/20210725/72e52de8c50b4dcf97983ddf2aeb0b72.png
[image 43]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141327640-1229948509.png
[image_image 43]: /images/20210725/c87f8bec5be54339b39b5a0725828a78.png
[image 44]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141328577-1293467228.png
[image_image 44]: /images/20210725/fe214dbfb66040f4b0a18e91b062489e.png
[image 45]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141329656-40256211.png
[image_image 45]: /images/20210725/44343009525f4e41a8465a716072ea6b.png
[image 46]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141330687-1718075267.png
[image_image 46]: /images/20210725/6eb34e4d2cb24451a986b1784caf76ae.png
[image 47]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141332031-1239376128.png
[image_image 47]: /images/20210725/1859ecf2451c4cba91d910683215994c.png
[image 48]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141333452-1226799364.png
[image_image 48]: /images/20210725/9f24ce5a5a304797b55d6226b2741406.png
[image 49]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141334531-617349801.png
[image_image 49]: /images/20210725/badb0564391945ab927c4e6977589612.png
[image 50]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141335734-304068918.png
[image_image 50]: /images/20210725/eddfbbb9f56c439abc5ae9251ccd0140.png
[image 51]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141337265-1021880386.png
[image_image 51]: /images/20210725/a2e03938b2fb429cb356d792253706ea.png
[image 52]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141338109-658881923.png
[image_image 52]: /images/20210725/3a4f25915b7945258fb559868d2abd16.png
[https_aliyunimagecdn.alphams.cn]: https://aliyunimagecdn.alphams.cn/
[image 53]: http://images2015.cnblogs.com/blog/983921/201607/983921-20160702141543984-778624639.png
[image_image 53]: /images/20210725/cdf75f5538bb41ae8c437a6ee7e63d8f.png
[https_blog.csdn.net_ww3614358_article_details_52162929]: https://blog.csdn.net/ww3614358/article/details/52162929