一、前言

在 Day7 我們已經完成了 GitHub → CodePipeline → CodeBuild → S3 的自動化部署，但遇到一個實際痛點：使用者端可能因為 CloudFront 快取而看不到最新版本的網頁，因為在前一天，我們是用「手動刷新快取」的方式處理網頁更新的問題，所以如果沒有刷新快取，且客戶本身就已經在網頁時，就有會讀不到最新的網頁畫面，這會導致明明程式碼已更新，但前端仍顯示舊內容，使用者體驗不佳。

因此，我們需要在 CI/CD 完成部署後，自動觸發 CloudFront Invalidation，確保新內容立即對外生效，本次章節會解決 「網站更新延遲」 的痛點，主要的價值為：

(1) 確保 CI/CD 部署完成後，CloudFront 的快取會即時更新。
(2) 將快取刷新流程模組化，與 Buildspec 整合，未來任何網站更新都能自動套用。
(3) 對應到 Serverless 架構中的「前端最佳化與用戶體驗」，確保全域 CDN 能即時反應最新版本。

二、需要使用到的服務

• S3：存放靜態網站檔案，CI/CD 主要的部署目標。
• CodeBuild：透過 buildspec.yml 執行建置、S3 同步與 CloudFront 快取刷新。
• CodePipeline：整合 GitHub、CodeBuild 與 S3，自動化流程。
• CloudFront：作為 CDN 加速，並需要在更新時進行快取 Invalidation。
• IAM：授權 CodeBuild 有權限存取 S3 與呼叫 CloudFront API。

三、架構/概念圖

四、技術重點

• 縮小快取刷新範圍：更新全域名路徑 "/*"，可針對變動的檔案刷新，例如 /index.html、/assets/*。
• 權限最小化：IAM Policy 限縮到特定 Distribution，而非使用 "*"。
• 版本控管：考慮在檔名中加入版本號（hash），降低快取壓力。
• 成本考量：CloudFront Invalidation 是免費的前 1,000 次，超過會收費，因此應避免頻繁刷新。

五、Lab流程

1️⃣ 前置作業

無

2️⃣ 主要配置

1. 調整CloudFront的IAM role權限，增加invalidation權限

1. 進入「IAM」服務頁面。
   

2. 進入「角色」頁面，點選codebuild的創建角色。
   

3. 新增權限。
   

4. 給予CloudFront的「快取失效 (Invalidation)」權限，授權資源為指定的CloudFront。
   

5. 貼上CloudFront的ARN，並點選「新增」。
   

   • Ps. CloudFront的ARN要去哪裡看？
     

6. 點選「下一步」。
   

7. 創建規則名稱（自定義）。
   

8. 創建/授權完成。
   

2. 更新buildspec.yml檔案

1. 進入GitHub中，修改buildspec檔案。
   

2. 修改buildspec.yaml檔案，增加清除CloudFront快取的動作。

   • 修改範本

     version: 0.2
     
     phases:
       install:
         runtime-versions:
           nodejs: 18
       build:
         commands:
           - echo "Building website..."
           - npm install || echo "No dependencies"
     artifacts:
       files:
         - '**/*'
     
     post_build:
       commands:
         - echo "Invalidating CloudFront cache..."
         - aws cloudfront create-invalidation --distribution-id <CloudFront_ID> --paths "/*"
     

   

   • CloudFront ID在哪？
     

3. 輸入修改的內容，並更新。
   

3️⃣ 測試驗證

1. 在 GitHub 推送更新，觀察 CodePipeline → CodeBuild 執行過程。

1. 更新index.html內容。
   

2. 打上備註（選用），推送版本。
   

2. 確認 CodeBuild Logs 出現 "Invalidating CloudFront cache..."。

1. 進入CodePipeline後，點選「Build」、進入詳細狀況。
   

2. 確認Log上有部署的資訊。
   

3. 確認「清快取」的動作有執行

1. 前往 CloudFront Console → 查看 「無效判定（Invalidations）」，應該有新紀錄。
   

4. 使用不同瀏覽器測試網頁，應顯示最新版本。

六、結語

在這個 Lab 中，我們把 CI/CD 部署 與 CloudFront 快取管理 整合起來，解決了「使用者看到舊版網頁」的問題。這樣做能確保網站內容在全球節點即時更新，提升使用者體驗。

同時也學會了 buildspec.yml 與 CloudFront API 的整合技巧，這將成為後續模組（會員系統、檔案分享）的基礎前端更新流程。