*作者：鄧超 | Serverless Devs 開源貢獻者*

## 前言

為了進一步提升網站的訪問速度，我們會使用 CDN 對網站進行加速，但是最近在除錯阿里雲的函式計算和 CDN 的配合使用時發現了一個需要額外注意的地方。

## 如何使用 CDN 對部署在函式計算上的靜態網站進行快取

那麼以我部署在函式計算上的部落格站 **[** **1]** 為例，逐步地向大家介紹如何使用 CDN 對函式計算託管的靜態網站進行快取。

### 為函式新增 CDN 功能

#### 1）為函式分配域名並新增 CNAME 記錄

由於我希望終端使用者能透過 blog.dengchao.fun 來進行訪問，因此需要給函式分配一個不同的域名 blog.xxx.dengchao.fun：

![1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7673163fad0e4077bedfe82a48c9fb3b~tplv-k3u1fbpfcp-zoom-1.image "1.png")

#### 2） 新增自定義域名並設定路由

將分配的域名設定到函式計算的自定義域名功能中：

![2.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94433d47d9444890a2e89c101b4e762a~tplv-k3u1fbpfcp-zoom-1.image "2.png")

因為 CDN 上也可以設定 HTTPs，而且函式計算之前不能設定 SSL 協議版本，因此這裡沒有開啟 HTTPS 功能。

#### 3） 新增源站型別為 "函式計算域名" 的 CDN

接下來到 CDN 控制檯上新建一個加速域名：

![3.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8fc03de95d0e461e888792f4f6ebae4d~tplv-k3u1fbpfcp-zoom-1.image "3.png")

使用者最終將透過加速域名 blog.dengchao.fun 來訪問我的部落格站。業務型別選項不會影響最終的加速效果，可以任意選。

然後新增一個源站：

![4.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7575d0102949454dbb1da720c71bace1~tplv-k3u1fbpfcp-zoom-1.image "4.png")

由於函式計算的自定義域名沒有開啟 HTTPS，所以源站的埠需要設定為 80 埠，同時也可以減少回源時的響應時間 (實際效果微不足道)。

#### 4） 新增 CNAME 型別的 CDN 加速域名記錄

設定完源站資訊並儲存後，阿里雲會對源站內容進行稽核，稽核透過的話就會提供一個 CDN 服務供應商的域名給你：

![5.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9361a8e015b145f0951d281a1df21c5e~tplv-k3u1fbpfcp-zoom-1.image "5.png")

接下來你需要將你的加速域名解析到 CDN 服務商提供的域名上：

![6.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0b553064d8c4840ac383130bc21c2de~tplv-k3u1fbpfcp-zoom-1.image "6.png")

新增好 CNAME 記錄後，CDN 控制檯上過一會兒就會顯示為 "已配置" 狀態，然後你就可以使用配置好的加速域名進行訪問了。

### 設定 CDN 快取

光配置好加速域名還不夠，不然使用者每次訪問加速域名都需要從源站拉取資料，因此我們需要在 CDN 上設定一下快取，減少回源次數。

#### 1）新增快取過期時間規則

假設我們希望 CDN 節點能夠對網站根目錄下的所有內容都快取 1 天，那麼我們需要在 CDN 加速域名的快取管理頁新增對應的配置：

![7.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/799923d28af44c058961c681a4908e63~tplv-k3u1fbpfcp-zoom-1.image "7.png")

本來操作到這裡的時候我就以為快取設定好了，但網站執行了一段時間後觀察 CDN 的監控卻發現快取命中率一直很低。透過觀察瀏覽器控制檯裡的網路請求日誌，逐個請求頭進行分析，最終發現了一點異常：源站將 Cache-Control 響應頭設定為了 public，max-age=0 。

#### 2） 修復 Cache-Control 響應頭

仔細檢視了 MDN 上對於 Cache-Control 響應頭的文件 **[** **2]** ，以及阿里雲 CDN 對於快取過期時間配置的介紹 **[** **3]** 後，確認了之前的 CDN 快取配置存在缺陷。（典型的不看文件吃大虧）

定位好問題以後，解決思路也很清晰了：想辦法刪掉源站的 Cache-Control 響應頭就好了。

##### 方案一：修改源站 HTTP 伺服器返回的 Cache-Control 響應頭

