【初碼乾貨】使用阿里雲對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