閱讀目錄結構

引：

一、準備工作

二、整體功能結構

三、具體實現步驟

四、關鍵點和問題處理

五、延伸與擴充套件

六、總結與思考

引：

在日常的開發過程中，會越來越多的使用諸如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的相關技術知識也非常專業，本次實踐中阿里雲有個公鑰私鑰坑多虧了這位店主的指導】）

二、整體功能結構

應用結構如下圖所示

三、具體實現步驟

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

6、繼續新增HTTPS訪問支援

HTTPS的潮流已經不可逆轉，在這裡我們也裝個逼，新增對HTTPS的支援，不得不說，在這些細節方面，阿里雲還是蠻不錯的（比如微軟雲中國，在6月之前就只能通過後臺客服手動新增證書去支援HTTPS）

點選剛才的HTTPS安全加速，按照如下進行配置，這裡的證書內容和私鑰，可以問SSL證書發行商要（這裡有個大坑，後面會說到）

配置好以後顯示已經啟用了HTTPS安全加速

檢視一下證書

7、放入部落格園程式碼中檢視效果

剛才的程式碼是對頁面中所有字型都統一為微軟雅黑，在部落格園的設定中加入如下一段

儲存後重新整理部落格頁面，可以看到確實都變成了微軟雅黑

8、通過OSS管理工具資原始檔進行管理

以上是整個配置和除錯過程，下面才進入正題，在日常的開發和網站運維中，有如下場景是可以使用CDN進行加速的

1、購買的第三方前端商業框架或者公司自有封裝好的前端框架。此類場景中，框架核心檔案基本不會有大的修改，可以穩定的運行於CDN上

2、常用JS外掛。檔案處理、分頁、表格處理等常用JQuery外掛或者Bootstrap外掛，可以穩定的運行於CDN上

3、固定的媒體檔案。網站Logo、廣告點陣圖片、Banner圖片等，可以穩定的運行於CDN上

既然有這麼多檔案需要進行加速，那麼有序、便捷的管理就特別重要，由於所實踐的專案並不是很大，因此採用如下兩種管理方式

①使用阿里雲官方提供的OSS客戶端工具進行原始檔管理

②使用阿里雲網站線上CDN重新整理功能進行日常CDN資源的重新整理

然後在ECS伺服器上安裝軟體並使用阿里雲Access Key ID和Access Key Secret登入，這裡選擇的就是剛才的華東2區域（上海）

注：為了提高上傳速度（內網上行頻寬可達到100M以上），這裡我們已經有了和OSS在同一個內網區域的ECS伺服器，如果沒有也沒關係，就在本地電腦使用就行了

軟體會要求設定一個6位快捷數字密碼

軟進去後可以看到，剛才新增MicrosoftYaHeiFix.css檔案已經在裡面了

我們分別新建兩個資料夾，叫Template和Library，分別用於儲存固定模板和第三方JS外掛，拿出準備好的Unify模板，最新版本號是1.9.4，所以檔案目錄這樣建

將Template目錄上傳

再試一下在Web開發中的效果，選取一個模板中頁面

這個頁面採用的是本地資原始檔儲存方式，現在我們新建一個頁面，CDNTest.html，複製完全一樣的HTML程式碼，只是將所有資原始檔都替換為已經生效的CDN地址

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

9、對部落格園加入對Windows Live Writer程式碼高亮外掛wlwsyntaxhighlighter的支援

上一段中，添加了一個Template模板庫，下面再試試新增一個外掛，正好需要在部落格園寫部落格是需要程式碼高亮的，就拿這個做實驗吧

wlwsyntaxhighlighter在官網介紹中的使用方法為：

那麼我們先將外掛上傳到OSS中

然後將如下程式碼新增到部落格園個人設定中

儲存， 然後在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加速呈現。利用阿里雲物件儲存服務的圖片服務，使得呈現的圖片能夠按照預設的尺寸改變樣式和大小

對三種呈現方式我們分別使用域名

下面是簡要的操作步驟

先建一個圖片OSSBucket，命名為amsimage

繫結域名image.alphams.cn

相關推薦