測驗：第一次部署就上手：從 GitHub 到上線
共 5 題，點選答案後會立即顯示結果
1. 為什麼文章推薦使用 GitHub OAuth 登入 Vercel？
2. Vercel 的「Framework Preset」功能主要做什麼？
3. 當你推送程式碼到 main 分支以外的分支時，Vercel 會怎麼處理？
4. Vercel 如何知道 GitHub 倉庫有新的 push 事件？
5. 如果部署成功但頁面顯示空白，最可能的原因是什麼？
前言
上一篇我們認識了 Vercel 是什麼，這篇要實際動手：把你的專案部署上線。整個過程大約只需要 5 分鐘，而且完成後，每次你 push 程式碼到 GitHub，Vercel 就會自動幫你更新網站。
學習目標
讀完本篇後，你將能夠：
- 註冊 Vercel 帳號並連結 GitHub
- 將現有專案部署到 Vercel
- 理解自動部署的運作機制
步驟一：註冊 Vercel 帳號
使用 GitHub 登入
Vercel 支援多種登入方式，但最推薦使用 GitHub OAuth，因為：
- 一鍵授權，不用額外記密碼
- 自動連結你的 GitHub 倉庫
- 後續匯入專案更方便
操作流程：
- 前往 vercel.com
- 點擊右上角的「Sign Up」
- 選擇「Continue with GitHub」
- 在 GitHub 授權頁面點擊「Authorize Vercel」
- 完成！你已經有 Vercel 帳號了
授權畫面會看到什麼
當你授權時，GitHub 會顯示 Vercel 要求的權限：
Vercel 想要存取：
- 讀取你的 email 地址
- 讀取你的公開倉庫
- 讀取和寫入你授權的倉庫
這些權限讓 Vercel 能夠：
- 列出你的專案供你選擇
- 監聽你的 push 事件
- 自動拉取程式碼進行部署
步驟二：匯入 GitHub 專案
進入匯入流程
登入後，你會看到 Dashboard。匯入專案有兩種入口：
- 如果是第一次使用：畫面中央會有大大的「Import Project」按鈕
- 如果已有專案：點擊右上角的「Add New…」→「Project」
選擇要部署的倉庫
點擊「Import」後，會列出你 GitHub 上的所有倉庫：
你的倉庫
├── my-portfolio [Import]
├── blog-site [Import]
├── todo-app [Import]
└── ...更多倉庫
Code language: CSS (css)找不到你要的倉庫？
如果是組織（Organization）的倉庫，可能需要額外授權：
- 點擊「Adjust GitHub App Permissions」
- 在 GitHub 設定頁面，選擇要授權的組織
- 回到 Vercel 重新整理
步驟三：設定部署選項
選好倉庫後，會進入設定頁面。這裡有三個重要欄位：
Framework Preset（框架預設）
Vercel 會自動偵測你的專案使用什麼框架：
| 偵測到的檔案 | 判定為 | 自動設定 |
|---|---|---|
next.config.js |
Next.js | 已最佳化 |
vite.config.js |
Vite | 已最佳化 |
package.json 有 react-scripts |
Create React App | 已最佳化 |
index.html（無框架） |
Other | 靜態網站 |
大多數情況下，你不需要手動選擇——Vercel 的自動偵測相當準確。
Build Command（建置指令）
這是 Vercel 在部署時執行的指令，用來編譯你的程式碼：
# 常見的 Build Command
npm run build # 大部分專案
yarn build # 使用 yarn 的專案
pnpm build # 使用 pnpm 的專案
Code language: PHP (php)什麼時候需要修改？
- 你的 build 指令不是標準的
npm run build - 需要先執行其他指令（例如
npm run generate && npm run build）
Output Directory（輸出目錄）
建置完成後，產出的靜態檔案放在哪裡：
| 框架 | 預設輸出目錄 |
|---|---|
| Next.js | .next（Vercel 自動處理） |
| Vite | dist |
| Create React App | build |
| 純 HTML | .（根目錄） |
通常不用改——除非你有自訂輸出路徑。
環境變數（可選）
如果專案需要環境變數（例如 API 金鑰），在這裡新增：
KEY VALUE
DATABASE_URL postgres://...
API_SECRET sk-xxxxx
Code language: JavaScript (javascript)注意：這些變數會在建置和執行時使用，但不會暴露在前端程式碼中（除非 key 是 NEXT_PUBLIC_ 開頭）。
步驟四：點擊 Deploy！
設定確認後，點擊「Deploy」按鈕。接下來會看到即時的部署過程：
部署進度
├── Cloning repository... ✓
├── Installing dependencies... ✓
├── Building project... ✓
├── Deploying to edge... ✓
└── Ready! ✓
整個過程通常只需要 1-3 分鐘。
部署完成後你會得到
- 一個即時可用的網址
- 專案 Dashboard
- 部署歷史
- 訪客分析
- 日誌紀錄
- 預覽連結（每次 commit 都會產生）
自動部署：Push 即上線
這是 Vercel 最方便的功能。設定完成後：
你的開發流程
├── 本地修改程式碼
├── git add . && git commit -m "update"
├── git push origin main
└── Vercel 自動偵測並部署 ← 全自動！
Code language: JavaScript (javascript)它是怎麼運作的？
當你連結 GitHub 倉庫時，Vercel 會在倉庫設定一個 Webhook：
GitHub 倉庫設定
└── Webhooks
└── https://api.vercel.com/v1/integrations/deploy/xxx
觸發事件：push, pull_request
Code language: JavaScript (javascript)每當有 push 事件，GitHub 就會通知 Vercel，然後 Vercel 開始新的部署。
不同分支的部署策略
| 分支類型 | 部署結果 |
|---|---|
main（Production Branch） |
更新正式網站 |
其他分支（如 feature/xxx） |
產生 Preview 網址 |
| Pull Request | 產生 Preview 網址 + 留言通知 |
這表示：
- 推到
main= 正式上線 - 推到其他分支 = 給團隊預覽用的臨時網址
常見問題排解
建置失敗：找不到指令
Error: Command "npm run build" exited with 1
Code language: JavaScript (javascript)可能原因：
package.json裡沒有定義buildscript- 解法：確認你的
package.json有這段：
建置失敗：套件安裝問題
Error: Cannot find module 'xxx'
Code language: JavaScript (javascript)可能原因：
- 漏了提交
package.json或package-lock.json - 解法：確保這兩個檔案都有 push 上去
部署成功但頁面空白
可能原因：
- Output Directory 設定錯誤
- 解法：檢查建置後的實際輸出資料夾名稱
小結
恭喜！你已經完成了第一次 Vercel 部署。讓我們回顧一下：
- 註冊很簡單：用 GitHub 帳號一鍵登入
- 匯入專案：選倉庫、確認設定、點 Deploy
- 自動部署：之後每次 push，Vercel 都會自動更新
下一篇，我們將深入了解「Preview 部署」功能——如何讓團隊在合併程式碼前就能預覽變更。
延伸閱讀
進階測驗：第一次部署就上手：從 GitHub 到上線
共 5 題，包含情境題與錯誤診斷題。