Localhost 是什麼?127.0.0.1 完整解析|新手必讀

Localhost 是什麼?127.0.0.1 完整解析|新手必讀

引言:第一次看到 localhost,你一定很困惑

「localhost:3000 是什麼鬼?」

第一次學寫程式的時候,打開瀏覽器看到這串東西,大概都會愣住。

這不是一個真的網址。你也不能把它分享給朋友。

但它卻是每個工程師每天都在用的東西。

這篇文章用最白話的方式,讓你徹底搞懂 localhost 到底是什麼、127.0.0.1 又是什麼、以及你為什麼需要知道這些。

confused-beginner-looking-at-localhost-browser

Localhost 是什麼?一句話解釋

Localhost 就是「你自己的電腦」。

就這麼簡單。

當你在瀏覽器輸入 localhost,你不是連到網路上的某個網站。

你是連到你自己的電腦。

為什麼叫 Localhost?

把這個字拆開來看:

  • Local = 本地的、當地的
  • Host = 主機、伺服器

合起來就是「本地主機」。

也就是說,你的電腦同時扮演兩個角色:
1. 客戶端:你用瀏覽器發出請求
2. 伺服器:你的電腦自己回應這個請求

這就像自己打電話給自己。聽起來很奇怪,但在開發程式的時候超級實用。

一個生活化的比喻

想像你在一棟大樓裡工作。

每個辦公室都有門牌號碼,你可以走到任何一間敲門。

但如果你想找的人就在你自己的辦公室裡呢?

你不需要出門,直接轉頭就好了。

Localhost 就是「轉頭找自己」的概念。

網路世界裡,每台電腦都有 IP 位址(就像門牌號碼)。但 localhost 是一個特殊的「門牌」,永遠指向你自己。


127.0.0.1 是什麼?與 Localhost 的關係

127.0.0.1:Localhost 的真實身份

127.0.0.1 是 localhost 的 IP 位址

這兩個東西指向同一個地方——你的電腦。

差別只是寫法:
- localhost 是人類好記的「名字」
- 127.0.0.1 是電腦認得的「數字」

就像:
- 「台北101」是地標名稱
- 「台北市信義區信義路五段7號」是實際地址

這兩個都能讓你找到同一棟大樓。

電腦怎麼知道 localhost = 127.0.0.1?

這個對應關係寫在你電腦的 hosts 檔案 裡。

每台電腦都有這個檔案。打開來看,你會看到這一行:

127.0.0.1   localhost

這就是告訴電腦:「每次看到 localhost,就去找 127.0.0.1」。

檔案位置:

作業系統 路徑
Windows C:\Windows\System32\drivers\etc\hosts
Mac / Linux /etc/hosts

為什麼是 127.0.0.1?

這個數字不是隨便選的。

在網路世界裡,127.0.0.1127.255.255.255 這整個範圍都被保留給「loopback」使用。

Loopback 的意思是「迴送」——資料送出去之後,會繞一圈回到自己。

不會真的跑到網路上去。

其中 127.0.0.1 是最常用的,所以就成了 localhost 的標準 IP。

terminal-ping-localhost-hosts-file-display

Localhost 能做什麼?3 個常見用途

知道 localhost 是什麼之後,來看看它實際上能做什麼。

用途一:本機開發網站

這是最常見的用途。

寫網站的時候,你不會直接把程式碼放到正式伺服器上測試。萬一寫錯了,整個網站就掛了。

所以工程師會在自己電腦上架一個「假的伺服器」。

這個假伺服器跑在 localhost 上。

