CI/CD 聽起來很專業，但其實概念很簡單：

CI（持續整合，Continuous Integration）

就是「自動幫你檢查程式碼有沒有問題」。

傳統做法：

• 你寫完程式碼，手動測試
• 同事也寫了程式碼，他也手動測試
• 合併程式碼時才發現衝突或 bug
• 大家加班找問題 😭

CI 的做法：

• 你一 push 程式碼到 GitHub
• 系統自動執行測試
• 有問題立刻通知你
• 問題在小的時候就被抓出來

CD（持續部署，Continuous Deployment）

就是「自動幫你把網站更新上線」。

傳統做法：

改程式碼 → 手動 build → 手動上傳 S3 → 手動清快取 → 手動測試 → 發現有問題 → 重來一次

整個過程 20-30 分鐘，而且容易出錯。

CD 的做法：

改程式碼 → push 到 GitHub → 自動 build → 自動部署 → 自動清快取 → 喝杯咖啡等通知 ☕

整個過程 3-5 分鐘，而且不會出錯。

真實情境：手動部署 vs 自動化部署

情境一：日常更新

手動部署：

1. 本地執行 npm run build（等 2 分鐘）
2. 打開 AWS Console（找密碼 1 分鐘）
3. 進入 S3，找到 bucket（點點點 1 分鐘）
4. 全選舊檔案，刪除（等 2 分鐘）
5. 上傳新檔案（等 5 分鐘）
6. 進入 CloudFront，建立無效判定（點點點 2 分鐘）
7. 等待快取清除（等 10 分鐘）
8. 測試網站（5 分鐘）
9. 發現一個小錯字 → 重新來過 😱

自動化部署（5 分鐘）：

1. 改程式碼
2. git commit -m "fix typo"
3. git push
4. 去喝咖啡 ☕
5. 收到 Slack 通知「部署成功」✅
   所以真的是差很多的!

以下為CICD操作步驟

Push上你的github repo

1.建立code pipelin

2.選擇建置自訂管道

3.管道設定

4.選擇要綁定的來源 github repo source

5.選擇自動化trigger的分支

6.準備好buildspec.yml 一樣push至 github 根目錄下

7.buildspec.yml 語法

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 22
      
  pre_build:
    commands:
      - echo Installing dependencies...
      - npm ci
      
  build:
    commands:
      - echo Build started on `date`
      - npm run build
      
  post_build:
    commands:
      - echo Deploying to S3...
      - aws s3 sync dist/ s3://<your-bucket-name> --delete

artifacts:
  files:
    - '**/*'
  base-directory: dist

cache:
  paths:
    - 'node_modules/**/*'

到CodeBuild即可 其他都可以省略

為什麼我們跳過 CodeDeploy？Region 的坑要注意！

如果你跟著其他教學文章操作，可能會看到完整的 CodePipeline 有三個階段：

Source (GitHub) → Build (CodeBuild) → Deploy (CodeDeploy)

但在我們的實作中，卻是：

Source (GitHub) → Build (CodeBuild) → ❌ 跳過 Deploy

然後直接在 buildspec.yml 裡用 aws s3 sync 部署。

為什麼要這樣做？讓我來解釋這個大坑！

CodeDeploy 的 Region 限制問題

問題根源

AWS CodePipeline 的 S3 Deploy Action（不是 CodeDeploy，是 Pipeline 內建的 S3 部署功能）有個隱藏的限制：

它只支援特定的 AWS 區域，而且 Pipeline 和 S3 Bucket 必須在同一區域！

所以使用內建政策

1. 進入 IAM 服務
2. 點擊左側「角色」
3. 搜尋 codebuild-frontend-build-service-role
4. 點擊該角色
5. 點擊「新增許可」→「建立內嵌政策」
6. 選擇「JSON」頁籤
7. 貼上以下政策：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:DeleteObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::<bucket-name>",
                "arn:aws:s3:::<bucket-name>/*"
            ]
        }
    ]
}

最後測試一下

結語

從零開始建立 AWS S3 + CodePipeline 的自動化部署看似複雜，但其實就是三個核心步驟：建立 S3 儲存網站、設定 CodeBuild 自動建置、連接 GitHub 自動觸發。雖然會遇到 IAM 權限、CloudFront 快取、Region 限制等坑，但一旦設定完成，你只需要 git push 就能在 5 分鐘內完成部署。

記住：投資 4 小時學習，換來未來數千小時的自動化效率。不要為了省事選擇手動部署，也不要被 AWS 的複雜介面嚇到。CI/CD 不是大公司的專利，而是每個開發者都該擁有的超能力。現在就開始，讓你的每次 commit 都自動上線，把時間花在創造價值，而不是重複點擊