昨天完成了 PWA 離線模式，讓日記 App 在斷網時也能照樣寫日記並自動同步。
今天要做的事比較「實務」—— 部署。
一個專案如果永遠只待在本地端，就沒有人能真正使用；把它部署上線，才算是真正能被分享與體驗。

今日目標

1. 選擇並設定部署平台
   Firebase Hosting 或 Vercel
2. 建立建置流程

• React 專案打包 (npm run build)
• 上傳 / 部署到雲端

3. 確保部署成功

• 網址能正常存取
• PWA 設定（manifest、service worker）在雲端依舊生效

4. 驗證功能
   測試日記新增、匯入／匯出、離線模式是否正常運作

Vercel 部署流程

0. 專案前置（本地）

專案根目錄需要有 package.json，並能在本地成功 build：

• Vite React：npm run build 會產出 dist/

PWA 檔案放在 public/（或 Vite 的 public 資料夾）：

• public/manifest.json
• public/sw.js（若用 Workbox/插件會自動產生，則以插件輸出為準）
• PWA 圖示（如 public/icons/*）

若你使用 Vite + vite-plugin-pwa，會自動產生 SW 與 manifest；注意最後輸出的檔案路徑與 scope。

1. 推到 GitHub

建一個 GitHub repo（或使用既有的）
本地 push 最新程式碼到 GitHub 的 main/master 分支

2. Firebase 設定（很重要）

到 Firebase Console → Authentication → 設定 → 允許的網域（Authorized domains）：

• 加入：你的專案名.vercel.app
• 未來有自訂網域，也要一併加入（例如 app.yourdomain.com）

若你有使用 Email Link 登入 / OAuth：檢查 Action URL / Redirect domain 要包含你在 Vercel 的網域。

3. Vercel 專案建立

1. 登入 [vercel.com] → New Project → Import Git Repository
2. 選擇你的 repo
3. Framework Preset 選：Vite：Vite + React
4. 設定 Build：

• Install Command：npm ci（或 npm install）
• Build Command（預設即可）：npm run build
• Output Directory：Vite → dist
  

4. 設定「環境變數」

1. 在 Vercel 專案 → Settings → Environment Variables 新增：
   Vite 專案：變數必須以 VITE_ 開頭（這是 Vite 的限制），在 Firebase Console → 專案設定 → 一般 (General) → 你的應用程式 (Web App) 裡會看到

• VITE_FIREBASE_API_KEY
• VITE_FIREBASE_AUTH_DOMAIN
• VITE_FIREBASE_PROJECT_ID
• VITE_FIREBASE_STORAGE_BUCKET
• VITE_FIREBASE_MESSAGING_SENDER_ID
• VITE_FIREBASE_APP_ID
• （如果有使用Google Analytics）VITE_FIREBASE_MEASUREMENT_ID

前端初始化要讀對對應前綴，例如 Vite 用 import.meta.env.VITE_FIREBASE_API_KEY

5. 設定 SPA 重寫 + PWA 標頭（vercel.json）

在專案根目錄新增 vercel.json（commit 到 repo），讓 前端路由在 F5 不會 404，並對 PWA 檔案加上適當標頭與快取

6. Service Worker 註冊（前端）

確保在你的入口檔（例如 main.tsx 或 index.tsx）條件式註冊 SW，避免開發環境干擾

7. Deploy！

回到 Vercel 專案頁 → Deploy
等待 Build 完成後，會產生一個 *.vercel.app 的網址，就可以打開連結驗收

今日驗收 ✅

1. 專案成功部署到雲端

• 有可分享的網址
• 首頁能正常開啟
  

2. 所有核心功能在雲端版本運作正常

• 登入、寫日記、匯出匯入
• 斷網後依然能使用，恢復後同步成功
  

3. PWA 驗證

• 能「加到桌面」並像 App 一樣啟動
• 離線開啟無誤
  

明日預告

Day 22 要來挑戰進階文字情緒分類器！
之前的情緒分析還停留在簡單 API，今天要升級成使用 HuggingFace 模型，同時支援 二類（正向／負向） 與 多類（細分不同情緒層級）
這樣一來，日記不只是打上「😊／☹️」的標籤，而是能更細緻地呈現情緒光譜，讓使用者更精準地回顧心情變化，算是真的踏入機器學習的範疇了