設定 CDN

access_time 1.5~2小時

本篇介紹 CDN 的用途,以及如何在 GCP 設定適用於 TekapoCart 的 CDN。

本篇設定需略懂 Linux 指令,一般 TekapoCart 店家可直接略過。

GCP 截圖的語系為英文,可切換偏好設定方便對照。截圖的字有一點小,造成不便,請見諒。

什麼是 CDN(Content Delivery Network)?

將網站中的靜態檔(如 圖片、影片、PDF)複製一份到另一個「資料夾」並給它公開檢視的權限,再將靜態檔流量統統導向這個「資料夾」。此方式可達到減少主機負擔、降低流量成本的目的。由於步驟明確又能達到明顯效果,在著手更深入的網站效能優化前,開啟 CDN 功能通常會是優先執行的項目。

CDN 使用時機

此功能在 GCP 最低花費約 18鎂/月 起跳,因此在網站讀取速度變慢或是規劃多台主機架構時再考慮啟用較佳。

CDN 優點

  1. 降低流量成本(必須是在流量花費已大到超過使用此功能的最低花費才適用)。
  2. 檔案分佈於全球節點,在任何地方瀏覽時,速度都不延遲。
  3. 在某些網站效能分析工具跑出來的分數會比較高分。

準備 CDN 網址

後面的步驟會需要一個網址,網址可隨意命名,例如:cdn.yoursite.comstatic.yoursite.com

新增「資料夾」Bucket

此步驟說明如何在 Google Cloud Storage 建立一個 Bucket。

  1. 點選左側選單:Storage
  2. 點選次分類:Browser
  3. Name(Bucket 名稱):請務必商店網址命名,不能輸入 .,請用 - 替換,最後加上 -cdn,例如:yoursite-com-cdn
  4. Location:選擇 Asia
  5. 點選 Create

提醒:Bucket 名稱必須使用「商店網址、.換-、後面加-cdn」的規則,否則會無法設定成功喔。

將 Bucket 權限設為公開

  1. 點選頁面右上方 Cloud Shell 小圖示,下方會跳出 console 視窗。
  2. Console 視窗輸入: gsutil defacl ch -u AllUsers:R gs://Bucket_名稱
  1. 隨意上傳一張圖片。
  2. 點選圖片右方的連結小圖示,連結會開新視窗,若在新視窗看得到圖片,代表權限設定成功。

補充:將 Bucket 設為公開的指令

說明指令
Make all future objects in the bucket public gsutil defacl ch -u AllUsers:R gs://Bucket_名稱
Make all current objects in the bucket public gsutil acl ch -r -u AllUsers:R gs://Bucket_名稱
Make the bucket itself public gsutil acl ch -u AllUsers:R gs://Bucket_名稱

新增 Load balancing

  1. 點選左側選單:Network services
  2. 點選次分類:Load balancing
  3. 點選 Create load balancer
  1. 點選 HTTP(S) Load Balancing 下的 Start configuration
  1. Name:隨意填寫,用商店網址較方便好記,不能輸入 .,可用 - 替換,例如:tekapo-io-lb。
  2. 點選 Backend configuration
  3. 點選 Backend buckets
  4. 點選 Create a backend bucket
  1. Name:隨意填寫,用商店網址較方便好記,不能輸入 .,可用 - 替換,例如:tekapo-io-cdn。
  2. Cloud Storage bucket: 選擇你剛剛建立的 bucket
  3. Cloud CDN: 打勾
  4. 點選 Create
  1. 點選 Frontend configuration
  2. Protocol:選 HTTPS
  3. Port:443
  4. Certificate:Create a new certificate
  1. Name:隨意填寫,用商店網址較方便好記,不能輸入 .,可用 - 替換,例如:tekapo-io-cdn-cert。
  2. Create mode:選 Create Google-managed certificate
  3. Domains:CDN 網址 cdn.yoursite.com
  4. 點選 Create
  1. 點選 Create
  1. 等待綠勾勾出現,再點進去查看詳細資訊。
  1. 產生的 IP,請記錄下來,下一步驟需要它。

將 CDN 網址指向 IP

前往網域管理後台,將 CDN 網址指向剛剛建立的 IP。

  1. DNS Name:CDN 網址
  2. Resource Record Type:A / 5 / seconds
  3. IPv4 Address:剛剛建立的 Load Balancing IP
  4. 點選 Create

測試:把剛試傳的圖片網址換成新的 CDN 網址,看看新的 CDN 網址有沒有通。

同步 Bucket

未來從 TekapoCart 後台上傳檔案的同時,也要同步至 Bucket。此步驟說明如何產生一組權限 key 以便於管理 Bucket。

  1. 點選左側選單:IAM & admin
  2. 點選次分類:Service accounts
  3. 點選 CREATE SERVICE ACCOUNT
  1. Service account name:隨意命名,例如:TekapoCart CDN
  2. 點選 CREATE
  1. Role:請選擇 Storage Admin
  2. 點選 CONTINUE
  1. 點選 CREATE KEY
  2. 點選 CREATE 後會自動下載一個 json 檔案到本機
  3. 點選 DONE
  4. 將下載到本機的 json 檔案改名為 cdn_key.json
  5. 本機使用 gcloud 指令將 json 檔案上傳至網站主機:
    用法:gcloud compute scp [LOCAL_FILE_PATH] [INSTANCE_NAME]:[REMOTE_DIR]
    範例:gcloud compute scp /Users/.../Downloads/cdn_key.json yoursite-com-web:/var/bak/cdn_key.json

測試:在 TekapoCart 後台的 HTML 編輯器上傳一張圖看看是否有成功同步到 Bucket。

將既有檔案匯入 Bucket

在啟用 TekapoCart CDN 之前,必須先將未建立 Bucket 前就上傳的檔案複製至 Bucket。TekapoCart 後台提供批次匯入 Bucket 的功能,依照下方步驟,便可輕鬆達成。

  1. 點選左側選單:設定
  2. 點選次分類:商店
  3. 點選頁籤:網站維護
  4. 啟用商店:(否 = 維護模式)
  5. 點選 儲存
  1. 登入 TekapoCart 後台,點選左側選單:進階設定
  2. 點選次分類:效能
  3. 點選 將既有檔案匯入 Bucket
  4. 將商店恢復到啟用模式(啟用商店:

測試:找一張先前上傳的圖片,看看是否能在 Bucket 找到同樣的圖片。

啟用 TekapoCart CDN

  1. CSS 快取:
  2. JavaScript 快取:
  3. 點選 儲存
  4. CDN#1:CDN 網址cdn.yoursite.com
  5. 點選 儲存
  6. 點選 右上角 清除快取

等待幾秒鐘等畫面跑完後開啟前台頁面,若商店的商品圖、輪播圖都有出現,就代表成功!

恭喜完成

你征服了一個非常專業的任務呢!給你一個讚!

相關連結

最後更新 2019-02-23