前言

當你完成一個前端專案，下一步就是讓它上線。傳統的部署方式可能需要租用伺服器、設定環境、處理 SSL 憑證、配置 CDN…光想就累了。如果有一個平台能讓你「推送程式碼就自動部署」，而且免費方案就足夠個人使用，你會心動嗎？

這就是 Vercel 想要解決的問題。

什麼是 Vercel？

Vercel 是一個專為前端開發者設計的雲端部署平台。它的核心理念很簡單：讓部署變得像 git push 一樣簡單。

你可能聽過 Next.js 這個 React 框架，Vercel 就是 Next.js 背後的公司。這意味著 Vercel 對 Next.js 的支援是最完整的，但它同樣支援其他主流框架。

Vercel 的定位

傳統部署流程：
程式碼 → 打包 → 上傳伺服器 → 設定網域 → 配置 SSL → 設定 CDN
     ↓       ↓         ↓          ↓         ↓
   手動     手動       手動       手動       手動

Vercel 部署流程：
程式碼 → git push → 完成
            ↓
        全部自動化

為什麼選擇 Vercel？

1. 零配置部署

Vercel 會自動識別你的專案框架，並使用最佳化的建構設定。不需要寫 Dockerfile，不需要設定 CI/CD pipeline，只要連結 GitHub 儲存庫，Vercel 就會處理剩下的事。

支援自動識別的框架：
- Next.js（官方支援，最完整）
- React（Create React App）
- Vue.js / Nuxt.js
- Svelte / SvelteKit
- Angular
- Gatsby
- Astro
- 還有更多...

2. 自動化的開發流程

每當你：

• 推送到 main 分支 → 自動部署到正式環境
• 開啟 Pull Request → 自動建立預覽環境，產生獨立的預覽網址

這個「預覽部署」功能非常實用。團隊成員可以直接點開 PR 的預覽連結查看修改結果，不需要在本地 clone 下來執行。

3. 全球 CDN 加速

Vercel 使用 Edge Network，將你的網站內容快取到全球各地的節點。無論使用者在台北、東京還是紐約，都能從最近的節點取得內容，大幅降低載入時間。

使用者請求流程：

[台北使用者] → [最近的 Edge 節點] → 回傳快取內容
                    ↓
              沒有快取？
                    ↓
            [Vercel 原始伺服器] → 產生內容 → 快取 → 回傳
Code language: CSS (css)

4. 自動 HTTPS

所有部署的網站都自動啟用 HTTPS，包括：

• Vercel 提供的免費子網域（your-project.vercel.app）
• 你自己設定的自訂網域

不需要自己處理 SSL 憑證的申請和更新。

Vercel 支援的框架

Vercel 對不同框架的支援程度有所不同：

如果你使用的框架不在清單中，Vercel 也支援任何能輸出靜態檔案的專案。

方案比較

Vercel 提供三種方案，對應不同的使用場景：

Hobby 方案（免費）

適合：個人專案、學習用途、非商業用途

重要限制：

• 僅限非商業用途（個人學習、作品集等）
• 達到限制後會停止服務，無法加購額度
• 沒有團隊協作功能

Pro 方案（每人每月 $20 美元）

適合：商業專案、小型團隊、需要更高流量的應用

主要差異：

• 允許商業使用
• 超過限制後可以繼續使用（按量計費）
• 團隊協作、分支保護等進階功能
• 更完整的監控和日誌

Enterprise 方案（客製報價）

適合：大型企業、高合規要求、需要專屬支援

• 年費通常從 $20,000-25,000 美元起
• SOC 2、ISO 27001、HIPAA 合規
• SSO 單一登入
• 專屬基礎設施
• 24/7 技術支援

適用場景分析

適合使用 Vercel 的情況

1. 個人作品集或部落格
   • 免費方案足夠使用
   • 快速部署，專注於內容
2. 前端專案的 MVP 測試
   • 快速上線驗證想法
   • 不需要投入基礎設施成本
3. 使用 Next.js 的專案
   • 官方支援，功能最完整
   • SSR、ISR 等進階功能開箱即用
4. 需要預覽部署的團隊協作
   • 每個 PR 自動產生預覽環境
   • 方便設計師、PM 直接查看修改

可能需要考慮其他方案的情況

1. 後端為主的應用
   • Vercel 專注於前端，後端功能有限
   • 複雜的後端邏輯建議使用專門的雲端服務
2. 對成本敏感的高流量網站
   • 流量超過免費額度後，費用可能累積較快
   • 可以評估 Cloudflare Pages、Netlify 等替代方案
3. 需要完整後端環境的應用
   • 資料庫、檔案儲存、背景任務等
   • 可能需要搭配 AWS、GCP 等完整雲端平台

Vercel 與傳統部署的比較

小結

Vercel 透過「零配置」和「自動化」的設計理念，大幅降低了前端部署的門檻。對於 Vibe Coder 來說，它讓你能夠專注在產品開發上，而不是花時間處理基礎設施。

重點回顧：

• Vercel 是專為前端設計的部署平台，由 Next.js 團隊打造
• 零配置部署：自動識別框架、自動建構、自動部署
• 開發者友善：預覽部署、自動 HTTPS、全球 CDN
• 免費方案適合個人非商業專案，Pro 方案適合商業使用
• 特別適合 Next.js 專案，但也支援主流前端框架

下一篇文章，我們會實際操作，從註冊帳號到部署第一個專案。

延伸閱讀

• Vercel 官方網站
• Vercel 定價方案
• Vercel 支援的框架列表
• Next.js 官方網站