【網域管理】Namecheap & Vercel,把子網域指向不同主機

鴨血的技術筆記-wordpress網站製作-aipainting

子網域與主網域能使用不同主機嗎? 當然可以!

我們先假設一種情境:
你是NextJS的使用者,透過github在Vercel佈署網站後,你希望擁有自己的網域名稱,但在vercel購買網域實在有點貴,於是你想在其他網域供應商(Godaddy或Namecheap進行購買),再指向Vercel主機。

那麼…該去哪裡設定呢?

一.先從Vercel後台新增自訂網域

Step.1 點進目標專案

Step.2 點選右上角Domains


點選Domains到達網域管理的頁面。

在專案列表點選專案右上角三個點,選擇Manage Domain,一樣會到達網域管理頁面。

直接前往manage Domain頁面

Step.3 新增子網域

一開始只有預設免費網域:專案名稱.vercel.app。
假設你購買的網域為domain.com,欲新增自訂子網域名稱為blog.domain.com,於欄位輸入blog.domain.com後並按下add按鈕。

Step.4 前往網域供應商後台設定DNS

CNAME Record或a Record都可以,把vercel提供的Host Name與Value新增至網域供應商的HOST RECORDS

變更DNS後,更新可能需要等待一段時間,但通常不會超過3天。

二.網域供應商的後台設定

此處以namecheap的後台為例:

1.登入namecheap後,前往網域列表(Domain List)

2.點選目標網域右側的管理(Manage)按鈕

會進入管理畫面,上方有4個分頁,一開始會在Domain分頁

3.確認NAMESERVERS類型

於Domain分頁檢查NAMESERVERS類型是否為Namecheap BasicDNS,
如果不是,請選擇更改類型,並按下勾勾按鈕更新。

4.點選進階DNS分頁(Advanced DNS)

在HOST RECORDS最下方點選按鈕『新增RECORDS』

然後把Vercel那邊複製的CNAME名稱以及值,新增到RECORDS中
務必選擇正確的 record類型!

三.設定完成後,回到Vercel的網域管理頁面

按下右邊的重整按鈕(refresh),等待藍勾勾出現,就大功告成囉!