階段 5 CI/CD 與維運

手動部署十次總有一次手滑:這一階段要讓測試與部署全自動、出事能秒退回上一版 — 前端部署工程師的「部署」二字在此兌現。

這一階段學什麼

• GitHub Actions:看懂 workflow 的觸發條件、job 與 step,讓 push 或開 PR 就自動跑流程。
• 自動化部署:通過測試才放行上線,主分支永遠處於可部署狀態;每個 PR 還能有自己的預覽網址。
• 監控與日誌:接上錯誤追蹤與基本流量觀測,使用者遇到的錯誤,你要比他更早知道。
• 回滾(Rollback):版本化每次部署,新版出包一鍵退回舊版,把事故時間從小時壓到分鐘。

為什麼是現在學

階段 3 的 Lint 與測試、階段 4 的部署流程,在這裡串成一條流水線。沒有 CI/CD,每次上線都靠人肉清單;階段 6 要做的持續優化需要頻繁小改版,沒有安全網你根本不敢改。

怎麼練(具體行動)

1. 替專案寫第一條 GitHub Actions:push 就跑 Lint 與測試,亮紅燈就擋下合併。
2. 加上部署 job:測試全過才自動部署到正式站。
3. 故意推一個會壞的版本,實際演練一次回滾,記下花了幾分鐘。
4. 接一個錯誤監控服務,製造一個前端錯誤,確認告警有送到。

完成標準

• 設好 push 自動部署加測試關卡的流水線,全程不碰任何按鈕。
• 能在五分鐘內把線上版本退回上一版,並說明是依據哪些日誌做的判斷。

⚠️ 常見誤區:只自動化部署、不設測試關卡 — 那是把手動出錯升級成自動出錯。