Vercel - 1. 主要特色

Vercel [ˈvɜr.səl]

Vercel 是一個 雲端平台（Cloud Platform），底層由 分散在全球的伺服器與 CDN 節點組成。

專門用來 部署前端網站和全端應用程式，特別是與 JavaScript/TypeScript、生態系統框架（如 Next.js、React、Vue、Svelte）搭配得很好。簡單說，它讓你可以把本地開發的專案快速上線，而且大部分流程是自動化的。

🚀 Vercel 主要特色：

1️⃣ 靜態與動態部署

• 靜態網站（HTML、CSS、JS）：Vercel 會自動生成並托管。
• Serverless Function（無伺服器函數）：可以處理後端 API、表單提交等，不需要自己架伺服器。
• SSG / SSR 支援：
• • SSG（Static Site Generation）：像 Next.js 的 getStaticProps，在 build 時生成靜態頁面。
  • SSR（Server Side Rendering）：像 Next.js 的 getServerSideProps，每次請求時動態渲染頁面。

2️⃣ 與 Git 整合

• 可以連接 GitHub、GitLab、Bitbucket。
• Push 代碼後，Vercel 自動 build 和 部署。
• 每次 PR（Pull Request）都有 預覽 URL，方便團隊檢查。

3️⃣ CDN 與效能

• 所有網站會被自動 分發到全球 CDN。
• 訪問者會從最近的節點拿到內容，加快載入速度。

4️⃣ 免費與付費方案

• 免費版：
  適合個人專案或小型專案。
  有 Serverless function 限制、專案數限制。
• 付費版：
  提供更多 併發、頻寬、Team 功能。
  更好的監控與自訂域名設定。

5️⃣ 適合使用場景

• 個人作品集、部落格。
• 前端專案部署（React、Next.js、Astro…）。
• 小型 API 或後端服務（使用 Serverless Function）。
• 靜態網站生成（SSG）專案。

⚙️ Vercel 架構：

1️⃣ 代碼來源

• 你的專案放在 GitHub / GitLab / Bitbucket。
• Vercel 會連接你的倉庫。

2️⃣ Build 流程

1. 你 push 代碼到 Git。
2. Vercel 自動檢測框架（Next.js、React、Vue…）。
3. 進行 Build：

• • 靜態頁面 → SSG（Static Site Generation）
  • 動態頁面 → SSR（Server Side Rendering）或 Serverless Function

4. Build 完成後生成 部署檔案。

3️⃣ 部署

• 靜態內容（HTML / CSS / JS）會被放到 CDN。
• 動態功能（API / SSR）會包成 Serverless Functions。
• 每次部署會產生一個 唯一的 URL（Preview 或 Production）。

4️⃣ 全球分發

• CDN 自動將靜態檔案分發到 全球節點。
• 訪問者會從最近的節點拿到內容 → 網站載入更快。

5️⃣ 運作特性

• 自動化：Push 代碼即部署，無需手動上傳。
• Serverless：API 與後端功能自動運行，不需自己架伺服器。
• 多環境：Preview URL（PR 測試）、Production URL（正式上線）。
• 擴展性：可接自訂域名、SSL、環境變數等。

📌 簡單理解：

Git (代碼) → Vercel Build → 生成靜態頁面 + Serverless API → CDN 全球分發 → 訪問者快速存取

你本地端開發 → Git push → Vercel 雲端 build
靜態頁面 → CDN 全球分發
動態功能 → Serverless 在雲端運行
使用者 → 從最近節點快速存取