網域、DNS 與網站部署是什麼？網站上線前先搞懂這三件事
從本機預覽到朋友也能打開，一步步把網站放上網
網站在自己的電腦上打得開，你把 http://localhost:5174 傳給朋友，對方卻說「我這邊打不開耶」。這不是朋友的電腦壞了；localhost 指的是正在開啟網址的那台電腦，朋友打開時，找的會是他的電腦。😅
上一篇提到 Apps Script 可以跑在 Google 的伺服器上；一般網站也需要一個能讓別人連進來的地方。這時候會遇到三個很像同一件事、其實各管各的名詞：部署、網域、DNS。
先記一句就好：部署是把網站放上線，網域是給人記的名稱，DNS 是幫這個名稱指路。
先用開店來想，會比較好懂
假設你要開一家店：店面要先準備好，客人才有地方可以來；店名要好記，朋友才說得出要去哪裡；地圖上還要找得到位置。
店面先開好，訪客才能走進去；招牌讓人記得店名，地圖則負責指路。對照網站，就是部署、網域與 DNS。
網站也差不多。不過這個比喻只是在幫我們抓分工，不代表網域真的就是一個門牌號碼：
| 開店時 | 網站上線時 | 在做什麼 |
|---|---|---|
| 把店面準備好 | 部署網站 | 讓網站檔案或程式在網路上的平台運作 |
| 給店一個好記的名字 | 註冊網域 | 讓人用名稱找到你的網站，例如 casper.tw |
| 在地圖標出位置 | 設定 DNS | 告訴瀏覽器，這個名稱該往哪個位置找 |
如果店面還沒準備好，光有店名和地圖也沒東西可逛。反過來，先把店面開起來，還沒買自己的網域也可以：不少部署平台會先給你一個平台提供的網址，讓你測試網站。[1]
網域：讓人記得住的網站名稱
像 casper.tw、hexschool.com 都是網域。使用者不用記住一串 IP 位址，只要輸入比較好記的名稱就能開始找網站。網域通常透過註冊商申請，並按註冊期限續用；不是付一次錢就永久屬於你。[2]
你提供的畫面就是管理網域的列表：可以看到 casper.tw 等名稱。這張是網域列表，還看不到每個網域實際指向哪個網站；要查去向，得再看 DNS 紀錄。
名稱也能再分出不同入口。以這本書的文章網址 https://book.casper.tw/it2026/domain-dns-deployment 為例，casper.tw 是主網域，前面的 book 是子網域，合起來 book.casper.tw 就是這本書的入口。
後面的 /it2026/domain-dns-deployment 是文章路徑。DNS 幫忙找到前面的網站入口；網站收到請求後，才決定顯示哪一篇。最前面的 https:// 是連線方式，跟網域名稱也不是同一件事。
DNS：幫網域查「要去哪裡」
你在瀏覽器輸入 book.casper.tw，瀏覽器需要知道該往哪個位置送出請求。DNS 就像一份會更新的地址簿：它查詢網域的紀錄，找出對應的去向，瀏覽器才知道要聯絡誰。實際查詢時也可能先使用之前暫存的結果，所以改完設定，不一定每個人都立刻看到新版去向。[2:1]
在設定頁常會遇到兩種紀錄：
- A 紀錄：把名稱指向 IPv4 位址。
- CNAME 紀錄：把名稱指向另一個網域名稱。
初學不用背一堆紀錄類型。更重要的是：照部署平台給的設定填。有的平台請你加 A 或 CNAME，有的平台在你綁定自訂網域時會協助建立紀錄。不要看到別人的教學填了某個 IP，就把它直接複製到自己的網域。[3]
你還可能看到「名稱伺服器（nameserver）」：它決定這個網域的 DNS 紀錄主要由哪個服務管理。網域在哪裡註冊、DNS 在哪裡管理、網站在哪裡部署，三者可以是不同公司。改 DNS 紀錄時，先確認自己進的是真正管理 DNS 的地方，不然改了半天，外面查的可能是另一份紀錄。[3:1]
部署：把網站交給能對外服務的平台
前面學 Vite 時，我們提到 npm run dev 主要是自己開發時預覽；npm run build 才會產生準備上線的檔案。建置比較像把店裡的東西打包好，部署則是把它交給一個對外開門的地方。只看到「建置成功」，朋友還是不能因此打開你的電腦。[1:1]
例如靜態網站可以交給 GitHub Pages，這本書則使用 Cloudflare Workers 的靜態資源模式。平台可以提供公開網址，再依平台的做法接上自己的網域。平台背後怎麼存放檔案、怎麼回應請求，會因服務而不同；這篇先抓住「網站內容已經到了能對外服務的地方」這個重點就好。[1:2]
網站內容更新後，也要讓平台拿到新版。把本機檔案改完，沒有再部署，線上看到的仍可能是舊版。這時就該先查部署紀錄，不必急著去改 DNS。
第一次上線，我會照這個順序檢查
不用第一步就買網域。先把網站放上線，再接自己的名稱，問題會比較容易拆開：
- 先確認本機網站正常：畫面和連結至少自己操作過一次。
- 建置並部署到平台：讓平台產生一個可以公開打開的網址。
- 先試平台給的網址：用另一個瀏覽器或請朋友開啟，確認網頁、圖片和內頁都正常。
- 再綁定自己的網域：依平台說明設定 DNS 或自訂網域，不自行猜紀錄值。
- 最後打開正式網址：檢查
https://可用、頁面是新版，手機也能正常閱讀。
若平台網址能開、自訂網域不能開，先查網域與 DNS 設定。若兩個網址都不能開，先看部署有沒有成功、網站檔案有沒有送上去。若首頁正常、某個內頁卻出錯，就回頭檢查網站的路徑與平台設定。DNS 紀錄改動後，也要留意暫存尚未更新的情況。[2:2]
我在哪裡買網域？
我自己的網域，主要是在 GoDaddy 買的；現在也開始改在 Cloudflare Registrar 購買。這是我目前的使用方式，並不是說已經買的網域都要跟著搬家。在哪裡買網域和網站放在哪個平台本來就可以分開。
如果你跟我一樣已經在 GoDaddy 買了網域，可以先到帳號裡查續約價格。畫面上的價格不包含 Domain Protection、Premium DNS 等加購服務，確認總費用後，再決定要不要繼續放在這裡。
Cloudflare Registrar 的官方說明寫明註冊和續約按成本價、不加價；但在這裡購買的網域要使用 Cloudflare 名稱伺服器。所以要買新網域時，我會先看想要的後綴能不能買、續約要多少，以及這項 DNS 限制是否符合需求。
第一年促銷價看起來很吸引人，但網域通常會用不只一年。買之前多看一眼續約費，比單看「第一年最便宜」更實際。
不用急著把每個設定畫面都背起來。先能分辨「網站內容有沒有上去」和「網址有沒有指到對的位置」，排錯時就不會在 DNS 和程式碼之間來回亂猜。下一次看到 AI 說「部署完成」，你也知道要問它：公開網址在哪裡？我現在打開，看到的是不是剛才那個版本？
MDN Web Docs，Publishing your website；Cloudflare Developers，Static Assets: Get Started。 ↩︎ ↩︎ ↩︎
MDN Web Docs，What is a Domain Name?。 ↩︎ ↩︎ ↩︎
Cloudflare Developers，DNS record types與Get started with Cloudflare DNS。 ↩︎ ↩︎