既然源站的 HTTP 伺服器將 Cache-Control 響應頭設定成了 max-age=0 ，那我們把源站的 HTTP 伺服器改一下不就好了。

但考慮到我們部署在函式計算上的靜態網站是由 website-fc 外掛生成的 Express 伺服器進行託管的，如果修改的話，需要從本地的 website-fc 外掛原始碼入手進行調整，但 website-fc 外掛可能不定期更新, 那我們就需要不定期的進行檢查，視情況重新打補丁，執行起來很費力。因此我們不能選用這個方案。

##### 方案二：配置 CDN，刪除源站 HTTP 伺服器返回的 Cache-Control 響應頭

再次檢視文件發現阿里雲 CDN 提供了 配置回源 HTTP 響應頭 **[** **4** **]** 的功能，其中包含了刪除回源響應頭的功能。因此我們可以藉助這個功能，讓 CDN 刪除掉源站返回的 Cache-Control 響應頭。

![8.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3dbf9ec9a8984b4a9481d96aad720040~tplv-k3u1fbpfcp-zoom-1.image "8.png")

配置好以後, 再次觀察加速域名下網路請求的響應頭，發現確實沒有 Cache-Control：public，max-age=0 的響應頭了。

#### 3）效果對比

由於部落格站的訪問量並不高，效果不明顯 (簡直看不出來?)。因此擷取了另一個訪問量相對較大的網站的監控截圖：

首先是訪問量對比，從監控資料來看近兩天沒有顯著的訪問量差異：

![9.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/486cd80ab8e947d38ca488ed80f98c81~tplv-k3u1fbpfcp-zoom-1.image "9.png")

然後是回源流量對比, 發現刪除 Cache-Control 響應頭以後回源流量顯著下降：

![10.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67ede537b6684617b933a49835433b4f~tplv-k3u1fbpfcp-zoom-1.image "10.png")

同時位元組命中率與請求命中率都有顯著的提升：

![11.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f966c67a35654029ac5b1968f3b32e4e~tplv-k3u1fbpfcp-zoom-1.image "11.png")

看來我們配置的快取確實生效了。

## 總結

配置好 CDN 加速域名和快取過期時間規則以後，記得檢查源站的響應頭。如果源站的響應中已有快取控制相關的響應頭，那麼視情況在源站的 HTTP 伺服器上或 CDN 上進行調整。

另外，多看看文件。

***參考連結：***

[1] 部落格站

*<https:></https:>*

[2] MDN 上對於 Cache-Control 響應頭的文件

*<https:>*

[3] 阿里雲 CDN 對於快取過期時間配置的介紹*
*<https:>*

[4] 配置回源 HTTP 響應頭

*<https:>*

[5] 阿里雲 函式計算

*<https:>*

[6] 阿里雲 CDN

*<https:>*

[7] 加速原理

*<https:>*

[8] 配置回源 HTTP 響應頭

*<https:>*

[9] 什麼是快取

*<https:>*

[10] 配置快取過期時間

*<https:>*

[11] 快取規則與優先順序

*<https:>*

[12] 什麼是 Cache Control 響應頭

*<https:>*

**1分鐘** **Serverless 部署個人網盤**

開啟卡片複製地址

1 分鐘自建一個真網盤

1 步拿到百變指尖陀螺！

![12.jpeg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/139bb86f5fc648d98f1f6bf3d9e4fa21~tplv-k3u1fbpfcp-zoom-1.image "12.jpeg")

**本場景基於 Serverless 應用中心 + 阿里雲函式計算 + 開源企業級線上檔案管理系統 KodBox 打造**，讓你僅用 “幾次” 點選，擁有一個可隨意儲存資源、不限速下載、多端使用、與朋友共享資源……的專屬個人網盤。

**時間：** 5 月 9 日 - 5 月 20 日（工作日期間）

**獎品：** 每日 200 個百變指尖陀螺

**建議：** PC 端體驗

## 點選[「此處」](https://developer.aliyun.com/adc/series/activity/serverlessapp)，一鍵部署個人網盤！</https:></https:></https:></https:></https:></https:></https:></https:></https:></https:></https:>

如何使用阿里雲 CDN 對部署在函式計算上的靜態網站進行快取

相關文章