Week 12 · Day 05 — CI/CD：自動建構並部署

學習目標

• 讓建構通過後自動部署到 GitHub Pages
• 使用 GitHub Secrets 傳遞權杖
• 完成「一推送即上線」流程

重點

完整 Deploy workflow

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist/my-app

關鍵重點 - npm ci：依 lock 檔安裝依賴（乾淨、可重現） - npm run build：建構 production - peaceiris/actions-gh-pages：把 dist/ 推到 gh-pages 分支做部署 - publish_dir：要發布的資料夾

GitHub Secrets - secrets.GITHUB_TOKEN 由 GitHub 自動提供（不需設定） - 若需其他密鑰（如 Firebase token），到 Repository → Settings → Secrets 設定

env:
  FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

CI/CD 心態 - 讓「推 main」自動完成：測試 → 建構 → 部署 - 減少人為出錯，加快上線節奏

實作

1. 建立 deploy.yml（如上）
2. push 到 main
3. 觀察 Actions：build 成功後自動部署
4. 開啟 gh-pages 網址確認是最新內容

作業

• 建立自動部署 workflow
• 使用 GITHUB_TOKEN 無需手動設定完成部署
• 體驗「推送即上線」的完整流程