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

語言: CN / TW / HK

作者:鄧超 | Serverless Devs 開源貢獻者

前言

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

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

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

為函式新增 CDN 功能

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

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

1.png

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

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

2.png

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

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

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

3.png

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

然後新增一個源站:

4.png

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

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

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

5.png

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

6.png

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

設定 CDN 快取

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

1)新增快取過期時間規則

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

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

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

3)效果對比

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

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

9.png

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

10.png

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

11.png

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

總結

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

另外,多看看文件。

參考連結:

[1] 部落格站

https://blog.dengchao.fun/

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

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

[3] 阿里雲 CDN 對於快取過期時間配置的介紹 https://help.aliyun.com/document_detail/27136.html#title-p27-252-g92*

[4] 配置回源 HTTP 響應頭

https://help.aliyun.com/document_detail/155769.html

[5] 阿里雲 函式計算

https://help.aliyun.com/product/50980.html

[6] 阿里雲 CDN

https://help.aliyun.com/document_detail/27101.html

[7] 加速原理

https://help.aliyun.com/document_detail/27101.html#title-sbn-geq-2ez

[8] 配置回源 HTTP 響應頭

https://help.aliyun.com/document_detail/155769.html

[9] 什麼是快取

https://help.aliyun.com/document_detail/122553.html

[10] 配置快取過期時間

https://help.aliyun.com/document_detail/27136.html

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

https://help.aliyun.com/document_detail/27136.html#title-p27-252-g92

[12] 什麼是 Cache Control 響應頭

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

1分鐘 Serverless 部署個人網盤

開啟卡片複製地址

1 分鐘自建一個真網盤

1 步拿到百變指尖陀螺!

12.jpeg

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

時間: 5 月 9 日 - 5 月 20 日(工作日期間)

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

建議: PC 端體驗

點選「此處」,一鍵部署個人網盤!