Zi 字媒體

如何修正 X-cache: Miss from CloudFront 問題

2021/12/25

不論有沒有 CloudFront CDN 快取資料的存在，每次都要跟 Server 要資料，估計讀取要一段時間，等到也不耐煩，它就會返回 X-Cache:Miss from CloudFront 回應，要修正 X-Cache:Miss from CloudFront 可能是一項耗時花費時間去解決問題。

要解決此問題，首先需要確定要發送的標頭 Headers 訊息狀態，可在 Chrome 瀏覽器呼叫開發人員工具 ( F12 ) 視窗，查看 Network 列表裡 Headers 訊息狀態如下：

cache-control: max-age = 14400
content-encoding: gzip
content-language: zh-TW
content-length: 20209
content-type: text/html; charset=UTF-8
feature-policy: geolocation
pragma: no-cache
referrer-policy: no-referrer
server: nginx
status: 200
vary: Accept-Encoding,User-Agent
x-amz-cf-pop: TPE52-C1
x-cache: Miss from cloudfront

從上面標頭 Headers 訊息狀態來看，發送了三條標題分別如下：

cache-control: max-age = 14400	向 Cloudfront 發送這頁面在幾秒鐘內緩存多長時間請。在我們的例子中它是 14400 秒，也是 4 小時發送一次。
pragma: no-cache	no-cache 是指在快取前，每次要發送請求 Server，那 Server 沒可用更新的檔案時，才會顯示。
x-cache: Miss from cloudfront	Miss from cloudfront 是向原站主機轉發請求而產生的延遲，導致請求的載入速度較慢。

為了避免發生轉發請求而產生的延遲，要它解析 CloudFront 緩存頁面減少載入延遲時間，把 cache-control 設定擷取的回應縮短時間為 600 ~ 7200 秒 (依需求而定)，而 pragma 標頭設置為 public 讓任何共用、私有快取存取，修改後，x-cache 就會變成 Hit from cloudfront 狀態，如沒有變化的話，可能要向 CloudFront 開工單幫您查原因囉。

cache-control: max-age = 600
content-encoding: gzip
content-language: zh-TW
content-length: 20209
content-type: text/html; charset=UTF-8
feature-policy: geolocation
pragma: public
referrer-policy: no-referrer
server: nginx
status: 200
vary: Accept-Encoding,User-Agent
x-amz-cf-pop: TPE52-C1
x-cache: Hit from cloudfront

這點除了 CDN 快取之外，尤其是在寫網站工程師身上，常常掉以輕心，就是沒有設 HTTP response in cache policy … 不要以為僅掛 CDN 就好了，你要怎樣 deploy 就怎樣 reload 沒動靜，啊~ 不就踩到了屎坑，是嗎？以上教學希望有小小幫助到您。(逃)