{"repo": "acejou27/auto-pilot-seo", "files": {"docs/deployment/VERCEL_DEPLOYMENT.md": {"ca860d3438083f4ede5b7d7d90956449e1b66b08": {"t": 1785747231.8565488, "n": 3838, "h": "2acf4cb9af37510c", "c": "# Vercel 部署指南\n\n## 為什麼選擇 Vercel?\n\n✅ **無 bundle 大小限制**(Cloudflare Workers 限制 3MB/10MB)\n✅ **原生支援 Next.js**(零配置)\n✅ **支援外部 webhook**(NewebPay 付款回調)\n✅ **可綁定自訂網域** seo.zhenhe-dm.com\n✅ **免費方案足夠使用**\n✅ **全球 Edge Network**(效能優異)\n\n---\n\n## 部署步驟\n\n### 步驟 1:登入 Vercel\n\n```bash\nvercel login\n```\n\n這會開啟瀏覽器,請使用 GitHub/GitLab/Bitbucket 帳號登入。\n\n---\n\n### 步驟 2:部署到生產環境\n\n```bash\nvercel --prod --yes\n```\n\n部署過程會:\n1. 自動偵測 Next.js 專案\n2. 建置應用程式(約 2-5 分鐘)\n3. 部署到 Vercel Edge Network\n4. 提供部署 URL(例如:`https://auto-pilot-seo.vercel.app`)\n\n---\n\n### 步驟 3:設定環境變數\n\n#### 方法 A:透過 Vercel Dashboard(推薦)\n\n1. 前往 https://vercel.com/dashboard\n2. 選擇 `auto-pilot-seo` 專案\n3. 進入 **Settings** → **Environment Variables**\n4. 新增以下環境變數:\n\n**必要變數(Production)**:\n```\nNEXT_PUBLIC_SUPABASE_URL=<你的 Supabase URL>\nNEXT_PUBLIC_SUPABASE_ANON_KEY=<你的 Anon Key>\nSUPABASE_SERVICE_ROLE_KEY=<你的 Service Role Key>\nSUPABASE_DB_URL=<你的資料庫 URL>\nNEWEBPAY_MERCHANT_ID=<藍新商店代號>\nNEWEBPAY_HASH_KEY=<藍新 Hash Key>\nNEWEBPAY_HASH_IV=<藍新 Hash IV>\nNEWEBPAY_API_URL=https://ccore.newebpay.com\nGMAIL_USER=\nGMAIL_APP_PASSWORD=\nNEXT_PUBLIC_APP_URL=https://seo.zhenhe-dm.com\nCOMPANY_NAME=<公司名稱>\nDEEPSEEK_API_KEY=\nOPENROUTER_API_KEY=\nPERPLEXITY_API_KEY=\n```\n\n5. 儲存後,執行 **Redeploy** 重新部署\n\n#### 方法 B:透過 CLI\n\n```bash\n# 從 .env.local 讀取並設定\nvercel env pull\nvercel env add NEXT_PUBLIC_SUPABASE_URL production\nvercel env add SUPABASE_SERVICE_ROLE_KEY production\n# ... 逐一新增其他變數\n```\n\n---\n\n### 步驟 4:綁定自訂網域\n\n1. 前往 Vercel Dashboard → **Settings** → **Domains**\n2. 新增網域:`seo.zhenhe-dm.com`\n3. Vercel 會提供 DNS 設定指引:\n\n**A Record 設定**:\n```\nType: A\nName: seo\nValue: 76.76.21.21\n```\n\n**CNAME Record 設定**(替代方案):\n```\nType: CNAME\nName: seo\nValue: cname.vercel-dns.com\n```\n\n4. 前往你的 DNS 服務商(Cloudflare)更新 DNS 記錄\n5. 等待 DNS 傳播(通常 5-30 分鐘)\n6. Vercel 會自動配置 SSL 憑證\n\n---\n\n### 步驟 5:驗證部署\n\n#### 測試基本功能\n```bash\n# 檢查首頁\ncurl -I https://auto-pilot-seo.vercel.app\n\n# 測試 API\ncurl https://auto-pilot-seo.vercel.app/api/ai-models\n```\n\n#### 測試付款回調 API\n```bash\n# 確認 webhook endpoint 可訪問\ncurl -I https://seo.zhenhe-dm.com/api/payment/recurring/callback\n```\n\n應返回 `200 OK` 或 `405 Method Not Allowed`(表示端點存在但不接受 GET)\n\n---\n\n## NewebPay 設定更新\n\n部署完成後,更新 NewebPay 設定:\n\n1. 登入 NewebPay 後台\n2. 前往 **商店設定** → **Webhook 設定**\n3. 更新回調 URL 為:\n ```\n https://seo.zhenhe-dm.com/api/payment/recurring/callback\n https://seo.zhenhe-dm.com/api/payment/recurring/notify\n ```\n\n---\n\n## 自動部署(CI/CD)\n\n### GitHub 整合\n\nVercel 會自動與 GitHub repository 整合:\n\n- **Main 分支**:自動部署到生產環境\n- **其他分支**:自動建立預覽環境\n\n### 本地更新流程\n\n```bash\n# 1. 修改代碼\ngit add .\ngit commit -m \"更新: 功能描述\"\ngit push\n\n# 2. Vercel 自動部署(無需手動操作)\n```\n\n---\n\n## 監控與日誌\n\n### 查看部署日誌\n1. Vercel Dashboard → **Deployments**\n2. 選擇特定部署查看建置日誌\n\n### 查看應用程式日誌\n1. Vercel Dashboard → **Logs**\n2. 即時查看應用程式執行日誌\n\n### 效能監控\n1. Vercel Dashboard → **Analytics**\n2. 查看頁面載入時間、訪問量等指標\n\n---\n\n## 疑難排解\n\n### 建置失敗\n```bash\n# 本地測試建置\npnpm run build\n\n# 檢查 TypeScript 錯誤\npnpm run type-check\n\n# 檢查 ESLint 錯誤\npnpm run lint\n```\n\n### 環境變數未生效\n1. 確認環境變數已在 Vercel Dashboard 設定\n2. 執行 **Redeploy** 重新部署\n3. 檢查變數名稱是否正確(區分大小寫)\n\n### 付款回調失敗\n1. 檢查 `NEWEBPAY_HASH_KEY` 和 `NEWEBPAY_HASH_IV` 是否正確\n2. 檢查 NewebPay 設定的回調 URL 是否正確\n3. 查看 Vercel Logs 中的錯誤訊息\n\n---\n\n## 成本估算\n\n### Vercel 免費方案限制\n- ✅ 100 GB 頻寬/月\n- ✅ 無限部署\n- ✅ 自動 SSL\n- ✅ 全球 CDN\n- ✅ 預覽環境\n\n**預估**:你的專案完全在免費方案範圍內。\n\n---\n\n## 比較:Vercel vs Cloudflare\n\n| 項目 | Vercel | Cloudflare Workers |\n|------|--------|-------------------|\n| Bundle 大小限制 | 無 | 3MB (免費) / 10MB (付費) |\n| Next.js 支援 | 原生 | 透過 OpenNext |\n| 配置複雜度 | 零配置 | 需要 wrangler.jsonc |\n| 環境變數設定 | Dashboard | wrangler secret |\n| 冷啟動時間 | ~100ms | ~30ms |\n| 全球節點 | ✅ | ✅ |\n| 免費方案 | 完整功能 | 有限制 |\n| **本專案適用性** | ✅ 完美 | ❌ Bundle 過大 |\n\n---\n\n## 下一步\n\n1. 執行 `vercel login` 登入\n2. 執行 `vercel --prod --yes` 部署\n3. 在 Vercel Dashboard 設定環境變數\n4. 綁定 seo.zhenhe-dm.com\n5. 更新 NewebPay webhook URL\n6. 使用 Chrome DevTools 測試前端功能\n7. 測試付款流程\n"}, "e2a18c0f67eafcfe3cbb30cbf3ceb1074cd0299b": {"t": 1785771561.598904, "n": 3838, "h": "2acf4cb9af37510c", "c": "# Vercel 部署指南\n\n## 為什麼選擇 Vercel?\n\n✅ **無 bundle 大小限制**(Cloudflare Workers 限制 3MB/10MB)\n✅ **原生支援 Next.js**(零配置)\n✅ **支援外部 webhook**(NewebPay 付款回調)\n✅ **可綁定自訂網域** seo.zhenhe-dm.com\n✅ **免費方案足夠使用**\n✅ **全球 Edge Network**(效能優異)\n\n---\n\n## 部署步驟\n\n### 步驟 1:登入 Vercel\n\n```bash\nvercel login\n```\n\n這會開啟瀏覽器,請使用 GitHub/GitLab/Bitbucket 帳號登入。\n\n---\n\n### 步驟 2:部署到生產環境\n\n```bash\nvercel --prod --yes\n```\n\n部署過程會:\n1. 自動偵測 Next.js 專案\n2. 建置應用程式(約 2-5 分鐘)\n3. 部署到 Vercel Edge Network\n4. 提供部署 URL(例如:`https://auto-pilot-seo.vercel.app`)\n\n---\n\n### 步驟 3:設定環境變數\n\n#### 方法 A:透過 Vercel Dashboard(推薦)\n\n1. 前往 https://vercel.com/dashboard\n2. 選擇 `auto-pilot-seo` 專案\n3. 進入 **Settings** → **Environment Variables**\n4. 新增以下環境變數:\n\n**必要變數(Production)**:\n```\nNEXT_PUBLIC_SUPABASE_URL=<你的 Supabase URL>\nNEXT_PUBLIC_SUPABASE_ANON_KEY=<你的 Anon Key>\nSUPABASE_SERVICE_ROLE_KEY=<你的 Service Role Key>\nSUPABASE_DB_URL=<你的資料庫 URL>\nNEWEBPAY_MERCHANT_ID=<藍新商店代號>\nNEWEBPAY_HASH_KEY=<藍新 Hash Key>\nNEWEBPAY_HASH_IV=<藍新 Hash IV>\nNEWEBPAY_API_URL=https://ccore.newebpay.com\nGMAIL_USER=\nGMAIL_APP_PASSWORD=\nNEXT_PUBLIC_APP_URL=https://seo.zhenhe-dm.com\nCOMPANY_NAME=<公司名稱>\nDEEPSEEK_API_KEY=\nOPENROUTER_API_KEY=\nPERPLEXITY_API_KEY=\n```\n\n5. 儲存後,執行 **Redeploy** 重新部署\n\n#### 方法 B:透過 CLI\n\n```bash\n# 從 .env.local 讀取並設定\nvercel env pull\nvercel env add NEXT_PUBLIC_SUPABASE_URL production\nvercel env add SUPABASE_SERVICE_ROLE_KEY production\n# ... 逐一新增其他變數\n```\n\n---\n\n### 步驟 4:綁定自訂網域\n\n1. 前往 Vercel Dashboard → **Settings** → **Domains**\n2. 新增網域:`seo.zhenhe-dm.com`\n3. Vercel 會提供 DNS 設定指引:\n\n**A Record 設定**:\n```\nType: A\nName: seo\nValue: 76.76.21.21\n```\n\n**CNAME Record 設定**(替代方案):\n```\nType: CNAME\nName: seo\nValue: cname.vercel-dns.com\n```\n\n4. 前往你的 DNS 服務商(Cloudflare)更新 DNS 記錄\n5. 等待 DNS 傳播(通常 5-30 分鐘)\n6. Vercel 會自動配置 SSL 憑證\n\n---\n\n### 步驟 5:驗證部署\n\n#### 測試基本功能\n```bash\n# 檢查首頁\ncurl -I https://auto-pilot-seo.vercel.app\n\n# 測試 API\ncurl https://auto-pilot-seo.vercel.app/api/ai-models\n```\n\n#### 測試付款回調 API\n```bash\n# 確認 webhook endpoint 可訪問\ncurl -I https://seo.zhenhe-dm.com/api/payment/recurring/callback\n```\n\n應返回 `200 OK` 或 `405 Method Not Allowed`(表示端點存在但不接受 GET)\n\n---\n\n## NewebPay 設定更新\n\n部署完成後,更新 NewebPay 設定:\n\n1. 登入 NewebPay 後台\n2. 前往 **商店設定** → **Webhook 設定**\n3. 更新回調 URL 為:\n ```\n https://seo.zhenhe-dm.com/api/payment/recurring/callback\n https://seo.zhenhe-dm.com/api/payment/recurring/notify\n ```\n\n---\n\n## 自動部署(CI/CD)\n\n### GitHub 整合\n\nVercel 會自動與 GitHub repository 整合:\n\n- **Main 分支**:自動部署到生產環境\n- **其他分支**:自動建立預覽環境\n\n### 本地更新流程\n\n```bash\n# 1. 修改代碼\ngit add .\ngit commit -m \"更新: 功能描述\"\ngit push\n\n# 2. Vercel 自動部署(無需手動操作)\n```\n\n---\n\n## 監控與日誌\n\n### 查看部署日誌\n1. Vercel Dashboard → **Deployments**\n2. 選擇特定部署查看建置日誌\n\n### 查看應用程式日誌\n1. Vercel Dashboard → **Logs**\n2. 即時查看應用程式執行日誌\n\n### 效能監控\n1. Vercel Dashboard → **Analytics**\n2. 查看頁面載入時間、訪問量等指標\n\n---\n\n## 疑難排解\n\n### 建置失敗\n```bash\n# 本地測試建置\npnpm run build\n\n# 檢查 TypeScript 錯誤\npnpm run type-check\n\n# 檢查 ESLint 錯誤\npnpm run lint\n```\n\n### 環境變數未生效\n1. 確認環境變數已在 Vercel Dashboard 設定\n2. 執行 **Redeploy** 重新部署\n3. 檢查變數名稱是否正確(區分大小寫)\n\n### 付款回調失敗\n1. 檢查 `NEWEBPAY_HASH_KEY` 和 `NEWEBPAY_HASH_IV` 是否正確\n2. 檢查 NewebPay 設定的回調 URL 是否正確\n3. 查看 Vercel Logs 中的錯誤訊息\n\n---\n\n## 成本估算\n\n### Vercel 免費方案限制\n- ✅ 100 GB 頻寬/月\n- ✅ 無限部署\n- ✅ 自動 SSL\n- ✅ 全球 CDN\n- ✅ 預覽環境\n\n**預估**:你的專案完全在免費方案範圍內。\n\n---\n\n## 比較:Vercel vs Cloudflare\n\n| 項目 | Vercel | Cloudflare Workers |\n|------|--------|-------------------|\n| Bundle 大小限制 | 無 | 3MB (免費) / 10MB (付費) |\n| Next.js 支援 | 原生 | 透過 OpenNext |\n| 配置複雜度 | 零配置 | 需要 wrangler.jsonc |\n| 環境變數設定 | Dashboard | wrangler secret |\n| 冷啟動時間 | ~100ms | ~30ms |\n| 全球節點 | ✅ | ✅ |\n| 免費方案 | 完整功能 | 有限制 |\n| **本專案適用性** | ✅ 完美 | ❌ Bundle 過大 |\n\n---\n\n## 下一步\n\n1. 執行 `vercel login` 登入\n2. 執行 `vercel --prod --yes` 部署\n3. 在 Vercel Dashboard 設定環境變數\n4. 綁定 seo.zhenhe-dm.com\n5. 更新 NewebPay webhook URL\n6. 使用 Chrome DevTools 測試前端功能\n7. 測試付款流程\n"}}}}