測驗：React 前端自動部署到 Vercel
共 5 題，點選答案後會立即顯示結果
1. Vercel 的核心優勢不包含以下哪一項？
2. 當你建立一個 Pull Request 時，Vercel 會自動觸發什麼類型的部署？
3. 在 Create React App 專案中，環境變數必須以什麼開頭才能被讀取？
4. 將 GitHub Repository 連結到 Vercel 後，Push 到 main 分支會觸發什麼動作？
5. 設定自訂網域時，如果是根網域（apex domain），需要新增哪種類型的 DNS 記錄？
前言
上一篇我們學會了 GitHub Actions 的基本觀念和 CI 流程。這篇要帶你實際體驗 CD（Continuous Deployment）的威力——把 React 專案自動部署到 Vercel。
當你讀完這篇，你會發現：只要 push 程式碼到 GitHub，網站就自動上線了。這就是現代前端開發的標準流程。
Vercel 是什麼？為什麼選它？
Vercel 是一個專為前端設計的雲端部署平台。它的特色是：
零配置部署
↓
自動 HTTPS 憑證
↓
全球 CDN 加速
↓
免費額度夠用
對 React 開發者來說，Vercel 幾乎是「不需要學習就能用」的部署方案。因為 Vercel 就是 Next.js 的母公司，對 React 生態系的支援非常完整。
Vercel 的核心優勢
| 特色 | 說明 |
|---|---|
| 零配置 | 自動偵測框架，無需寫 Dockerfile |
| 自動 HTTPS | 免費 SSL 憑證，自動續約 |
| 全球 CDN | 部署到全球邊緣節點 |
| Preview 部署 | 每個 PR 自動產生預覽網址 |
| 免費額度 | 個人專案免費，足夠學習使用 |
將 GitHub Repository 連結到 Vercel
第一步：註冊並登入 Vercel
前往 vercel.com，用 GitHub 帳號登入。這樣 Vercel 就能存取你的 Repository。
第二步：Import 專案
登入後，點擊「Add New…」→「Project」：
1. 選擇要部署的 GitHub Repository
2. Vercel 自動偵測到這是 React 專案
3. 點擊「Deploy」
就這樣，三個步驟，你的網站就上線了。
第三步：確認部署結果
部署完成後，Vercel 會給你一個網址：
https://your-project-name.vercel.app
Code language: JavaScript (javascript)打開這個網址，你的 React 網站就在上面了。
自動部署機制
這是 Vercel 最強大的功能。一旦連結了 GitHub Repository，它會自動監聽你的程式碼變化：
Push to main branch
↓
觸發 Production 部署
↓
https://your-project.vercel.app 更新
建立 Pull Request
↓
觸發 Preview 部署
↓
https://your-project-abc123.vercel.app（暫時網址）
Code language: JavaScript (javascript)Production vs Preview 部署
| 類型 | 觸發條件 | 網址 | 用途 |
|---|---|---|---|
| Production | Push 到 main | 固定網址 | 正式上線 |
| Preview | 建立/更新 PR | 每次產生新網址 | 程式碼審查 |
Preview 部署特別實用。當你發 PR 請同事 Code Review 時，他不需要 pull 你的程式碼到本機執行，直接點開 Preview 網址就能看到效果。
在 PR 中查看 Preview 網址
每次你建立或更新 PR，Vercel bot 會自動留言：
## Vercel 部署
✅ Preview 部署成功
🔗 https://your-project-git-feature-branch.vercel.app
---
Built by Vercel
Code language: PHP (php)這個網址會隨著你每次 push 到該分支而自動更新。
環境變數設定
React 專案常需要設定 API 網址等環境變數。在 Vercel 上設定很簡單：
在 Vercel Dashboard 設定
Project Settings → Environment Variables
新增環境變數：
| Name | Value | Environment |
|---|---|---|
| REACT_APP_API_URL | https://api.example.com | Production |
| REACT_APP_API_URL | https://staging-api.example.com | Preview |
環境變數命名規則
React 專案（Create React App）的環境變數必須以 REACT_APP_ 開頭：
// 在程式碼中使用
const apiUrl = process.env.REACT_APP_API_URL;
Code language: JavaScript (javascript)如果你用 Vite 建立專案，則是用 VITE_ 開頭：
// Vite 專案
const apiUrl = import.meta.env.VITE_API_URL;
Code language: JavaScript (javascript)不同環境使用不同值
Vercel 允許你為三種環境設定不同的值：
Production → main 分支部署時使用
Preview → PR 預覽部署時使用
Development → 本地開發時使用（vercel dev）
這樣你可以讓 Production 連正式 API，Preview 連測試 API。
自訂 Domain 設定
預設的 .vercel.app 網址雖然能用，但正式專案通常需要自訂網域。
第一步：在 Vercel 新增 Domain
Project Settings → Domains → Add
輸入你的網域，例如 www.mysite.com。
第二步：設定 DNS 記錄
Vercel 會告訴你需要新增的 DNS 記錄：
類型: CNAME
名稱: www
值: cname.vercel-dns.com
Code language: HTTP (http)或者如果是根網域（apex domain）：
類型: A
名稱: @
值: 76.76.21.21
Code language: HTTP (http)第三步：等待 DNS 生效
DNS 設定完成後，通常幾分鐘到幾小時會生效。Vercel Dashboard 會顯示驗證狀態：
✓ Valid Configuration
✓ SSL Certificate Issued
看到這兩個打勾，你的自訂網域就設定完成了。
實作：部署 React 專案到 Vercel
現在讓我們實際操作一次完整流程。
假設你已經有一個 React 專案
專案結構可能長這樣：
my-react-app/
├── public/
├── src/
│ ├── App.js
│ └── index.js
├── package.json
└── README.md
Code language: PHP (php)確認 package.json 有 build script
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test"
}
}
Code language: JSON / JSON with Comments (json)Vercel 會自動執行 npm run build（或 yarn build），產生 build/ 資料夾後部署。
連結 Vercel 的完整步驟
1. 確保專案已推送到 GitHub
git add .
git commit -m "initial commit"
git push origin main
2. 登入 vercel.com（用 GitHub 帳號）
3. 點擊「Add New...」→「Project」
4. 選擇你的 Repository
5. 確認設定（通常不需要改）：
- Framework Preset: Create React App
- Build Command: npm run build
- Output Directory: build
6. 點擊「Deploy」
Code language: PHP (php)部署成功後
你會看到：
🎉 Congratulations!
Your project has been deployed to Vercel.
Production: https://my-react-app.vercel.app
Code language: JavaScript (javascript)從現在開始，每次 push 到 main，網站就會自動更新。
Vercel 的建置設定
雖然 Vercel 會自動偵測設定，但有時你需要手動調整：
Project Settings → General
Framework Preset: Create React App（或 Vite）
Build Command: npm run build
Output Directory: build（CRA）或 dist（Vite）
Install Command: npm install
覆寫設定：vercel.json
你也可以在專案根目錄建立 vercel.json 來自訂設定：
{
"buildCommand": "npm run build",
"outputDirectory": "build",
"framework": "create-react-app"
}
Code language: JSON / JSON with Comments (json)這個檔案會跟著程式碼一起版本控制，團隊成員就能用相同的設定。
常見問題排解
Build 失敗
查看 Vercel Dashboard 的 Deployment Logs：
常見原因：
1. 缺少相依套件 → 檢查 package.json
2. 環境變數未設定 → 到 Settings 新增
3. Node.js 版本問題 → 在 Settings 指定版本
Code language: CSS (css)環境變數沒吃到
確認幾件事：
1. 變數名稱是否正確（REACT_APP_ 或 VITE_ 開頭）
2. 是否有勾選正確的 Environment
3. 是否需要重新部署（有些變數需要 redeploy 才會生效）
自訂網域無法連線
1. 檢查 DNS 記錄是否正確
2. 等待 DNS 傳播（最多 48 小時）
3. 確認 SSL 憑證已核發
與 GitHub Actions 的關係
你可能會問：既然 Vercel 自己會自動部署，還需要 GitHub Actions 嗎？
答案是：看情況。
純前端專案 → Vercel 內建 CI/CD 就夠了
需要自訂流程 → 可以搭配 GitHub Actions
例如，你想要在部署前執行更完整的測試，可以這樣搭配：
# .github/workflows/test.yml
name: Test Before Deploy
on:
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
- run: npm ci
- run: npm test
- run: npm run lint
Code language: PHP (php)這樣 GitHub Actions 負責測試，Vercel 負責部署，各司其職。
小結
這篇你學會了：
- Vercel 的優勢：零配置、自動 HTTPS、全球 CDN
- 連結 GitHub：Import 專案，三步驟上線
- 自動部署：Push to main = Production，PR = Preview
- 環境變數：在 Dashboard 設定，支援不同環境
- 自訂網域：新增 DNS 記錄，自動 SSL
下一篇，我們會學習如何用 GitHub Actions 部署後端 API 到 Render，建立完整的前後端部署流程。
延伸閱讀
進階測驗：React 前端自動部署到 Vercel
共 5 題，包含情境題與錯誤診斷題。