流程是這樣的:

  1. 你寫好程式碼
  2. 啟動本機伺服器(例如執行 npm start
  3. 打開瀏覽器,輸入 localhost:3000
  4. 看到你的網站

改了程式碼,重新整理頁面就能看到變化。

快速、安全、不怕搞砸。

用途二:連接本機資料庫

寫程式常常需要連接資料庫。

開發階段,資料庫通常也裝在你的電腦上。

當程式需要連資料庫時,你會在設定檔裡寫:

DB_HOST=localhost
DB_PORT=3306

這就是告訴程式:「資料庫在我自己電腦上,Port 是 3306」。

常見的資料庫和它們的預設 Port:

資料庫 預設 Port
MySQL 3306
PostgreSQL 5432
MongoDB 27017
Redis 6379

用途三:測試 API

前後端分離的專案裡,前端需要打 API 拿資料。

開發的時候,API 伺服器也跑在 localhost。

前端程式碼可能會寫:

fetch('http://localhost:8080/api/users')

這代表:「去我自己電腦的 8080 Port,拿 /api/users 的資料」。

等專案要上線時,再把 localhost:8080 換成真正的伺服器網址就好。


Localhost vs 真實網址的差別

很多新手會問:「localhost 和一般網址有什麼不一樣?」

差別很大。

比較表

項目 Localhost 真實網址(如 google.com)
誰能連 只有你自己 全世界都能連
需要網路嗎 不需要 需要
資料在哪裡 你的電腦 遠端伺服器
用途 開發測試 正式上線

為什麼別人連不到你的 localhost?

因為 localhost 永遠指向「自己」。

你在你的電腦輸入 localhost,連到的是你的電腦。

朋友在他的電腦輸入 localhost,連到的是他的電腦。

這是兩台不同的電腦。

想讓別人看到你的網站?

你需要把 localhost「暴露」到網路上。

可以用 ngrok、Cloudflare Tunnel 這類工具,或是直接把網站部署到雲端。

想了解怎麼讓別人看到你的 localhost?請參考「如何讓 Localhost 上線?5 種方法讓別人看到你的本機程式


想讓別人看到你的網站,但不知道怎麼設定?

localhost 轉公開網址,聽起來簡單,實際操作卻常常卡關。

如果你不想花時間研究 ngrok、Cloudflare 這些工具,讓 VibeFix 幫你搞定。

讓工程師幫我處理 →


如何使用 Localhost?實際操作示範

說了這麼多,來實際操作一次。

方法一:用 Python 快速啟動伺服器

如果你電腦有裝 Python(Mac 通常內建),可以用這個方法:

步驟:

  1. 打開終端機(Terminal)
  2. 進入你想分享的資料夾
  3. 執行以下指令:
python3 -m http.server 8000
  1. 打開瀏覽器,輸入 localhost:8000

你會看到那個資料夾的檔案列表。

方法二:用 Node.js 啟動專案

如果你在做 React 或 Vue 專案:

npm start
# 或
npm run dev

終端機會顯示類似這樣的訊息:

Local: http://localhost:3000

點擊這個連結,或是在瀏覽器輸入 localhost:3000,就能看到你的專案。

方法三:用 VS Code Live Server

如果你只是寫簡單的 HTML/CSS/JavaScript:

  1. 在 VS Code 安裝 Live Server 擴充套件
  2. 打開你的 HTML 檔案
  3. 右下角點擊「Go Live」

瀏覽器會自動打開 localhost:5500,顯示你的網頁。

vscode-live-server-go-live-button

常見問題與下一步

FAQ

Q:Localhost 的中文意思是什麼?

A:Localhost 直譯是「本地主機」,意思就是「你自己的電腦」。當你連到 localhost,就是連到你自己電腦上的服務。

Q:Localhost 和 127.0.0.1 有什麼差異?

A:這兩個指向同一個地方(你的電腦)。Localhost 是人類好記的名稱,127.0.0.1 是對應的 IP 位址。寫哪個都可以。

Q:為什麼要用 localhost 開發?

A:因為安全、快速、不需要網路。你可以在自己電腦上隨便測試,不用擔心弄壞正式網站。改了程式碼馬上就能看到結果。

Q:Localhost 後面的數字(如 :3000)是什麼?

A:那是 Port(連接埠)。一台電腦可以同時跑多個服務,Port 就像「房間號碼」,讓電腦知道你要找哪個服務。

想了解更多 Port 的知識?請參考「Localhost Port 完整對照表|3000、8080、8000 常用 Port 總整理

你可能會遇到的問題

學會 localhost 之後,你可能會遇到這些問題:

延伸閱讀

想更深入了解 localhost 和本機開發?推薦這些文章:

developer-happy-localhost-website-success

Localhost 與 127.0.0.1 重點整理

讓我們快速回顧一下:

  1. Localhost = 你自己的電腦。連到 localhost 就是連到自己。

  2. 127.0.0.1 是 localhost 的 IP 位址。這兩個指向同一個地方。

  3. Localhost 用來開發測試。寫程式的時候,先在自己電腦上測試,確認沒問題再上線。

  4. 別人連不到你的 localhost。想讓別人看,需要用工具暴露出去,或是部署到雲端。

現在你知道 localhost 是什麼了。

下次看到 localhost:3000,不會再困惑了吧?


程式只能在本機跑?

你已經學會什麼是 localhost 了。但如果你的專案需要讓別人看到,或是要正式上線——

設定 ngrok、部署到 Vercel、綁定網域...這些東西可能又讓你頭痛了。

VibeFix 專門幫開發者解決這種問題。

不管是臨時分享還是正式部署,我們都能幫你搞定。

幫我上線 →


參考資料

  1. MDN Web Docs,〈What is localhost?〉
  2. Wikipedia,〈Localhost〉
  3. RFC 5735,〈Special Use IPv4 Addresses〉
  4. Python Documentation,〈http.server — HTTP servers〉
分享文章:
V

VibeFix 團隊

專門解決 AI Vibe Coding 後的疑難雜症,讓你的專案順利上線。

這篇文章有幫到你嗎?

如果還有問題,讓我們直接幫你解決!

聯繫我們