到目前為止，我們的專案已經具備了 結構化、測試、自動化、規範，幾乎是一個完整的工程環境。

但專案如果只停留在本機，還稱不上「真正上線」。

今天，我們要把專案部署到雲端平台 Vercel，並且結合 Cursor，做到 本地 → GitHub → Vercel 自動化部署。

☁️ 為什麼選 Vercel？

Vercel 是前端開發者最常用的雲端平台之一，特別適合 Next.js 和 React 專案。

它的好處：

• 零設定部署：推上 GitHub，Vercel 會自動偵測並部署。
• 支援 Preview URL：每個 PR 都能自動產生測試網址。
• 整合 GitHub Actions：搭配前面 Day 18 的 CI/CD，能形成完整流程。
• 免費方案夠用：個人與小型專案，完全能支撐。

🛠️ 前置準備

1. 確保你有一個 GitHub Repo，且專案已經 Commit 並 Push。
2. 建立 Vercel 帳號（支援 GitHub / GitLab / Bitbucket 直接登入）。
3. 在專案中確認有 Next.js / React 環境，或其他可部署的前端專案。

🚀 部署步驟

1. 連接 GitHub Repo

• 登入 Vercel
• 點選 New Project → Import Git Repository
• 選擇你的專案 Repo

2. 自動偵測框架

Vercel 會自動檢測到是 Next.js 專案，並預設：

Build Command: next build
Output Directory: .next

如果是 React (CRA) 專案：

Build Command: npm run build
Output Directory: build

👉 如果專案有特殊設定，可以修改。

3. 部署

點擊 Deploy，幾分鐘後，你就能得到一個專屬網址，例如：

https://my-app.vercel.app

🔄 與 Cursor 搭配：自動化部署提示

Cursor 可以幫忙生成部署設定，甚至 Debug Build Error。

範例 Prompt：

我的 Next.js 專案要部署到 Vercel，
幫我檢查 package.json 的 scripts 是否正確。

Cursor 會檢查是否有：

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

如果缺少，它會自動補齊。

⚙️ CI/CD + Vercel = 完整流程

承接 Day 18 的 GitHub Actions，我們可以做到：

1. GitHub Actions
   • 檢查 Lint / 測試
   • 確保程式碼品質
2. Vercel 自動部署
   • 通過測試後，自動 Deploy 到 Vercel
   • PR 會自動產生預覽網址

這樣整個流程就成了：

開發 → Git Commit → Push → 測試 → 自動部署

📌 Day 20 總結

今天，我們完成了第一個真正的「雲端部署」：

• Vercel 為前端專案提供最簡單的部署體驗
• 只要綁定 GitHub Repo，就能自動化上線
• 與 Cursor 搭配，可以快速修正 Build 問題
• 結合 CI/CD → 測試通過才上線，確保品質

現在，你的專案已經不只是本地玩具，而是一個真正能「分享給全世界」的產品 🎉