今天是鐵人賽 Day28，目標是將前端網站部署到 Vercel，讓商品詳細頁與購物車功能可以線上使用。

1️⃣ 前端建置 (Build)
今天確認 package.json 中有 "build": "vite build" 指令，並使用 Vite 打包前端專案：
npm run build
生成的靜態檔案會放在 dist/ 資料夾中，準備部署到 Vercel。

2️⃣ Vercel 部署流程
今天將前端專案部署到 Vercel，步驟如下：
登入 Vercel 帳號（或使用 GitHub 帳號連結）
在 Vercel 建立新專案，選擇「Import Git Repository」
連結 GitHub 專案，選擇 frontend 分支
設定建置與輸出目錄：
Build Command：npm run build
Output Directory：dist
點擊 Deploy，等待部署完成

3️⃣ 常見問題與解決
問題 原因 解決方式
部署後圖片 404 前端使用 BASE_URL 或 API_URL 指向 Render，跨域或路徑錯誤 確認圖片路徑使用完整 URL (BASE_URL/uploads/...) 或改用 Vercel Proxy
Build 成功但頁面空白 React Router 與 Vite 路由組態問題 在 vite.config.js 加入 base: '/'，確保路由正確
500 / 503 錯誤 API 服務未啟動或 Render 免費方案冷啟動慢 確認後端服務運行，必要時延遲前端呼叫或升級 Render

4️⃣ 測試流程
部署完成後打開 Vercel 提供的網址
瀏覽首頁與商品列表頁，確認資料載入正常
點擊商品詳細頁，確認圖片、名稱、價格與庫存顯示正確
登入會員後點「加入購物車」，確認功能正常

🐛 遇到的問題與解決
問題：部署後圖片路徑或 API 呼叫 404 / CORS
解決：確認 BASE_URL 或 API_URL 設定正確，使用完整 URL 並加上 /uploads/ 路徑

💡 Day28 收穫

• 完成前端網站部署到 Vercel
• 確認商品詳細頁、圖片輪播、購物車功能在線上可用
• 熟悉 Vercel 與 GitHub 整合流程，了解常見跨域與路徑問題解決方式