網站在自己的電腦上打得開，你把 http://localhost:5174 傳給朋友，對方卻說「我這邊打不開耶」。這不是朋友的電腦壞了；localhost 指的是正在開啟網址的那台電腦，朋友打開時，找的會是他的電腦。😅

上一篇提到 Apps Script 可以跑在 Google 的伺服器上；一般網站也需要一個能讓別人連進來的地方。這時候會遇到三個很像同一件事、其實各管各的名詞：部署、網域、DNS。

先記一句就好：部署是把網站放上線，網域是給人記的名稱，DNS 是幫這個名稱指路。

先用開店來想，會比較好懂

假設你要開一家店：店面要先準備好，客人才有地方可以來；店名要好記，朋友才說得出要去哪裡；地圖上還要找得到位置。

店面先開好，訪客才能走進去；招牌讓人記得店名，地圖則負責指路。對照網站，就是部署、網域與 DNS。

網站也差不多。不過這個比喻只是在幫我們抓分工，不代表網域真的就是一個門牌號碼：

如果店面還沒準備好，光有店名和地圖也沒東西可逛。反過來，先把店面開起來，還沒買自己的網域也可以：不少部署平台會先給你一個平台提供的網址，讓你測試網站。（參考：MDN：Publishing your website 與 Cloudflare：Static Assets Get Started）

網域：讓人記得住的網站名稱

像 casper.tw、hexschool.com 都是網域。使用者不用記住一串 IP 位址，只要輸入比較好記的名稱就能開始找網站。網域通常透過註冊商申請，並按註冊期限續用；不是付一次錢就永久屬於你。（參考：MDN：What is a Domain Name?）

你提供的畫面就是管理網域的列表：可以看到 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 就像一份會更新的地址簿：它查詢網域的紀錄，找出對應的去向，瀏覽器才知道要聯絡誰。實際查詢時也可能先使用之前暫存的結果，所以改完設定，不一定每個人都立刻看到新版去向。（參考：MDN：What is a Domain Name?）

在設定頁常會遇到兩種紀錄：

• A 紀錄：把名稱指向 IPv4 位址。
• CNAME 紀錄：把名稱指向另一個網域名稱。

初學不用背一堆紀錄類型。更重要的是：照部署平台給的設定填。有的平台請你加 A 或 CNAME，有的平台在你綁定自訂網域時會協助建立紀錄。不要看到別人的教學填了某個 IP，就把它直接複製到自己的網域。（參考：Cloudflare：DNS record types 與 Get started with Cloudflare DNS）

你還可能看到「名稱伺服器（nameserver）」：它決定這個網域的 DNS 紀錄主要由哪個服務管理。網域在哪裡註冊、DNS 在哪裡管理、網站在哪裡部署，三者可以是不同公司。改 DNS 紀錄時，先確認自己進的是真正管理 DNS 的地方，不然改了半天，外面查的可能是另一份紀錄。（參考：Cloudflare：DNS record types 與 Get started with Cloudflare DNS）

部署：把網站交給能對外服務的平台

前面學 Vite 時，我們提到 npm run dev 主要是自己開發時預覽；npm run build 才會產生準備上線的檔案。建置比較像把店裡的東西打包好，部署則是把它交給一個對外開門的地方。只看到「建置成功」，朋友還是不能因此打開你的電腦。（參考：MDN：Publishing your website 與 Cloudflare：Static Assets Get Started）

例如靜態網站可以交給 GitHub Pages，這本書則使用 Cloudflare Workers 的靜態資源模式。平台可以提供公開網址，再依平台的做法接上自己的網域。平台背後怎麼存放檔案、怎麼回應請求，會因服務而不同；這篇先抓住「網站內容已經到了能對外服務的地方」這個重點就好。（參考：MDN：Publishing your website 與 Cloudflare：Static Assets Get Started）

網站內容更新後，也要讓平台拿到新版。把本機檔案改完，沒有再部署，線上看到的仍可能是舊版。這時就該先查部署紀錄，不必急著去改 DNS。

第一次上線，我會照這個順序檢查

不用第一步就買網域。先把網站放上線，再接自己的名稱，問題會比較容易拆開：

1. 先確認本機網站正常：畫面和連結至少自己操作過一次。
2. 建置並部署到平台：讓平台產生一個可以公開打開的網址。
3. 先試平台給的網址：用另一個瀏覽器或請朋友開啟，確認網頁、圖片和內頁都正常。
4. 再綁定自己的網域：依平台說明設定 DNS 或自訂網域，不自行猜紀錄值。
5. 最後打開正式網址：檢查 https:// 可用、頁面是新版，手機也能正常閱讀。

若平台網址能開、自訂網域不能開，先查網域與 DNS 設定。若兩個網址都不能開，先看部署有沒有成功、網站檔案有沒有送上去。若首頁正常、某個內頁卻出錯，就回頭檢查網站的路徑與平台設定。DNS 紀錄改動後，也要留意暫存尚未更新的情況。（參考：MDN：What is a Domain Name?）

我在哪裡買網域？

我自己的網域，主要是在 GoDaddy 買的；現在也開始改在 Cloudflare Registrar 購買。這是我目前的使用方式，並不是說已經買的網域都要跟著搬家。在哪裡買網域和網站放在哪個平台本來就可以分開。

如果你跟我一樣已經在 GoDaddy 買了網域，可以先到帳號裡查續約價格。畫面上的價格不包含 Domain Protection、Premium DNS 等加購服務，確認總費用後，再決定要不要繼續放在這裡。

Cloudflare Registrar 的官方說明寫明註冊和續約按成本價、不加價；但在這裡購買的網域要使用 Cloudflare 名稱伺服器。所以要買新網域時，我會先看想要的後綴能不能買、續約要多少，以及這項 DNS 限制是否符合需求。

第一年促銷價看起來很吸引人，但網域通常會用不只一年。買之前多看一眼續約費，比單看「第一年最便宜」更實際。

不用急著把每個設定畫面都背起來。先能分辨「網站內容有沒有上去」和「網址有沒有指到對的位置」，排錯時就不會在 DNS 和程式碼之間來回亂猜。下一次看到 AI 說「部署完成」，你也知道要問它：公開網址在哪裡？我現在打開，看到的是不是剛才那個版本？

文章同步發表於 https://book.casper.tw/it2026/domain-dns-deployment