背景

傳統動靜不分離的產品架構，隨著訪問量在增長，性能會成為瓶頸。以一個常見的Web站點為例。www.acar.com是一個剛建立汽車資訊車友交流網站，主站用Php搭建，有10GB的圖片素材，部分JS文件。目前購買一臺ECS放置所有程序代碼，并在ECS上安裝MySQL數據庫。隨著用戶訪問量的不斷增長，不少用戶反映，訪問網站的速度越來越慢，圖片加載慢，網站響應慢，同時網站技術人員也發現用戶上傳的圖片越來越多，快超過1TB了。在這種情況下，用戶可以通過利用OSS和CDN對網站進行架構優化，做到網站文件的動靜分離的，提升用戶訪問體驗，實現成本可控。

網站動靜分離架構

在該架構中，OSS作為海量文件存儲源，靜態圖片、視頻文件、下載包、App更新包等均放在OSS，同時OSS作為CDN的源站,通過CDN加速分發，用戶通過CDN節點就近獲得文件。

該架構優勢十分明顯：

?

• 降低Web服務器負載，靜態文件訪問負載全部通過CDN；
  
• 存儲費用最低，OSS的存儲費用僅為ECS磁盤費用的50%；
• 海量存儲空間，無需考慮存儲架構升級；
  
• 流量費用低，相比直接通過OSS訪問，除極少額外增加的回源流量外，主要流量使用CDN流量，單價最低只需0.26GB，遠遠低于OSS直接訪問的外網流量單價。
  

?

具體操作步驟

第一步：對ECS上的網站程序進行整理，把動態程序部分和靜態部分分不同的目錄管理起來：

?

• 建立Images目錄，放置所有網站高清素材圖片；
• 建立Javascript目錄，放置所有的JS腳本；
• 建立Attachment目錄，放置所有用戶上傳的圖片和附件。

?

第二步：進入到OSS控制臺，點擊“CDN加速OSS”。

?

• 選擇新建Bucket。根據你ECS所在的區域選擇Bucket所在區域，權限選擇“公共讀”，Bucket名稱與ECS上新建的目錄的名稱對應，比如”acar-image-bucket“，選擇下一步；
• 輸入“image.acar.com”作為您網站高清素材圖片的加速域名后，點擊下一步；
• 選擇默認的自動添加阿里云解析，點擊完成。

?

第三步：點擊“立即上傳文件，體驗加速效果”。

?

• 把您在第一步中建立在ECS上的Images目錄下的所有圖片文件上傳到這里（acar-image-bucket下），您可以使用OSS客戶端工具更加方便靈活的完成圖片的上傳（OSS客戶端工具Windwos版本）；
• 點擊列表中已經上傳文件的“獲取地址”，您就能獲取到該文件的CDN加速的訪問地址，通常為“您輸入的加速域名+'/'+'文件名'”的格式；
• 逐一完成圖片文件的上傳。

?

第四步：按照前三步的示意，把其他兩個文件也通過“CDN加速OSS”的方式上傳,分別建立“acar-js-bucket”和"acar-csimages-bucket"兩個使用CDN加速的OSSbucket。

第五步：在原本ECS系統中，找到原本訪問靜態文件的代碼，把訪問URL修改為加速訪問的地址。

大功告成，以后用戶訪問您的網站的靜態文件就全部通過OSS+CDN的方式訪問，不再占用您ECS的資源。

需要注意的是，如果您想把用戶上傳的文件自動同步到“acar-csimages-bucket”中，您可以參考OSS相關SDK和API的PutObjcet部分，實現代碼級別自動上傳。

注意事項

?

• ?OSS是以Bucket為單位設置CDN加速，您最好為每個Bucket指定一個二級域名，方便管理；
  
• ?您可以通過OSS一鍵加速配置，靜態文件的OSS和CDN的相關配置（CDN加速OSS點擊這里）；
  
• ?用戶第一次訪問靜態資源，會先回源OSS獲取資源再推送到CDN，需要大概5分鐘左右的生效時間。您可以在更新資源后，通過刷新的方式，讓CDN主動回源，讓用戶訪問時不再等待。
  

?

相關資料

各區域的OSS訪問地址

OSS客戶端工具Windwos版本

客戶端工具，支持文件夾上傳，支持大文件自動分片多線程上傳、支持批量刪除、支持批量設置。

OSS客戶端工具Mac版本

客戶端工具，支持文件夾上傳，支持大文件自動分片多線程上傳、支持批量刪除、支持批量設置。

CDN管理控制臺

網頁版本控制臺，方便您進行管理設置和簡單的文件管理。

?

轉載：https://yq.aliyun.com/articles/60018

轉載于:https://www.cnblogs.com/tianciliangen/p/8349990.html

總結

以上是生活随笔為你收集整理的如何实现网站文件动静分离的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。