作者：鄧超?| Serverless Devs 開(kāi)源貢獻(xiàn)者

前言

Cloud Native

為了進(jìn)一步提升網(wǎng)站的訪(fǎng)問(wèn)速度，我們會(huì)使用 CDN 對(duì)網(wǎng)站進(jìn)行加速，但是最近在調(diào)試阿里云的函數(shù)計(jì)算和 CDN 的配合使用時(shí)發(fā)現(xiàn)了一個(gè)需要額外注意的地方。

如何使用 CDN 對(duì)部署在函數(shù)計(jì)算上的靜態(tài)網(wǎng)站進(jìn)行緩存

Cloud Native

那么以我部署在函數(shù)計(jì)算上的博客站^[^1]為例，逐步地向大家介紹如何使用 CDN 對(duì)函數(shù)計(jì)算托管的靜態(tài)網(wǎng)站進(jìn)行緩存。

為函數(shù)添加 CDN 功能

1）為函數(shù)分配域名并添加 CNAME 記錄

由于我希望最終用戶(hù)能通過(guò)?blog.dengchao.fun?來(lái)進(jìn)行訪(fǎng)問(wèn)，因此需要給函數(shù)分配一個(gè)不同的域名?blog.xxx.dengchao.fun：

2）添加自定義域名并設(shè)置路由

將分配的域名設(shè)置到函數(shù)計(jì)算的自定義域名功能中：

因?yàn)?CDN 上也可以設(shè)置 HTTPs，而且函數(shù)計(jì)算之前不能設(shè)置 SSL 協(xié)議版本，因此這里沒(méi)有開(kāi)啟 HTTPS 功能。

3）添加源站類(lèi)型為 "函數(shù)計(jì)算域名" 的 CDN

接下來(lái)到 CDN 控制臺(tái)上新建一個(gè)加速域名：

用戶(hù)最終將通過(guò)加速域名 blog.dengchao.fun?來(lái)訪(fǎng)問(wèn)我的博客站。業(yè)務(wù)類(lèi)型選項(xiàng)不會(huì)影響最終的加速效果，可以任意選。

然后添加一個(gè)源站：

由于函數(shù)計(jì)算的自定義域名沒(méi)有開(kāi)啟 HTTPS，所以源站的端口需要設(shè)置為 80 端口，同時(shí)也可以減少回源時(shí)的響應(yīng)時(shí)間 (實(shí)際效果微不足道)。

4）添加 CNAME 類(lèi)型的 CDN 加速域名記錄

設(shè)置完源站信息并保存后，阿里云會(huì)對(duì)源站內(nèi)容進(jìn)行審核，審核通過(guò)的話(huà)就會(huì)提供一個(gè) CDN 服務(wù)供應(yīng)商的域名給你：

接下來(lái)你需要將你的加速域名解析到 CDN 服務(wù)商提供的域名上：

添加好 CNAME 記錄后，CDN 控制臺(tái)上過(guò)一會(huì)兒就會(huì)顯示為 "已配置" 狀態(tài)，然后你就可以使用配置好的加速域名進(jìn)行訪(fǎng)問(wèn)了。

設(shè)置 CDN 緩存

光配置好加速域名還不夠，不然用戶(hù)每次訪(fǎng)問(wèn)加速域名都需要從源站拉取數(shù)據(jù)，因此我們需要在 CDN 上設(shè)置一下緩存，減少回源次數(shù)。

1）添加緩存過(guò)期時(shí)間規(guī)則

假設(shè)我們希望 CDN 節(jié)點(diǎn)能夠?qū)W(wǎng)站根目錄下的所有內(nèi)容都緩存 1 天，那么我們需要在 CDN 加速域名的緩存管理頁(yè)添加對(duì)應(yīng)的配置：?

本來(lái)操作到這里的時(shí)候我就以為緩存設(shè)置好了，但網(wǎng)站運(yùn)行了一段時(shí)間后觀察 CDN 的監(jiān)控卻發(fā)現(xiàn)緩存命中率一直很低。通過(guò)觀察瀏覽器控制臺(tái)里的網(wǎng)絡(luò)請(qǐng)求日志，逐個(gè)請(qǐng)求頭進(jìn)行分析，最終發(fā)現(xiàn)了一點(diǎn)異常：源站將 Cache-Control?響應(yīng)頭設(shè)置為了 public，max-age=0 。

2）修復(fù) Cache-Control 響應(yīng)頭

仔細(xì)查看了?MDN 上對(duì)于 Cache-Control 響應(yīng)頭的文檔^[^2]，以及阿里云 CDN 對(duì)于緩存過(guò)期時(shí)間配置的介紹^[^3]?后，確認(rèn)了之前的 CDN 緩存配置存在缺陷。（典型的不看文檔吃大虧）

定位好問(wèn)題以后，解決思路也很清晰了：想辦法刪掉源站的?Cache-Control?響應(yīng)頭就好了。

方案一：修改源站 HTTP 服務(wù)器返回的 Cache-Control 響應(yīng)頭

