Vibe Coding production stack map：從 prompt 到可回滾部署

Vibe coding 可以加速探索，但 production stack 的工作是把「看起來能跑」轉成「變更可理解、行為可驗證、資料可復原、上線可觀測」。AI 產生 code 並不改變 browser、database、network 與 credential 的基本約束；它只讓產生變更的速度更快，因此 gate 更需要自動化。 截至 2026-07-29，Vite 官方 production build 仍由 vite build 產生可部署 bundle；GitHub Actions environments 可限制 branch、approval 與 secret access；Supabase local development 則讓 schema migration 與 functions 在 local stack 測試。這三層組成前端、交付與資料平面的最低骨架。 實作步驟 第一層是 repository contract。固定 runtime/package manager 版本，提交 lockfile，維護 README 、環境變數範例、migration 規則與 AGENTS.md 。AI 開始前先讀現有 code 與 test，變更後以 git diff 檢查 scope。secret 不進 prompt、repo、screenshot 或 log。 第二層是 local feedback。前端至少跑 type-check、lint、unit/component test 與 production build；涉及 route/SEO 再跑 prerender 和 404。不要把 dev server 當 production proof，因為它的 module loading、error overlay 與環境模式不同。 { "scripts": { "check": "npm run type-check && npm run lint && npm run test:run", "build": "vite build", "verify": "npm run check && npm run build" } } 第三層是資料與 backend。所有 schema 變更使用 forward migration，先查看真實 schema，再在 local reset/up 測試。migration 必須有 constraint、RLS/grants 與 rollback/forward-fix 說明。Edge Function 使用本地 test secret；service-role 不放 client environment。 第四層是 branch 與 CI。每個工作單元有小 diff、明確 acceptance criteria 與 Conventional Commit。CI 從乾淨 checkout 安裝 locked dependencies，跑相同 verify。required check 必須對最新 commit；不要用「在我電腦成功」取代 runner 證據。 第五層是 preview。每個 PR 建隔離 URL/環境，使用測試資料與最小權限 credential。preview 不是 production DB 的自由入口。驗證首頁、深層 route、登入、mutation、錯誤狀態、responsive UI 與 accessibility。把 screenshot 當輔助，不取代互動與 response/status 驗證。 第六層是 production environment gate。只有受保護 branch 可 deploy；secret 在 approval 通過後才交給 job。build artifact 與 commit SHA 綁定，promotion 重新使用同一 artifact，不在 production 階段偷偷重建不同內容。database migration、app deploy 與 cache purge 的順序需相容舊/新版本。 第七層是 live verification。deploy success 只證明平台接受 artifact。應以 custom domain 檢查關鍵頁、API、auth、headers、404 與版本 marker，並看 error/latency。保留上一版 artifact、migration backup 與明確 rollback owner。 失敗與復原 若 AI 修改超出 scope，先停止追加 prompt，用 git diff --stat 與逐檔 diff 分離必要/非必要變更。不要 destructive reset 使用者原有工作；對自己新增的 commit/reviewable patch 做回退。 local pass、CI fail 時，比對 Node/package manager、lockfile、case-sensitive path、timezone 與環境變數。修環境差異，不在 CI 加 blanket ignore。若 test flaky，保存 trace 並改成等待可觀察狀態，不用任意 sleep。 migration fail 時停止 deploy，保存 database error 與 schema version。若 transaction 已 rollback，修 migration 重跑；若有非交易 side effect，依預先文件 forward-fix。不能刪 migration history 假裝未發生。 preview pass、custom domain stale 時，比對 deployment domain 與 custom domain 的 cache-busted response、ETag/CF-Cache-Status。只在證據指向 cache 時做最小 purge，之後重新驗證；不能看到平台 deploy green 就宣稱 live 已更新。 驗證指令 git status --short git diff --check npm ci npm run type-check npm run test:run npm run build 再以 staging/live URL 跑 route smoke 與 cache-busting request，記錄 commit SHA、artifact digest、migration version、CI run、preview URL、production response 與 rollback 指令。驗收時重新 checkout/clean install 可抓到漏交 lockfile 或 generated asset。 官方來源 Vite Building for Production GitHub Deployment environments Supabase Local Development 延伸閱讀 在 技術文章 查看 testing、Cloudflare 與 repository workflow。 從 課程總覽 建立完整 production pipeline。 需要審查現有 stack 缺口時可看 顧問服務 。