CDN 教學：如何讓 Google CDN Cache 指定副檔名的檔案？

CDN教學大公開！如何在不改任何程式碼的情況下，進行cache住指定副檔名的檔案？透過本篇的 CDN 教學，讓您快速在Google CDN 快取指定某個副檔名的檔案！

CDN 教學入門：基本概念與工作原理及特點

在進入實際 CDN 教學 之前，必須先理解 CDN 的核心概念與運作方式。CDN（Content Delivery Network，內容傳遞網路）透過全球分佈的節點伺服器，將網站資源預先快取在距離使用者最近的地理位置，讓瀏覽者獲得更快的存取速度。

CDN 的工作原理

1. 使用者發出資源請求（例如訪問網頁圖片或影片）。
2. DNS 將請求導向最近的 CDN 節點，而不是原始伺服器。
3. CDN 節點若已有快取，直接回應資源；若沒有，才向源站請求並快取下來。
4. 下一次有其他使用者請求相同資源時，即可直接由 CDN 節點回應。

CDN 的主要特點：

• 降低延遲：縮短資料傳遞距離，提升載入速度。
• 減輕伺服器負載：大量靜態資源由 CDN 承擔，源站壓力大幅降低。
• 提升穩定性：即使某個伺服器發生故障，其他節點也能提供服務。
• 增強安全性：具備 DDoS 防護、HTTPS 加速與安全憑證整合功能。

因此，不論是大型電商、新聞網站，甚至是部落格，使用 CDN 都能有效改善用戶體驗。

延伸閱讀：Cloud CDN 是什麼？Cloud CDN 功能、特色與效益全面介紹

為什麼要設定副檔名快取？深入解析效能與實務需求

在 CDN 教學 實務中，「副檔名快取」是影響效能的重要因素。不同類型檔案的快取策略應有所區隔，否則可能造成效能不彰或浪費資源。

常見檔案類型與快取建議：

• 圖片與影片（.jpg、.png、.mp4、.gif）：適合長時間快取，因為內容變動頻率低。
• CSS、JavaScript：可快取較長時間，但若有更新需透過版本號或檔名控制。
• API 回應、動態頁面（.php、.asp、.json）：快取時間宜縮短，以確保數據即時性。
• 檔案下載（.zip、.pdf、.docx）：可長時間快取，減少頻寬消耗。

由於 GCP 上面目前比較常見的 Google CDN ( Content Delivery Network) Cache 方法就是將媒體檔案、圖片檔案、物件檔案放在 Google Cloud Storage 上面，並且再將指定的 Bucket 讓 Google CDN 進行 Cache。而除了這個方法以外，難道就沒有更具有彈性的方法，讓我快取指定某個副檔名的檔案嗎？例如：只 Cache 住 .jpg .png .gif 檔就好。

通常我們要在網頁顯示一張圖片，如果是以往的作法，是將圖片上傳到 Google Cloud Storage 上，圖片就會有一組 URL，因此在網頁程式碼中顯示圖片的方是就是將該 URL 填寫在網頁程式碼中。在不改任何程式碼的情況下，我該如何讓我可以進行 cache 住指定副檔名的檔案？

事前準備

1. 建立 VM，本示範是使用 CentOS 7。
2. 建立一組 Instance Group (VM數量可依照您的需求而定)，並套用在 HTTP(S) Load Balancer 上

CDN 教學解決方案

在事前準備項目都準備就緒後，我們就動手來實做將指定副檔名的檔案進行快取的事項吧。
( Load Balancer 的建立，不在此篇描述)

1. 首先，將先前建立好的 GCP HTTP(S) Load Balancer 的 Backedn service 中 開啟 Cloud CDN 功能

2. SSH到 CentOS VM 主機內，安裝網頁伺服器套件

yum install httpd -y

vim /etc/httpd/conf/httpd.conf

systemctl start httpd
systemctl status httpd

並下載一張圖片到目錄底下。

試著先嘗試在瀏覽器上透過Load Balancer IP查看 http://Load Balancer IP/Microfusion_LOGO.png

看看是否能正常顯示這張圖片？

並且我們檢查一下在 Cache之前 圖片的狀態是如何？

Google Cloud CDN “Cache hit ratio”，沒有cache之前是顯示 n/a

然後網頁開啟檢視模式，察看圖片的內容資訊

3. 再來，很重要的就是要在網頁伺服器的設定檔進行修改參數

在 httpd.conf 設定檔的最後一行加入底下參數

<Files ~ “.(gif|jpeg|jpg|png|mp4)$”>
Header set Cache-Control “max-age=86400,public”
</Files>

