jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dramaling-vocab-learning/docs/05_deployment/vercel-config.md

6.8 KiB
Raw Blame History

Vercel 部署配置指南

前置準備

1. Vercel 帳號設置

  1. 訪問 Vercel
  2. 使用 GitHub 帳號登入
  3. 授權 Vercel 訪問你的 GitHub repositories

2. 專案準備

確保專案已推送到 GitHub：

git add .
git commit -m "準備部署到 Vercel"
git push origin main

部署步驟

Step 1: 導入專案

  1. 在 Vercel Dashboard 點擊 "New Project"
  2. 選擇 GitHub repository: dramaling-vocab-learning
  3. 點擊 "Import"

Step 2: 配置專案

Framework Preset: Next.js
Root Directory: ./
Build Command: npm run build
Output Directory: .next
Install Command: npm install

Step 3: 環境變數設置

在 "Environment Variables" 區域添加：

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Gemini AI
GEMINI_API_KEY=your_gemini_api_key

# App Configuration
NEXT_PUBLIC_APP_URL=https://your-domain.vercel.app
NODE_ENV=production

Step 4: 部署設置

點擊 "Deploy" 開始首次部署

vercel.json 配置

{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "regions": ["sin1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-store, max-age=0"
        }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    }
  ],
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/api/:path*"
    }
  ],
  "functions": {
    "app/api/ai/generate-flashcard/route.ts": {
      "maxDuration": 30
    }
  }
}

域名配置

1. 添加自定義域名

  1. 在專案設置中選擇 "Domains"
  2. 輸入你的域名 (例如: dramaling.com)
  3. 選擇添加方式：
    • 使用 Vercel DNS (推薦)
    • 使用外部 DNS

2. DNS 配置

如果使用外部 DNS，添加以下記錄：

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

3. SSL 證書

Vercel 自動提供並更新 SSL 證書

性能優化配置

1. Edge Functions

// app/api/edge/route.ts
export const runtime = 'edge'
export const dynamic = 'force-dynamic'

export async function GET() {
  // Edge function 邏輯
}

2. ISR (增量靜態再生)

// app/page.tsx
export const revalidate = 3600 // 1小時重新驗證

3. 圖片優化

// next.config.mjs
module.exports = {
  images: {
    domains: ['your-supabase-url.supabase.co'],
    formats: ['image/avif', 'image/webp'],
  },
}

監控設置

1. Vercel Analytics

npm i @vercel/analytics

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

2. Speed Insights

npm i @vercel/speed-insights

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  )
}

CI/CD 配置

1. 自動部署

  • Production: main 分支自動部署
  • Preview: 所有 PR 自動生成預覽環境

2. 部署保護

# 在 Vercel Dashboard 設置
Protection Rules:
  - Deployment Protection: Enabled
  - Password Protection: Optional
  - Trusted IPs: Configure if needed

3. GitHub Actions 整合

# .github/workflows/preview.yml
name: Vercel Preview Deployment

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prod'
          vercel-org-id: ${{ secrets.ORG_ID}}
          vercel-project-id: ${{ secrets.PROJECT_ID}}

環境管理

開發環境

# .env.development
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_API_ENDPOINT=http://localhost:3000/api

預覽環境

# 在 Vercel Dashboard 設置
Environment: Preview
NEXT_PUBLIC_APP_URL=https://preview.dramaling.vercel.app

生產環境

# 在 Vercel Dashboard 設置
Environment: Production
NEXT_PUBLIC_APP_URL=https://dramaling.com

故障排除

常見問題

1. Build 失敗

# 檢查本地 build
npm run build

# 清理快取
rm -rf .next node_modules
npm install
npm run build

2. 環境變數未生效

  • 確認變數名稱以 NEXT_PUBLIC_ 開頭（前端使用）
  • 重新部署專案
  • 檢查環境變數範圍（Development/Preview/Production）

3. 函數超時

// vercel.json
{
  "functions": {
    "app/api/slow-endpoint/route.ts": {
      "maxDuration": 60
    }
  }
}

4. CORS 錯誤

// app/api/route.ts
export async function GET(request: Request) {
  return new Response('Hello', {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  })
}

效能監控

Core Web Vitals

目標值：

  • LCP (Largest Contentful Paint): < 2.5s
  • FID (First Input Delay): < 100ms
  • CLS (Cumulative Layout Shift): < 0.1

優化建議

  1. 使用 next/dynamic 進行代碼分割
  2. 優化圖片大小和格式
  3. 實施適當的快取策略
  4. 最小化 JavaScript bundle 大小

回滾策略

快速回滾

  1. 在 Vercel Dashboard 選擇 "Deployments"
  2. 找到之前的穩定版本
  3. 點擊 "..." 選單
  4. 選擇 "Promote to Production"

Git 回滾

# 回滾到特定 commit
git revert <commit-hash>
git push origin main

# 或重置到之前的 commit
git reset --hard <commit-hash>
git push origin main --force

成本優化

免費方案限制

  • 100GB 頻寬/月
  • 100 小時 Build 時間/月
  • 12 個團隊成員

優化建議

  1. 使用 ISR 減少服務器負載
  2. 實施邊緣快取
  3. 優化圖片和資源
  4. 監控函數執行時間

安全最佳實踐

  1. 環境變數加密: 所有敏感資料通過環境變數管理
  2. HTTPS 強制: 自動重定向 HTTP 到 HTTPS
  3. 安全標頭: 配置適當的安全響應標頭
  4. 訪問控制: 使用 Vercel 的訪問控制功能
  5. 日誌審計: 定期審查部署和訪問日誌