Vercel 部署指南：CI/CD 與環境變數安全管理

一句話說明

Vercel 的部署很簡單，但環境變數的 scope 設定、Preview 部署的存取控制和 Edge Function 的安全限制需要特別注意。

Vercel 的部署流程

Vercel 的部署流程：連結 GitHub repo → 每次 push 自動部署。main branch 部署到 production，其他 branch 產生 preview URL。整個流程不需要手動操作，但這個自動化本身帶來了安全考量。

環境變數管理

Vercel 的環境變數有三個 scope：Production、Preview、Development。理解這三個 scope 的差異是 Vercel 安全設定的關鍵。

Production

只在 production 部署時可用。適合放正式環境的 API Key、資料庫連線字串、第三方服務的正式帳號。

Preview

每個 PR 的 preview 部署都能讀取。這是最容易出問題的 scope。如果你把正式環境的資料庫連線字串設為 Preview scope，任何能 push branch 到你 repo 的人都能透過 preview 部署存取你的正式資料庫。

建議：Preview scope 只放測試環境的 API Key 和測試資料庫連線。

Development

只在 vercel dev 本機開發時可用。等同於 .env.local。

實際設定建議

DATABASE_URL
  Production: postgres://prod-db.example.com/app
  Preview:    postgres://staging-db.example.com/app
  Development: postgres://localhost:5432/app

OPENAI_API_KEY
  Production: sk-prod-...（正式帳號，有消費上限）
  Preview:    sk-test-...（測試帳號，低消費上限）
  Development: sk-dev-...（開發帳號）

注意：Next.js 中以 NEXT_PUBLIC_ 開頭的環境變數會被打包進前端 JavaScript，瀏覽器中可以看到。AI Key、資料庫連線、內部 API 路徑不要用 NEXT_PUBLIC_ 前綴。

Preview 部署安全

Preview 部署是 Vercel 最方便也最危險的功能。每個 PR 都能自動產生一個公開的 URL，任何人都能存取。

風險

未發布的功能提前曝光。競爭對手只要知道你的 Vercel 專案名稱，就可以嘗試 https://project-name-branch-name.vercel.app 看到你正在開發的功能。

Preview 存取內部 API。如果 Preview 環境連到正式或 staging 的後端，外部人員可以透過 preview URL 操作你的 API。

PR 中的惡意程式碼。如果你的 repo 接受外部 PR（開源專案），攻擊者可以在 PR 中加入讀取環境變數並傳送到外部伺服器的程式碼。

防護措施

Vercel 提供 Deployment Protection：

Settings → Deployment Protection → Preview
選擇 "Vercel Authentication" 或 "Password Protection"

開啟 Vercel Authentication 後，只有你團隊的成員才能看到 preview 部署。密碼保護適合需要讓外部人員（如客戶）preview 的情境。

對於開源專案，不要在 Preview scope 放任何敏感的環境變數。

Headers 設定

Vercel 的安全 Headers 可以在 vercel.json 或 Next.js 的 next.config.js 中設定：

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
        { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" },
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=31536000; includeSubDomains"
        }
      ]
    }
  ]
}

AI 產生的 Next.js 專案通常不會包含這些 Headers。部署前記得加上。

Edge Functions 注意事項

Vercel 的 Edge Functions 跑在邊緣節點，有幾個限制會影響 AI 應用：

執行時間限制。Hobby 方案 Edge Function 最長 30 秒。AI 推論如果需要更長時間，要用 Serverless Function（最長 60 秒 Hobby / 300 秒 Pro）或 Streaming Response。

Runtime 限制。Edge Function 用的是 Edge Runtime，不支援所有 Node.js API。例如 fs 模組不能用，部分 npm 套件不相容。

Cold Start。Serverless Function 有冷啟動延遲。如果你的 AI 應用需要載入模型，冷啟動時間可能很長。考慮用 Vercel 的 Fluid Compute 來減少冷啟動。

Streaming Response

AI 應用最常用 Streaming Response 避免超時。Next.js 的 API Route 支援 streaming：

// app/api/chat/route.js
export async function POST(req) {
  const { prompt } = await req.json();

  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': process.env.ANTHROPIC_API_KEY,
      'anthropic-version': '2023-06-01'
    },
    body: JSON.stringify({
      model: 'claude-sonnet-5',
      max_tokens: 1024,
      stream: true,
      messages: [{ role: 'user', content: prompt }]
    })
  });

  return new Response(response.body, {
    headers: { 'Content-Type': 'text/event-stream' }
  });
}

注意：這段程式碼直接把 LLM 回應轉發給前端，沒有做輸出過濾。在正式環境中，你可能需要在轉發前檢查輸出內容。

安全考量

Vercel 的 Build Log 預設對團隊成員可見。如果你的 build 過程中有 console.log 輸出了環境變數（AI 產生的 debug 程式碼常這樣做），團隊之外的人看不到，但這仍然是不好的做法。部署前清除所有 console.log 包含環境變數的語句。

Vercel 的 Function Log 可以看到 API Route 的執行日誌。如果你的 AI 應用記錄了使用者的 prompt 內容，這些日誌需要適當的存取控制。Vercel 的日誌預設保留時間有限（Hobby 1 小時，Pro 3 天），如果需要更長的日誌保留，要用外部日誌服務。

自訂域名的 SSL 憑證由 Vercel 自動管理，不需要手動設定。但如果你的域名 DNS 不是指向 Vercel，需要確認 CNAME 記錄正確設定。

知識檢測

讀完文章後，測試一下你對這個主題的理解。

常見問題