隨記

Week 12 · Day 03 — 部署到 Firebase

學習目標

  • 用 @angular/fire 部署到 Firebase Hosting
  • 了解 Firebase Hosting 特性
  • 完成部署與即時更新

重點

Firebase Hosting - Google 提供的靜態與雲端函式託管 - 支援 SPA（自動 fallback 到 index.html）、CDN、SSL - 適合 Angular 這類單頁應用

安裝與初始化 

ng add @angular/fire
- 會引導登入 Firebase、挑選專案

部署 

ng deploy

firebase.json（SPA 設定） 

{
  "hosting": {
    "public": "dist/task-manager",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{
      "source": "**",
      "destination": "/index.html"
    }]
  }
}
- rewrites：讓所有路徑都導到 index.html → SPA 路由不會 404

已部署 vs 本地 - 每次 ng deploy 會把目前 dist/ 推上去 - 更新後再 ng deploy 即上線新版

驗證 - 部署後 Firebase 會給 https://<專案>.web.app 網址 - 用 firebase hosting:channel:deploy 可先預覽（測試用 preview channel）

實作

  1. ng add @angular/fire 並登入
  2. 確認 firebase.json 有 rewrites（SPA）
  3. ng deploy 並開啟 .web.app 網址確認

作業

  • ng add @angular/fire 完成初始化
  • 設定 SPA rewrites
  • 成功 ng deploy 到 Firebase