階段 4 部署與託管

作品只活在 localhost 等於不存在:前端部署工程師的招牌能力,就是把網站穩穩送上線 — 靜態託管、容器與雲端都能應對。

這一階段學什麼

• 靜態託管(Vercel/Netlify):連上 GitHub 倉庫、設定建置指令,推程式碼就自動上線,是前端最快的部署路徑。
• Docker 容器化:把應用與環境打包成映像檔,在任何主機都能一致執行,終結「我電腦可以跑」。
• CDN:靜態資源快取到離使用者最近的節點,全球存取都快;同時搞懂快取失效與版本化檔名。
• HTTPS/SSL:憑證怎麼來、為什麼瀏覽器會標「不安全」,以及自訂網域的 DNS 設定。

為什麼是現在學

前三個階段的產出到此才真正「見客」。不會部署,作品集(最終階段)就只有截圖沒有連結;而階段 5 的 CI/CD,自動化的正是你在這裡手動走過的流程 — 先手動懂原理,再自動化才踩得穩。

怎麼練(具體行動)

1. 把階段 2 的 SPA 部署上 Vercel 或 Netlify,體驗 push 即上線。
2. 註冊一個網域,設定 DNS 指向託管服務,啟用 HTTPS。
3. 替同一個專案寫 Dockerfile,在本機用容器跑起來,比較兩種部署路徑的差異。

完成標準

• 網站掛在正式網域上、瀏覽器顯示鎖頭(HTTPS),手機也連得上。
• 能畫出「使用者輸入網址到看到畫面」中間經過 DNS、CDN、託管服務的路徑。

⚠️ 常見誤區:網域買了、憑證忘了 — HTTP 裸奔的作品集,面試官第一眼就扣分。

之後不管是 AI Demo 還是 RAG 前端,要給人用,都得走一次這條上線之路。