前言

當你在開發新功能時，最怕的是什麼？改了程式碼，自己看起來沒問題，結果一上線才發現設計師說「這個間距不對」、QA 說「這個按鈕在手機上點不到」、客戶說「這不是我要的」。

如果能在正式上線之前，讓每個人都先看到、先測試，那該有多好？

這就是 Preview Deployment 要解決的問題。

什麼是 Preview Deployment

Preview Deployment（預覽部署）是 Vercel 的核心功能之一。簡單來說：

每當你開一個新的 Branch 或發起 Pull Request，Vercel 就會自動幫你部署一個獨立的預覽環境，並給你一個專屬的 URL。

這個預覽環境：

• 與正式環境完全隔離
• 有自己獨立的網址
• 會隨著你的程式碼更新而自動重新部署
• PR 關閉後會自動清理

預覽 URL 長什麼樣子

當你推送一個名為 feature/new-header 的 Branch 時，Vercel 會自動生成類似這樣的 URL：

https://my-project-git-feature-new-header-username.vercel.app
Code language: JavaScript (javascript)

URL 的結構是：

https://[專案名]-git-[branch名稱]-[用戶名].vercel.app
Code language: JavaScript (javascript)

每次 commit 推送後，這個 URL 的內容都會自動更新。

在 GitHub PR 中查看預覽連結

這是最常見的使用場景。當你在 GitHub 發起 Pull Request 後：

1. Vercel 會自動偵測到新的 PR
2. 開始建置預覽環境
3. 在 PR 頁面留下一則 comment，包含預覽連結

在 GitHub PR 頁面，你會看到類似這樣的資訊：

vercel bot commented

The latest updates on your projects. Learn more about Vercel for Git.

| Name | Status | Preview |
|------|--------|---------|
| my-project | Ready | Visit Preview |

點擊「Visit Preview」就能直接開啟預覽環境。

此外，在 PR 的 Checks 區塊，你也會看到 Vercel 的部署狀態：

• 黃色圈圈：正在建置中
• 綠色勾勾：建置成功，可以預覽
• 紅色叉叉：建置失敗，需要檢查錯誤

預覽環境 vs 正式環境

了解預覽環境和正式環境的差異很重要：

在 Vercel 專案設定中，你可以為 Preview 和 Production 設定不同的環境變數。例如：

• Production：連接正式資料庫
• Preview：連接測試資料庫

這樣預覽環境的測試就不會影響到正式資料。

實用場景

場景一：設計師審核 UI

設計師不需要懂程式、不需要在本機跑專案，只要：

1. 前端工程師完成 UI 開發，發起 PR
2. 在 PR comment 中 @ 設計師
3. 設計師點開預覽連結，直接在瀏覽器中檢視
4. 發現問題直接在 PR 留言回饋

設計師可以在各種裝置上開啟預覽連結，確認響應式設計是否正確。

場景二：QA 測試

測試工程師可以：

1. 收到預覽連結
2. 在真實的線上環境中測試功能
3. 不用等到正式部署才能開始測試
4. 發現 Bug 直接在 PR 中回報

這大幅縮短了「開發 -> 測試 -> 修正」的迴圈時間。

場景三：客戶 Demo

當你需要向客戶展示開發中的功能：

1. 把預覽連結傳給客戶
2. 客戶不需要任何技術背景，點開就能看
3. 收集客戶回饋後繼續調整
4. 確認 OK 再合併到主分支上線

這比起「請等我們下週上線」的溝通效率高太多了。

場景四：多版本比較

當你不確定哪個設計方案比較好：

1. 開兩個 Branch，各自實作不同方案
2. 兩個 Branch 都會有自己的預覽 URL
3. 把兩個連結放在一起比較
4. 團隊投票決定採用哪個版本

如何分享預覽連結

最簡單的方式就是從 GitHub PR 頁面複製連結。但如果你想更快找到：

1. 進入 Vercel Dashboard
2. 選擇你的專案
3. 點擊「Deployments」標籤
4. 找到對應的 Branch 部署
5. 點擊「Visit」按鈕或複製 URL

在 Deployments 列表中，你會看到每次部署的狀態、觸發的 Branch、部署時間等資訊。

小提醒

使用 Preview Deployment 時，有幾點要注意：

1. 預覽連結是公開的：任何人拿到連結都能看到內容。如果有敏感資訊，要特別小心分享對象。Vercel 付費方案提供密碼保護功能。
2. 預覽環境會消耗建置時間：每次推送都會觸發建置。如果團隊很大、PR 很多，要注意 Vercel 的免費額度。
3. 環境變數要分開設定：確保預覽環境不會意外連到正式資料庫或發送真實郵件。

重點回顧

讀完這篇文章，你學會了：

• Preview Deployment 是每個 Branch/PR 自動產生的獨立預覽環境
• 預覽 URL 會顯示在 GitHub PR 頁面的 comment 和 Checks 中
• 預覽環境和正式環境是隔離的，可以設定不同的環境變數
• Preview Deployment 最適合用於設計審核、QA 測試、客戶 Demo 等場景
• 分享預覽連結時要注意連結是公開可存取的

下一步

有了 Preview Deployment，團隊協作變得更順暢。但當專案變大、流量變多，你可能需要了解更多 Vercel 的進階功能。

下一篇文章，我們會介紹如何設定自訂網域，讓你的網站擁有專業的網址。

本文為【Vercel 教學】系列第 4 篇。如果你還沒有 Vercel 部署經驗，建議先閱讀本系列的第 2、3 篇文章。