預覽環境部署與保護

方法論

預覽環境部署與保護

概述

在 Cloudflare Pages 上建立「dev 分支 → 預覽環境 → 確認 → main 分支 → 正式環境」的完整部署流程，並透過 Zero Trust Access 保護預覽網址。適用於小型團隊的靜態網站或前端專案。

步驟

1. 分支設定

  • 建立 dev 分支：git checkout -b dev && git push -u origin dev
  • 在 Cloudflare Pages 設定中確認：Production 分支為 main，預覽分支包含 dev
  • 確認組建命令（npm run build）和輸出目錄（dist）

2. Node.js 版本指定

  • 在專案根目錄建立 .node-version 檔案，寫入需要的版本號（如 22）
  • 推送到所有分支，避免部署失敗

3. Zero Trust Access 設定

  • 進入 Cloudflare Zero Trust → Access 控制 → 新增 Self-hosted 應用程式
  • 設定兩筆主機名稱規則：
    • 子網域 * + 網域 codotx.pages.dev（保護子網域）
    • 子網域留空 + 網域 codotx.pages.dev（保護根網域）
  • 建立存取原則：動作 Allow，選取器 Emails，加入團隊成員信箱
  • 工作階段持續時間設為 24 小時

4. 日常開發流程

  1. 在 dev 分支開發提交
  2. git push origin dev → 自動部署到預覽環境
  3. 到預覽網址確認（用 Email OTP 驗證）
  4. 確認無誤後 merge 到 main → 自動部署到正式站

5. CLI 輔助（選配）

  • 安裝 Wrangler CLI 查看部署狀態
  • 多帳號時需指定 CLOUDFLARE_ACCOUNT_ID

適用場景

  • 小型團隊的前端/靜態網站專案
  • 需要預覽確認流程的內容網站
  • 使用 Cloudflare 生態系的專案

限制

  • Email OTP 在團隊人數多時管理成本高
  • Zero Trust 免費方案有 50 位使用者上限
  • 非 Cloudflare 使用者需用其他平台的對應功能

關聯概念

  • [[分支部署策略]]
  • [[預覽環境存取控制]]
  • [[Zero Trust Access]]
  • [[Cloudflare Pages]]
  • [[部署流程規範]]