前言

當你把網站部署到 Vercel 後，會得到一個像 your-project.vercel.app 的網址。這個網址雖然能用，但如果你想讓網站看起來更專業，或是建立品牌識別，就需要使用自訂網域，例如 yourbrand.com。

本篇是 Vercel 系列的最後一篇，我們將學習如何在 Vercel 綁定自訂網域，並了解 DNS 設定與自動 HTTPS 的運作方式。

為什麼需要自訂網域

使用 Vercel 預設網域（*.vercel.app）有幾個限制：

如果你只是做個人專案或測試，預設網域完全夠用。但如果是正式產品或商業網站，自訂網域就很重要了。

在 Vercel 新增網域的步驟

步驟一：進入專案設定

1. 登入 Vercel Dashboard
2. 選擇你要設定的專案
3. 點擊上方的「Settings」分頁
4. 在左側選單找到「Domains」

步驟二：新增網域

在 Domains 頁面，你會看到一個輸入框：

Enter your domain...  [Add]
Code language: CSS (css)

輸入你購買的網域，例如 yourbrand.com，然後點擊「Add」。

步驟三：選擇設定方式

Vercel 會詢問你要如何設定這個網域：

• Recommended：同時設定 yourbrand.com 和 www.yourbrand.com
• Add only：只設定你輸入的網域

建議選擇 Recommended，這樣兩種網址都能正常運作。

DNS 設定：A Record vs CNAME

新增網域後，Vercel 會顯示你需要設定的 DNS 記錄。這時你需要到你的域名註冊商（如 GoDaddy、Namecheap、Gandi 等）進行設定。

什麼是 DNS 記錄

DNS（Domain Name System）就像網路的電話簿，負責把網域名稱轉換成 IP 位址。常見的記錄類型有：

Vercel 的 DNS 設定建議

Vercel 會根據你的網域類型給出不同建議：

頂級網域（Apex Domain）如 yourbrand.com

Type: A
Name: @
Value: 76.76.21.21
Code language: HTTP (http)

小提醒：@ 符號代表頂級網域本身，不同的 DNS 服務商可能用不同符號表示。

子網域如 www.yourbrand.com

Type: CNAME
Name: www
Value: cname.vercel-dns.com
Code language: HTTP (http)

為什麼頂級網域用 A Record

技術上，頂級網域（沒有前綴的網域）不能使用 CNAME 記錄，這是 DNS 規範的限制。所以：

• yourbrand.com 必須用 A Record
• www.yourbrand.com 可以用 CNAME（推薦）

有些 DNS 服務商提供「ALIAS」或「ANAME」記錄來解決這個限制，但最簡單的做法還是按照 Vercel 建議設定。

Vercel 自動 SSL 憑證

HTTPS 的重要性

現代網站都應該使用 HTTPS：

• 瀏覽器會對 HTTP 網站顯示「不安全」警告
• Google 把 HTTPS 作為排名因素之一
• 保護使用者資料傳輸安全

Vercel 的自動 HTTPS

好消息是：Vercel 會自動為你的網域申請 SSL 憑證，你完全不需要手動設定。

當你完成 DNS 設定後，Vercel 會：

1. 驗證你的 DNS 設定是否正確
2. 向 Let’s Encrypt 申請免費 SSL 憑證
3. 自動安裝並啟用 HTTPS
4. 自動續期憑證（Let’s Encrypt 憑證每 90 天需要更新）

在 Vercel Dashboard 的 Domains 頁面，你會看到每個網域旁邊的狀態：

yourbrand.com        Valid Configuration  [SSL: Valid]
www.yourbrand.com    Valid Configuration  [SSL: Valid]
Code language: CSS (css)

當顯示「Valid Configuration」和「SSL: Valid」時，就表示設定完成了。

常見問題排解

DNS 生效需要多久

DNS 變更不會立即生效，需要等待全球的 DNS 伺服器更新。這個過程稱為「DNS 傳播」（DNS Propagation）：

• 最快：幾分鐘內
• 通常：15-30 分鐘
• 最慢：24-48 小時（較少見）

你可以使用這些工具檢查 DNS 是否生效：

# 使用終端機查詢
dig yourbrand.com

# 或查詢特定記錄類型
dig yourbrand.com A
dig www.yourbrand.com CNAME
Code language: CSS (css)

也可以使用線上工具如 DNS Checker 查看全球各地的 DNS 狀態。

SSL 憑證錯誤

如果看到「Certificate Pending」或憑證錯誤，可能原因有：

Vercel Dashboard 顯示 Invalid Configuration

確認以下幾點：

1. DNS 記錄的值是否與 Vercel 顯示的完全一致
2. 有沒有重複的 A Record 或 CNAME 記錄
3. DNS 記錄的 TTL（Time To Live）設定是否太長

進階：www 與 apex domain 重導向

當你同時設定了 yourbrand.com 和 www.yourbrand.com，Vercel 會詢問你要把哪個作為「主要網域」。

選擇主要網域

你有兩個選擇：

選項 A：以 apex domain 為主

• 主要網址：yourbrand.com
• www.yourbrand.com 會自動 301 重導向到 yourbrand.com

選項 B：以 www 為主

• 主要網址：www.yourbrand.com
• yourbrand.com 會自動 301 重導向到 www.yourbrand.com

如何設定

在 Vercel Domains 頁面，每個網域旁邊會有選項：

yourbrand.com        [Primary]  [Redirect to Primary]
www.yourbrand.com    [Primary]  [Redirect to Primary]
Code language: CSS (css)

點擊你想作為主要網域的那個旁邊的「Primary」，另一個就會自動變成「Redirect to Primary」。

哪個選擇比較好

現代來說，兩種選擇差異不大。選擇你喜歡的就好，重要的是保持一致，不要讓兩個網址都能獨立訪問。

實際操作流程總結

讓我們把完整流程整理一次：

1. Vercel Dashboard → 專案 → Settings → Domains

2. 輸入網域 → Add → 選擇 Recommended

3. 複製 Vercel 顯示的 DNS 設定

4. 到域名註冊商 → DNS 管理 → 新增記錄
   - A Record: @ → 76.76.21.21
   - CNAME: www → cname.vercel-dns.com

5. 等待 DNS 生效（5-30 分鐘）

6. 回到 Vercel 確認狀態為 Valid Configuration

7. 選擇主要網域（設定重導向）

8. 完成！網站已可透過自訂網域訪問
Code language: CSS (css)

本篇重點整理

• 自訂網域能提升網站專業度與品牌識別
• 在 Vercel 新增網域後，需要到域名註冊商設定 DNS
• 頂級網域使用 A Record，子網域使用 CNAME
• Vercel 會自動透過 Let’s Encrypt 申請並管理 SSL 憑證
• DNS 變更需要時間傳播，通常 15-30 分鐘
• 建議設定 www 與 apex domain 的重導向，保持網址一致性

系列總結

恭喜你完成了 Vercel 教學系列！讓我們回顧一下這五篇學到的內容：

1. Vercel 是什麼：認識這個現代化部署平台
2. 部署第一個網站：從 GitHub 到上線
3. 預覽部署與分支：團隊協作的利器
4. 環境變數設定：管理不同環境的配置
5. 自訂網域與 HTTPS：讓網站更專業

現在你已經掌握了 Vercel 的核心功能，可以輕鬆部署和管理你的前端專案了。下一步，你可以探索 Vercel 的進階功能，如 Edge Functions、Analytics 等。

祝你部署順利！