Git 工作流與部署自動化：feature -> dev -> main 三層架構的實踐

在軟體開發中，除了寫好代碼，如何「管理」代碼的演進同樣重要。DueWise 作為一個每天都在更新 PWA 應用程式，我們需要一套既能保證生產環境穩定，又能讓開發者快速試錯的工作流。

這篇文章將揭開 DueWise 團隊內部的 Git 三層分支架構 以及自動化部署的秘密。

1. 分支策略：三層防護網

為了避免「直接在線上修 Bug」的悲劇發生，我們嚴格劃分了三個層級：

Feature 分支 (功能研發)

每當我們要增加一個新功能（例如「日文翻譯」或「深色模式」），開發者都會從 dev 分支拉出一個 feature/[name] 分支。

目的: 隔離實驗性代碼。
認證: 在此分支可以使用開發用的 GITHUB_CLIENT_ID。

Dev 分支 (開發預覽)

這是所有功能的「集散地」。當開發者完成 Feature 後，會提交 PR (Pull Request) 到 dev。

目的: 進行整合測試。
部署: 每當 dev 分支有變動，GitHub Actions 會自動將其部署至 Cloudflare Pages 的 Preview 環境 (例如 dev.duewise.pages.dev)。

Main 分支 (生產環境)

這代表目前線上正在給用戶使用的最穩定版本。只有在 dev 經過充分測試、確認沒有重大 Regression 後，才會發起 PR 合併至 main。

目的: 絕對的穩定。
部署: 對應到生產網域 https://duewise.cc/。

2. GitHub Actions：讓機器人替你幹活

手動部署不僅慢，而且容易忘記步驟（例如忘記跑 npm build）。在 DueWise 專案中，我們高度依賴 GitHub Actions。

部署腳本範例：

我們的 .github/workflows/deploy.yml 邏輯如下：

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: npm install
      - name: Test & Build
        run: npm run build
      - name: Deploy to Cloudflare
        uses: cloudflare/pages-action@v1
        with:
          branch: ${{ github.head_ref || github.ref_name }}
          # 根據分支自動選擇環境

這種配置讓我們實現了 「Commit 即部署」。開發者只需要專注於 Git Push，剩下的事情（依賴安裝、編譯、SEO 打包、推送到全球節點）全部自動化完成。

3. 環境變數的隔離 (Environment Secrets)

這是安全性的關鍵。我們在 GitHub 倉庫中設定了多個「環境 (Environments)」：

Development 環境: 放置測試資料庫金鑰。
Production 環境: 放置正式的 VAPID_PRIVATE_KEY 與生產資料庫憑證。

透過 YAML 的 environment 參數，我們可以精準控制不同分支獲取的金鑰。即使有人不小心流出了開發環境的 Log，生產環境的機密依然安全無虞。

4. 自動化版本號注入：Service Worker 更新的核心

在 DueWise 的工作流中，有一個特別的步驟：node scripts/inject-sw-version.mjs。

這是一個自研的小工具，它會在 build 結束後掃描產生出的 dist 目錄，計算文件 Hash，並將版本號寫入 sw.js。這確保了每次代碼更新後，用戶的 PWA 都能準確過時並觸發背景更新，不需要人工介入。

5. 個人見解：紀律帶來的自由

很多人覺得一開始設定這麼多規矩（PR、Review、CI/CD）很麻煩，特別是專案還小時。

但在 DueWise 的規模擴大後，我深刻體會到：這些「紀律」其實給了開發者巨大的自由。我可以放心地去重構核心組件，因為我知道：

CI 的 TypeScript 檢查會幫我找出所有被破壞的類別。
Dev 環境可以讓我隨時找朋友來幫我手機實測。
Main 環境永遠處於受保護狀態。

結論

一套好的工作流，能讓團隊的開發效率呈現指數級增長。透過 Git 的科學化管理與 GitHub Actions 的無縫串接，DueWise 建立了一套堅不可摧的產品發布工業鏈。

下一篇文章，我們將探討效能的終極指標：「Web 效能調優與 Core Web Vitals：LCP, FID 與內容加載優化的具體作法」。