Skip to content

建立 2026-09-15 更新 2026-09-15

Vercel

Vercel 是 Next.js 框架的原廠公司所打造的佈署平台，主打「連上 Git 就能自動上線」的體驗，對 React、Next.js、Vue、Svelte 等前端框架的支援最完整，也提供 Serverless／Edge Functions 執行輕量後端邏輯。個人專案與非商業用途可以免費使用。

核心概念

  • 框架自動偵測：把 GitHub／GitLab／Bitbucket 上的 repository 連進 Vercel 後，它會自動判斷專案使用的框架，並帶入預設的建置指令與輸出目錄，通常不需要手動設定。
  • Git 分支對應環境：main 分支自動佈署到正式環境（Production）；其他分支或每個 Pull Request 都會產生獨立的預覽網址（Preview Deployment），方便在合併前先讓團隊或客戶檢視。
  • 環境變數：在專案的 Settings → Environment Variables 設定，並可依 Production／Preview／Development 分別套用不同的值。
  • Vercel CLI：安裝 vercel 指令列工具後，也能不透過 Git、直接從本機執行 vercel 完成佈署，適合快速測試。

佈署步驟

  1. 到 vercel.com 使用 GitHub 帳號註冊並登入。
  2. 點選 Add New → Project，選擇要佈署的 GitHub repository（需先授權 Vercel 存取）。
  3. 確認 Vercel 自動偵測到的 Framework Preset、Build Command、Output Directory 是否正確；一般專案不需修改。
  4. 如果專案需要 API 金鑰等機密設定，在 Environment Variables 區塊新增。
  5. 點擊 Deploy，等待建置完成即可取得一個 *.vercel.app 網址。
  6. 之後每次 git push 到 main 分支，Vercel 會自動重新建置並更新正式環境；也可以在 Settings → Domains 綁定自己的網域。

方案與限制

Vercel 提供免費的 Hobby 方案，適合個人與非商業專案；商業用途或需要更高流量、更多協作者時，需升級付費方案。實際的頻寬、建置時數等限制請以 Vercel 官方定價頁面 為準。

官方學習資源

官方文件

Vercel Documentation 是最完整、更新最即時的參考來源，涵蓋各框架的佈署細節與進階設定。

Vercel 官方頻道教學

Vercel 官方頻道（@VercelHQ）錄製的入門工作坊，示範從零開始認識 Vercel 的基本概念、如何連接既有的 repository 並完成第一次佈署，也介紹了使用範本（Template）快速起步的方式，適合完全沒用過 Vercel 的讀者。

精選 YouTube 教學

這支社群教學實際示範把一個應用程式從 GitHub 連到 Vercel、觀察建置過程，並取得上線網址的完整流程，適合搭配官方文件做第一次實作練習。

相關資料