Vercel 完全指南

#建構部署 #Vercel #部署 #Serverless #免費架站

前端框架原生支援的部署平台，Git 推送即自動部署、免費方案即可架站。

💡 免費起步：Vercel 的 Hobby 方案免費、免信用卡即可部署，Git 推送就自動上線。但 Hobby 僅限個人/非商業用途，營收網站需升級 Pro。實際操作見 快速開始。

目錄

• 什麼是 Vercel？
• 核心特性
• 快速開始（免費）
• 部署模型與運作
• 周邊產品
• 免費方案（Hobby）額度與限制
• 計費模型
• 什麼情境適合用 Vercel？
• Vercel vs Cloudflare Pages
• 實戰範例
• 最佳實踐
• 常見問題
• 總結

什麼是 Vercel？

一句話理解：Vercel 是一個以 Git 為核心、針對前端框架最佳化的部署平台，把「程式碼推上去」到「網站全球上線」之間的工作幾乎全自動化。

核心定位：Vercel 是專為前端開發者打造的部署平台，由 Next.js 的母公司（Vercel Inc.）開發。它對 Next.js 提供一等公民（first-class）支援——Next.js 的許多功能（如 ISR、Image Optimization、Edge Middleware）在 Vercel 上可零設定運作。除了 Next.js，Vercel 也支援多數主流前端框架，例如 Vite、Astro、SvelteKit，以及純靜態站。

主要特徵：

• Git 驅動：連結 GitHub / GitLab / Bitbucket，push 即觸發部署。
• 邊緣網路：靜態資產透過全球 CDN 分發，縮短到使用者的延遲。
• 預覽部署：每個分支、每個 Pull Request 都會得到獨立的預覽網址，方便在合併前檢視實際效果。

Vercel 的取捨在於：開發體驗（DX）與框架整合度高，但平台本身較封閉，部分進階能力與額度綁定付費方案，且免費方案有非商業用途限制（詳見後文）。

核心特性

• Git 驅動部署：將 Git 倉庫連結到 Vercel 後，每次 push 自動觸發建置與部署，不需手動操作 CI。
• 自動 Preview Deployment：每次 push（尤其是非 production 分支與 PR）都會產生一個獨立、可分享的預覽網址，對應該次 commit 的完整建置結果。
• 不可變與原子部署：每個部署都是不可變（immutable）的快照，擁有自己的固定 URL；切換上線版本是原子操作，因此可即時 rollback 回任一歷史部署。
• 自動 HTTPS：自訂網域與預設網域都會自動配置 TLS 憑證，不需手動申請或續期。
• 全球邊緣網路 CDN：靜態內容自動快取並從靠近使用者的節點供應。
• 內建 CI/CD：建置與部署流程內建於平台，不需另外架設流水線。
• Serverless Functions：以函數形式部署後端邏輯，按需執行、自動擴縮。
• Edge Functions / Middleware：在邊緣節點執行輕量邏輯（如重寫、導向、A/B 測試、驗證），更靠近使用者。
• ISR（Incremental Static Regeneration，增量靜態再生）：靜態頁面可在背景按設定週期或觸發條件重新產生，兼顧靜態效能與內容更新。
• Image Optimization：依裝置與格式自動優化圖片輸出。

快速開始（免費）

透過 Web 介面是最快的方式：

1. 用 GitHub 登入註冊：前往 vercel.com，以 GitHub（或 GitLab / Bitbucket）帳號登入，免信用卡即可建立 Hobby 帳號。

2. Import Git Repository：在 Dashboard 點擊新增專案，選擇要部署的 Git 倉庫並授權存取。

3. 選框架 preset：Vercel 通常會自動偵測框架（如 Next.js、Vite、Astro）並帶入對應的建置指令與輸出目錄；必要時可手動調整。

4. Deploy 自動建置上線：按下 Deploy，平台會執行建置並把結果部署到全球邊緣網路，完成後給出一個可存取的網址。

5. 後續自動化：之後每次 push 到 production 分支會自動更新正式站；其他分支與每個 Pull Request 則自動產生獨立的預覽網址。

也可以改用 Vercel CLI：

# 安裝 CLI
npm i -g vercel

# 在專案目錄中執行，依互動提示連結/建立專案並部署到預覽環境
vercel

# 部署到正式環境（production）
vercel --prod

部署模型與運作

整體流程從 Git push 到全球上線可表示為：

   git push
      │
      ▼
┌─────────────┐     ┌─────────────┐     ┌──────────────────┐
│  Git Repo   │ ──▶ │   Build     │ ──▶ │   Deploy（不可變） │
│ (push/PR)   │     │ (CI/CD)     │     │  獨立 URL + CDN   │
└─────────────┘     └─────────────┘     └──────────────────┘
                                                 │
                          ┌──────────────────────┴───────────────┐
                          ▼                                       ▼
                  Preview Deployment                     Production Deployment
                  （分支 / PR 預覽）                       （正式網域對外服務）

Preview vs Production：

• Preview Deployment：由非正式分支或 PR 觸發，產生獨立預覽網址，用於合併前檢視與審查。
• Production Deployment：通常由 production 分支（如 main）觸發，對應對外的正式網域。

不可變部署與 rollback：每個部署都是不可變快照並擁有固定 URL。「上線」本質上是把正式網域指向某個部署，因此回滾只是把指標切回先前的部署，可即時完成，不需重新建置。

周邊產品

Vercel 在部署之外提供一系列託管服務，可與專案整合。下表僅描述功能定位，精確額度以官方文件為準。

Vercel KV 屬於 serverless Redis；若需要可攜、不綁定單一部署平台的同類服務，可參考 Upstash。

免費方案（Hobby）額度與限制

