簡介
大部分的WEB網站，主要的流量都是靜態資源，用戶首次訪問的大部分時間都在等待靜態資源的下載，越大的帶寬，訪問速度就越快。但是我們購買的服務器，一般都是小水管（1~5M），畢竟國內的帶寬貴得很。相比於通過加大帶寬加快訪問速度，直接讓用戶通過CDN訪問靜態資源不僅更快，而且便宜。
為了防止CDN回源時對服務器產生倒灌造成帶寬突然占滿，靜態資源放對象存儲（阿里雲OSS），CDN直接回源到對象存儲是最好的方案。通過CDN+OSS，服務器實現徹底的動靜分離，服務器只處理動態請求，所有靜態資源都通過CDN+OSS處理。
不使用CDN，直接通過OSS也可以做到徹底的動靜分離。但是使用CDN+OSS與直接使用OSS在費用上並沒有明顯差別，對不同用戶速度卻有較大的差別，所以還是推薦與CDN+OSS一起使用保證用戶體驗的一致性。
(圖片來自阿里雲)
下面以Ant Design Pro為例，演示集成到OSS和CDN的過程。
集成OSS的步驟
阿里雲上面創建OSS
關於在阿里雲上創建和使用OSS的過程這里只提幾個重點。
第1個：bucket應該是公共讀，然后外網域名可從下圖找到。
第2個：開啟定時自動刪除文件的功能，防止bucket無限增長
第3個：對於上傳的文件，應該檢查下它的頭部是否設置正確，壓縮和過期對於用戶的體驗有直接的影響。（上傳后檢查）
安裝webpack-alioss-plugin
通過webpack-alioss-plugin可以做到在npm run build的時候，自動將dist的文件上傳到阿里雲OSS。
yarn add -D webpack-alioss-plugin
修改config/config.js
檢查到有阿里雲OSS的配置，才上傳阿里雲OSS，否則仍然按照原來的配置走。一般來說，只有要上線了才需要放阿里雲，平時自己測試並不需要，所以這樣的配置是必要的。
同時阿里雲OSS的相關認證配置，應該通過環境變量提供，而不是直接寫死在代碼中，防止密鑰泄露。
// 引入AliOSSPlugin
const AliOSSPlugin = require('webpack-alioss-plugin');
export default {
// 省略無關配置
publicPath: process.env.PUBLIC_PATH || '/admin/',
chainWebpack(config) {
// 認證信息從環境變量讀取
if (process.env.WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_ID) {
config.plugin('alioss').use(AliOSSPlugin, [
{
ossBaseDir: '/',
project: 'admin', // 項目名(用於存放文件的直接目錄)
options: {
headers: {
'Cache-Control': 'max-age=2592000',
},
},
},
]);
}
},
// 省略無關配置...
}
配置環境變量
創建.env:
WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_ID=<替換成你的ACCESS KEY ID>
WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_SECRET=<替換成你的ACCESS KEY SECRET>
WEBPACK_ALIOSS_PLUGIN_BUCKET=<替換成你的bucket>
WEBPACK_ALIOSS_PLUGIN_REGION=oss-cn-beijing # 替換成實際的區域
PUBLIC_PATH='https://cdn.codefriend.top/admin/' # 替換成OSS提供的公網域名或者自己設置的CDN域名
驗證是否加載成功
先編譯
npm run build
如果alioss有正常工作，正常可以看到下面的截圖：
然后打開dist/index.html，可以看到它引用的資源也變成了以publicPath為前綴的路徑：
這樣就表示修改成功了。
集成CDN
在國內使用CDN域名必須備案，如果沒備案這里不用看了，直接使用OSS提供的域名也可以。
CDN的集成，不需要在代碼層面做任何操作，直接登陸阿里雲操作。這里羅列幾個關鍵配置
添加域名
直接選擇OSS為源站
添加CNAME記錄
根據提示，進你的DNS添加一條CNAME記錄
開啟安全證書
后記
本文主要談的是配置，其實CDN&OSS在使用有多種使用方法，也有許多的注意點。這個在后續文章中再談。
這里只談一個基本的點，這里的OSS在上傳后是所有版本都保留着，假如不保留着，會出現一種情況：先發布版本A，再發布版本B，將先刪除OSS上的A版本，然后再將B版本上傳到OSS。這段短暫的時間新用戶訪問到的仍然是A，將出現404。