Cache 類型：gif, jpg, jpeg, png
Cache 時間：86400秒

4. 添加完參數後，記得要重啟網頁伺服器服務
systemctl restart httpd

5. 檢查圖片是否有被CDN給Cache住？

網頁多重新瀏覽幾次，Cache 住之後，可看見Cache hit ratio(命中率）提升了，並且在網頁檢視模式中，也可以看見 “Age” 和 “Cache-Control”的時間。

Age：這個物件在快取中存在的時間，以秒為單位。
Cache-Control：向從伺服器直到客戶端在內的所有快取機制告知，它們是否可以快取這個物件。其單位為秒。

Cache之後

設定錯誤排查：Google CDN Cache 沒作用怎麼辦？

在實際操作過程中，即使照著 CDN 教學 設定，仍可能遇到 Google CDN Cache 沒生效的情況。以下是常見排查方向：

常見問題

1. 快取規則未正確設定：副檔名或路徑未被包含。
2. HTTP Header 衝突：源站設定了 no-cache 或 private，導致 CDN 無法保存。
3. 來源伺服器回應不允許快取：例如未設置 Cache-Control: public。
4. 測試方式錯誤：僅透過瀏覽器觀察，未使用正確工具檢查。

排查方法

• 使用 curl -I <URL> 查看 HTTP 標頭，檢查快取相關資訊。
• 在 Google Cloud Console 的 CDN 設定頁面確認快取規則是否正確套用。
• 嘗試清除快取或重新部署資源，確保最新設定生效。

最佳做法

• 明確規劃不同副檔名的快取時間。
• 使用版本化檔名（如 style.v2.css）避免快取混淆。
• 定期測試快取效果，確保 CDN 確實減少回源次數。

CDN 教學FAQ 常見問題

Q：什麼是 CDN？為什麼在網站優化中這麼重要？

CDN（Content Delivery Network）是一種透過全球節點加速網站內容傳輸的技術。它能將圖片、CSS、JavaScript、影片等靜態資源分散到不同伺服器，讓使用者從最近的節點取得資料，大幅降低延遲與等待時間。

Q：為什麼要設定副檔名快取？

設定副檔名快取可以幫助 CDN 更有效率地分辨哪些檔案需要被快取，哪些檔案則必須即時回源。

常見做法包含：

• 圖片（.jpg、.png、.webp） → 適合長時間快取
• CSS 與 JavaScript → 中長時間快取，但要注意版本控制
• HTML → 通常建議不快取，以確保頁面內容更新即時呈現

這也是 CDN 教學 中會特別強調的最佳實務之一，因為快取策略直接影響網站效能與使用者體驗。

Q：Google CDN Cache 沒作用怎麼辦？

如果遇到 Google CDN Cache 沒有發揮效果，可以透過以下排查：

• 確認快取規則是否設定正確（是否針對副檔名或目錄配置）。
• 使用 curl -I 或 Chrome 開發者工具查看回應標頭（Cache-Control、Age 等欄位）。
• 檢查是否有 CDN 與瀏覽器快取規則衝突。
• 確認檔案是否正確同步上傳至 Google Cloud Storage 或後端伺服器。

Q：瀏覽器快取和 CDN 快取有什麼差別？

• 瀏覽器快取：快取儲存在使用者的裝置上，適合短時間加速，但受限於瀏覽器設定與快取清除。
• CDN 快取：快取分散在全球節點，所有使用者都能受益，適合大規模分流S與高流量網站。

Q：三大雲端平台（GCP、AWS、Azure）的 CDN 有什麼差異？

三大平台的 CDN 都能提供全球節點、SSL、快取設定，但細節仍有差異：

• Google Cloud CDN (GCP)：整合度高，對使用 GCP 其他服務的開發者最友善。
• AWS CloudFront：節點最多，功能彈性高，但設定較複雜。
• Azure CDN：對微軟生態系統使用者便利，價格與功能兼顧。

CDN 教學總結

如此一來，以上方法即可根據您指定的副檔名類型，進行 CDN Cache 了，是不是很方便呀？ 趕快來試試看吧！

想了解更多 GCP 的隱藏版實用功能，請持續鎖定宏庭架構師專欄，讓您新知訊息接不完喔！

延伸閱讀

Cloud VPN建置：以GCE串接Azure Active Directory為例(Part 1)

Cloud VPN建置：以GCE串接Azure Active Directory為例(Part 2)

Cloud VPN建置：以GCE串接Azure Active Directory為例(Part 3)