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

由於 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 功能

CDN 教學:解決方案1

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

yum install httpd -y

CDN 教學:解決方案2-1

vim /etc/httpd/conf/httpd.conf

CDN 教學:解決方案2-2

systemctl start httpd
systemctl status httpd

CDN 教學:解決方案2-3

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

CDN 教學:解決方案2-4

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

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

CDN 教學:解決方案2-5

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

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

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

CDN 教學:解決方案2-6

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

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

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

CDN 教學:解決方案3

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

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

CDN 教學:解決方案4

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

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

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

Cache之後

CDN 教學:解決方案5-1
CDN 教學:解決方案5-2

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)