快速摘要
Vercel 的部署體驗非常好，但「方便」不等於「安全」。這篇教你正確管理環境變數（不要暴露 API Key）、設定安全 headers、以及利用 Preview 部署做上線前檢查。
基本設定
Vercel 的部署流程：
- 在 vercel.com 登入並連接 GitHub
- 選擇要部署的 repo
- Vercel 會自動偵測框架（Next.js、React、Vue 等）
- 設定環境變數
- 點 Deploy
每次 push 到 main 分支會自動部署到生產環境，push 到其他分支會產生 Preview 部署。
環境變數安全管理
這是 Vercel 部署中最容易犯的安全錯誤：
重要：在 Next.js 中，以
NEXT_PUBLIC_ 開頭的環境變數會被打包進前端 JavaScript，任何人都能在瀏覽器中看到。API Key、資料庫密碼等敏感資訊絕對不能用這個前綴。正確做法
| 變數類型 | 前綴 | 可見範圍 | 適合存放 |
|---|---|---|---|
| 伺服器端 | 無前綴 | 僅後端 | API Key、資料庫密碼 |
| 客戶端 | NEXT_PUBLIC_ | 前端 + 後端 | 公開的設定值（例如 GA ID） |
分環境管理
Vercel 支援三種環境的環境變數：Production、Preview、Development。建議：
- Production 和 Preview 用不同的 API Key
- Development 用本地的 .env.local（不進 Git）
- 定期輪換 Production 的 Key
Preview 部署
Preview 部署是 Vercel 最強大的功能之一——每個 PR 自動產生一個獨立的 URL 供測試。但安全上要注意：
- Preview URL 預設是公開的，任何知道 URL 的人都能存取
- 如果 Preview 連接到生產資料庫，可能造成資料問題
- 建議 Preview 環境使用測試資料庫和測試 API Key
安全 Headers
在 next.config.js 或 vercel.json 中設定安全 headers：
// vercel.json
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Frame-Options", "value": "DENY" },
{ "key": "X-Content-Type-Options", "value": "nosniff" },
{ "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
]
}
]
}CI/CD 流程
建議的 CI/CD 安全流程：
- 開發者推送到 feature 分支
- Vercel 自動產生 Preview 部署
- 執行自動化測試（可透過 GitHub Actions）
- Code Review + 安全檢查
- 合併到 main → 自動部署到生產環境
- 部署後自動執行 Lighthouse 和安全掃描
費用管控
Vercel 的計費可能讓人驚訝，特別是 Serverless Functions：
- 設定 Spend Limit（消費上限）
- 監控 Function Invocations 和 Bandwidth 使用量
- 靜態網站幾乎不花錢，但 SSR 和 API Routes 會產生費用
- 考慮用 Edge Functions 取代 Serverless Functions，費用更低
常見問題
Vercel 免費方案適合正式產品嗎？
Hobby 方案（免費）適合個人專案。正式產品建議用 Pro 方案（$20/月），有更好的效能、分析和安全功能。
環境變數在 Vercel 安全嗎？
Vercel 的環境變數在伺服器端是加密儲存的。但注意：以 NEXT_PUBLIC_ 開頭的變數會暴露在前端，不要把 API Key 放在這裡。
怎麼防止 Preview 部署被外人看到？
在 Vercel 設定中可以啟用「Password Protection」或「Vercel Authentication」來限制 Preview 部署的存取。