作者?|?鄧超（Serverless Devs 開源貢獻者）

前言

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

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

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

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

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

由于我希望最終用戶能通過?blog.dengchao.fun?來進行訪問，因此需要給函數(shù)分配一個不同的域名?blog.xxx.dengchao.fun：

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

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

因為 CDN 上也可以設(shè)置 HTTPs，而且函數(shù)計算之前不能設(shè)置 SSL 協(xié)議版本，因此這里沒有開啟 HTTPS 功能。

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

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

用戶最終將通過加速域名 blog.dengchao.fun?來訪問我的博客站。業(yè)務(wù)類型選項不會影響最終的加速效果，可以任意選。

然后添加一個源站：

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

4）添加 CNAME 類型的 CDN 加速域名記錄

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

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

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

設(shè)置 CDN 緩存

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

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

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

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

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

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

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

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

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

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

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

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

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

3）效果對比

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

首先是訪問量對比，從監(jiān)控數(shù)據(jù)來看近兩天沒有顯著的訪問量差異：

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

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

看來我們配置的緩存確實生效了。

總結(jié)

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

另外，多看看文檔

。

p.s 加速原理^[7^]假設(shè)您的加速域名為?www.aliyundoc.com，接入 CDN 開始加速服務(wù)后，當終端用戶在北京發(fā)起 HTTP 請求時，處理流程如下圖所示:

參考鏈接（可滑動）：

博客站：https://blog.dengchao.fun/MDN 上對于 Cache-Control 響應(yīng)頭的文檔：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control阿里云 CDN 對于緩存過期時間配置的介紹：https://help.aliyun.com/document_detail/27136.html#title-p27-252-g92配置回源 HTTP 響應(yīng)頭：https://help.aliyun.com/document_detail/155769.html阿里云函數(shù)計算文檔：https://help.aliyun.com/product/50980.html阿里云 CDN：https://help.aliyun.com/document_detail/27101.html加速原理：https://help.aliyun.com/document_detail/27101.html#title-sbn-geq-2ez配置回源 HTTP 響應(yīng)頭：https://help.aliyun.com/document_detail/155769.html什么是緩存：https://help.aliyun.com/document_detail/122553.html配置緩存過期時間：https://help.aliyun.com/document_detail/27136.html緩存規(guī)則與優(yōu)先級：https://help.aliyun.com/document_detail/27136.html#title-p27-252-g92什么是 Cache Control 響應(yīng)頭：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

若您對產(chǎn)品使用或者技術(shù)學習有任何疑問 & 建議，歡迎后臺回復?“進群”?加入阿里云 Serverless 開發(fā)者技術(shù)學習群交流。

1分鐘?Serverless 部署個人網(wǎng)盤

1 分鐘自建一個真網(wǎng)盤

1 步拿到百變指尖陀螺！??

(打開卡片復制地址)

本場景基于 Serverless 應(yīng)用中心 + 阿里云函數(shù)計算 + 開源企業(yè)級在線文件管理系統(tǒng) KodBox 打造，讓你僅用 “幾次” 點擊，擁有一個可隨意保存資源、不限速下載、多端使用、與朋友共享資源……的專屬個人網(wǎng)盤。

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

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

建議：PC 端體驗

如何使用 CDN 回源到阿里云函數(shù)計算托管的靜態(tài)網(wǎng)站？

作者?|?鄧超（Serverless Devs 開源貢獻者）

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

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

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

4）添加 CNAME 類型的 CDN 加速域名記錄

設(shè)置 CDN 緩存

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

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

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

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

3）效果對比

戳原文，立即部署個人網(wǎng)盤！

如何使用 CDN 回源到阿里云函數(shù)計算托管的靜態(tài)網(wǎng)站？

作者?|?鄧超（Serverless Devs 開源貢獻者）

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

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

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

4） 添加 CNAME 類型的 CDN 加速域名記錄

設(shè)置 CDN 緩存

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

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

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

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

3）效果對比

戳原文，立即部署個人網(wǎng)盤！

如何使用 CDN 回源到阿里云函數(shù)計算托管的靜態(tài)網(wǎng)站？

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

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

4）添加 CNAME 類型的 CDN 加速域名記錄

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

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

戳原文，立即部署個人網(wǎng)盤！