既然源站的 HTTP 服務(wù)器將?Cache-Control?響應(yīng)頭設(shè)置成了?max-age=0?，那我們把源站的 HTTP 服務(wù)器改一下不就好了。

但考慮到我們部署在函數(shù)計(jì)算上的靜態(tài)網(wǎng)站是由?website-fc?插件生成的?Express?服務(wù)器進(jìn)行托管的，如果修改的話(huà)，需要從本地的?website-fc?插件源碼入手進(jìn)行調(diào)整，但?website-fc?插件可能不定期更新, 那我們就需要不定期的進(jìn)行檢查，視情況重新打補(bǔ)丁，執(zhí)行起來(lái)很費(fèi)力。因此我們不能選用這個(gè)方案。

方案二：配置 CDN，刪除源站 HTTP 服務(wù)器返回的 Cache-Control 響應(yīng)頭

再次查看文檔發(fā)現(xiàn)阿里云 CDN 提供了?配置回源 HTTP 響應(yīng)頭^[⁴^]的功能，其中包含了刪除回源響應(yīng)頭的功能。因此我們可以借助這個(gè)功能，讓 CDN 刪除掉源站返回的?Cache-Control?響應(yīng)頭。

配置好以后, 再次觀察加速域名下網(wǎng)絡(luò)請(qǐng)求的響應(yīng)頭，發(fā)現(xiàn)確實(shí)沒(méi)有 Cache-Control：public，max-age=0?的響應(yīng)頭了。

3）效果對(duì)比

由于博客站的訪(fǎng)問(wèn)量并不高，效果不明顯 (簡(jiǎn)直看不出來(lái)??)。因此截取了另一個(gè)訪(fǎng)問(wèn)量相對(duì)較大的網(wǎng)站的監(jiān)控截圖：

首先是訪(fǎng)問(wèn)量對(duì)比，從監(jiān)控?cái)?shù)據(jù)來(lái)看近兩天沒(méi)有顯著的訪(fǎng)問(wèn)量差異：

然后是回源流量對(duì)比, 發(fā)現(xiàn)刪除?Cache-Control?響應(yīng)頭以后回源流量顯著下降：

同時(shí)字節(jié)命中率與請(qǐng)求命中率都有顯著的提升：

看來(lái)我們配置的緩存確實(shí)生效了。

總結(jié)

Cloud Native

配置好 CDN 加速域名和緩存過(guò)期時(shí)間規(guī)則以后，記得檢查源站的響應(yīng)頭。如果源站的響應(yīng)中已有緩存控制相關(guān)的響應(yīng)頭，那么視情況在源站的 HTTP 服務(wù)器上或 CDN 上進(jìn)行調(diào)整。

另外，多看看文檔。

參考鏈接：

[1] 博客站

https://blog.dengchao.fun/

[2]?MDN 上對(duì)于 Cache-Control 響應(yīng)頭的文檔

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

[3]?阿里云 CDN 對(duì)于緩存過(guò)期時(shí)間配置的介紹

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

[4]?配置回源?HTTP 響應(yīng)頭

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

[5]?阿里云函數(shù)計(jì)算

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 響應(yīng)頭

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

[9]?什么是緩存

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

[10]?配置緩存過(guò)期時(shí)間

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

[11]?緩存規(guī)則與優(yōu)先級(jí)

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

[12]?什么是 Cache Control 響應(yīng)頭

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

RECRUITMENT

如何使用阿里云 CDN 對(duì)部署在函數(shù)計(jì)算上的靜態(tài)網(wǎng)站進(jìn)行緩存

作者：鄧超?| Serverless Devs 開(kāi)源貢獻(xiàn)者

為函數(shù)添加 CDN 功能

2） 添加自定義域名并設(shè)置路由

3） 添加源站類(lèi)型為 "函數(shù)計(jì)算域名" 的 CDN

4） 添加 CNAME 類(lèi)型的 CDN 加速域名記錄

設(shè)置 CDN 緩存

1）添加緩存過(guò)期時(shí)間規(guī)則

2） 修復(fù) Cache-Control 響應(yīng)頭

方案一：修改源站 HTTP 服務(wù)器返回的 Cache-Control 響應(yīng)頭

方案二：配置 CDN，刪除源站 HTTP 服務(wù)器返回的 Cache-Control 響應(yīng)頭

3）效果對(duì)比

[5]?阿里云 函數(shù)計(jì)算

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

[6]?阿里云 CDN

[7]?加速原理

[8]?配置回源 HTTP 響應(yīng)頭

[9]?什么是緩存

[10]?配置緩存過(guò)期時(shí)間

[11]?緩存規(guī)則與優(yōu)先級(jí)

[12]?什么是 Cache Control 響應(yīng)頭

2）添加自定義域名并設(shè)置路由

3）添加源站類(lèi)型為 "函數(shù)計(jì)算域名" 的 CDN

4）添加 CNAME 類(lèi)型的 CDN 加速域名記錄

2）修復(fù) Cache-Control 響應(yīng)頭

[5]?阿里云函數(shù)計(jì)算