Hobby 是 Vercel 的免費方案，免信用卡即可使用，適合學習、個人作品與實驗。重點額度與限制：

• 頻寬：100 GB / 月。超過後新部署會被暫停，但已快取的內容仍會繼續服務；多數情況下需等待 30 天的計費週期重置。
• 內建能力：包含 CI/CD、自動 HTTPS/SSL、每次 Git push 自動 Preview 部署、Git 整合與 CLI。
• Serverless Function 逾時：預設 10 秒。
• 並行建置：免費方案僅 1 個並行建置（concurrent build），多次推送會排隊。
• 函數呼叫 / 邊緣請求：有每月呼叫上限，實際數字以官方文件為準。
• 【重要】用途限制：Hobby 僅限個人/非商業用途。一旦網站產生直接或間接營收、服務付費客戶，或屬於客戶委託案，依條款需改用 Pro。

這項非商業限制是 Hobby 與許多其他免費平台最關鍵的差異，務必在專案初期就評估清楚，避免上線後才發現需要升級。

計費模型

計費維度通常依使用量分項計算，主要包含：

• 頻寬：對外傳輸的資料量。
• 函數執行：Serverless / Edge Functions 的呼叫次數與執行時間。
• 建置時間：CI/CD 建置所消耗的運算。

不同維度的精確計價與超量規則以官方定價頁為準。Pro 方案除了解除 Hobby 的商業限制，也提升各項額度（如更高的並行建置數）。

什麼情境適合用 Vercel？

✅ 適合

❌ 不適合 / 需留意

Vercel vs Cloudflare Pages

兩者都能部署前端與靜態站並提供免費起步，但取捨不同。

定性結論：若以 Next.js 為主、重視開箱即用的整合與預覽流程，Vercel 的開發體驗較佳；若重視免費商用、不限頻寬與靜態請求，Cloudflare Pages 在成本面更有優勢。

延伸閱讀：Cloudflare 系列總覽。

實戰範例

vercel.json 範例（設定建置與標頭等行為）：

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" }
      ]
    }
  ]
}

環境變數設定：可在 Dashboard 的 Project Settings → Environment Variables 中，依 Production / Preview / Development 環境分別設定。本機開發可用 .env.local（勿提交至 Git），或透過 CLI 拉取：

vercel env pull .env.local

Serverless Function 範例（api/hello.ts）：

import type { VercelRequest, VercelResponse } from '@vercel/node';

export default function handler(req: VercelRequest, res: VercelResponse) {
  const name = (req.query.name as string) ?? 'world';
  res.status(200).json({ message: `Hello, ${name}!` });
}

部署後可透過 /api/hello?name=vercel 存取。

CLI 部署：

vercel          # 部署到 Preview 環境
vercel --prod   # 部署到 Production 環境

最佳實踐

• 以環境變數管理密鑰：API 金鑰、資料庫連線字串等放在環境變數，不要寫死在程式碼或提交到 Git。
• 善用 Preview 部署做 review：在合併 PR 前，用自動產生的預覽網址檢視實際效果，降低正式站出錯機率。
• 及早評估商業限制：Hobby 僅限非商業用途，若專案可能產生營收或服務客戶，應在初期就規劃升級 Pro 的時程與成本。
• 注意函數 10 秒逾時：Serverless Function 預設逾時 10 秒，設計時避免在單次請求中執行過長的工作。
• 拆解長任務或改用 Cron：將長時間作業拆成多個短任務、改為非同步處理，或以 Cron Jobs 排程執行，避免觸發逾時。

常見問題

Q：Vercel 免費方案可以拿來做商業網站嗎？ A：不行。Hobby 方案僅限個人/非商業用途。一旦網站產生直接或間接營收、服務付費客戶或屬於委託案，依條款需升級到 Pro。

Q：為什麼 Vercel 特別適合 Next.js？ A：Vercel 是 Next.js 的開發公司，對 Next.js 提供一等公民支援。ISR、Image Optimization、Edge Middleware 等功能可在 Vercel 上零設定運作，整合度高於其他平台。

Q：Hobby 超過額度會怎樣？ A：以頻寬為例，超過 100 GB/月後新部署會被暫停，但已快取內容仍會繼續服務；多數情況需等待 30 天計費週期重置。其他維度的超量行為以官方文件為準。

Q：Preview 部署是什麼？ A：每次 push（尤其是非 production 分支與 PR）會產生一個獨立、可分享的預覽網址，對應該次 commit 的完整建置結果，方便在合併前檢視。

Q：函數逾時 10 秒怎麼辦？ A：Serverless Function 預設逾時 10 秒。可將長任務拆成多個短任務、改為非同步流程，或以 Cron Jobs 排程處理；必要時評估升級方案以取得更高限制。

總結

核心要點：

Vercel = Git 驅動的前端部署平台（Next.js 母公司打造）
  ├─ push → build → 不可變部署 → 全球 CDN
  ├─ 每個 PR 自動 Preview，可即時 rollback
  ├─ 自動 HTTPS、內建 CI/CD、Serverless / Edge Functions
  └─ Hobby 免費但僅限非商業，頻寬 100GB/月、函數逾時 10 秒

選用決策樹：

要部署前端 / 靜態站？
├─ 主力是 Next.js 且重視整合與 DX？ ── 是 ──▶ Vercel
├─ 個人 / 學習 / 非商業？ ────────── 是 ──▶ Vercel Hobby（免費）
├─ 商業網站但能接受付費？ ────────── 是 ──▶ Vercel Pro
└─ 重視免費商用 / 不限頻寬？ ─────── 是 ──▶ 考慮 Cloudflare Pages

快速參考表：

記憶口訣：「推就部署、PR 給預覽、Hobby 非商用、函數十秒限」。

建立日期：2026-06-08 最後更新：2026-06-08