Localhost IP 設定教學｜讓區網裝置連到你的電腦

你正在電腦上開發一個網站或 App，想用手機測試一下實際的使用體驗。於是你拿起手機，在瀏覽器輸入 localhost:3000... 結果什麼都沒有。這時候你可能會想：「不是說 localhost 就是本機嗎？為什麼手機連不上？」

這是每個開發者都會遇到的問題。localhost 確實是指本機，但「本機」這個概念對每台裝置來說都是不同的。你手機上的 localhost 是指你的手機，不是你的電腦。

好消息是，只要正確設定 localhost IP，就能讓同一個 WiFi 下的所有裝置都能連到你電腦上跑的程式。本文會帶你一步步完成這個設定，讓你的開發流程更順暢。

要點一：為什麼手機連不到電腦的 localhost？

在深入技術細節之前，我們先來理解為什麼會發生這個問題。這不是 bug，而是網路運作的正常行為。

localhost 只代表「自己」

localhost 和 127.0.0.1 是特殊的網路位址，專門用來指向「這台裝置自己」。當你在電腦瀏覽器輸入 localhost:3000，電腦會去找自己 3000 port 上跑的程式。

但當你在手機輸入同樣的網址時：
- 手機會去找手機自己的 3000 port
- 手機上當然沒有跑任何程式
- 所以連線失敗

這就像你跟朋友說「來我家」，但你們住在不同地方。你說的「我家」是你的家，不是朋友的家。

預設監聽位址的限制

除了 localhost 的特性外，還有另一個問題：大多數開發伺服器預設只監聽 127.0.0.1。

這是什麼意思呢？當一個程式啟動並開始監聽網路連線時，它需要指定一個 IP 位址。如果指定 127.0.0.1，就表示：「我只接受來自這台電腦內部的連線，外部連線一律拒絕」。

這是一種安全機制。預設只接受本機連線，可以防止你的開發中程式被區網內的其他人隨意存取。

解決方案預覽

要讓手機連到電腦的 localhost，你需要做三件事：

1. 修改監聽位址：讓程式接受外部連線
2. 查詢區網 IP：找出電腦在區網中的實際 IP 位址
3. 設定防火牆：允許區網連線通過

接下來我們會逐一說明每個步驟。

要點二：localhost vs 0.0.0.0 差異

在解決區網連線問題時，你會經常看到 0.0.0.0 這個特殊 IP 位址。理解它和 localhost（127.0.0.1）的差異非常重要。

127.0.0.1（localhost）的特性

127.0.0.1 被稱為 loopback address（回環位址），它的特點是：

當你的程式監聽 127.0.0.1:3000 時，只有在同一台電腦上的瀏覽器或程式能連到它。即使有人知道你的區網 IP，也無法連線。

0.0.0.0 的特殊意義

0.0.0.0 在監聽位址的語境中，代表「所有可用的網路介面」。這是一個萬用位址。

當程式監聽 0.0.0.0:3000 時：

簡單來說，0.0.0.0 就是在說：「不管連線從哪裡來，只要是往 3000 port，我都接受」。

圖解比較

監聽 127.0.0.1:3000          監聽 0.0.0.0:3000

    [電腦]                        [電腦]
      │                            │
      ▼                            ▼
  只接受本機               接受所有來源
      │                         ╱  │  ╲
      ▼                        ▼   ▼   ▼
   [本機瀏覽器]           [本機] [手機] [其他電腦]

何時該用哪個？

安全提醒

使用 0.0.0.0 時要注意：只要在同一個網路下的裝置，理論上都能連到你的程式。如果你在咖啡廳或公共 WiFi 下開發，其他人也可能連到你的開發伺服器。

在公共網路環境下，建議：
- 使用防火牆限制連線
- 或繼續使用 127.0.0.1，透過其他方式（如 ngrok）讓手機存取

要點三：修改程式監聽位址

知道了 0.0.0.0 的作用後，接下來要實際修改你的程式設定。不同框架有不同的設定方式。

React（Create React App）

Create React App 預設監聽 localhost。要改成 0.0.0.0，在啟動時加上 HOST 環境變數：

# Mac / Linux
HOST=0.0.0.0 npm start

# Windows（Command Prompt）
set HOST=0.0.0.0 && npm start

# Windows（PowerShell）
$env:HOST="0.0.0.0"; npm start

或者在 package.json 中修改 scripts：

{
  "scripts": {
    "start": "HOST=0.0.0.0 react-scripts start"
  }
}

Vite

Vite 可以在 vite.config.js 中設定：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 5173
  }
})

或使用命令列參數：

npx vite --host 0.0.0.0

Next.js

Next.js 的 next dev 命令可以加上 -H 參數：

npx next dev -H 0.0.0.0

或在 package.json 中設定：

{
  "scripts": {
    "dev": "next dev -H 0.0.0.0"
  }
}

Vue CLI

Vue CLI 專案可以在 vue.config.js 中設定：

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8080
  }
}

Express.js

Express 的 listen 方法可以指定監聽位址：

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

// 預設（只監聽本機）
// app.listen(3000)

// 監聽所有介面
app.listen(3000, '0.0.0.0', () => {
  console.log('Server running on 0.0.0.0:3000')
})

Python Flask

Flask 的 run 方法可以指定 host：

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello World!'

if __name__ == '__main__':
    # 監聽所有介面
    app.run(host='0.0.0.0', port=5000)

Python Django

Django 的 runserver 命令可以指定位址：

python manage.py runserver 0.0.0.0:8000

PHP 內建伺服器

PHP 內建開發伺服器可以這樣啟動：

php -S 0.0.0.0:8000

通用原則

不管你用什麼技術，找到程式啟動時設定監聽位址的地方，把 localhost 或 127.0.0.1 改成 0.0.0.0 就對了。通常這會在：

• 設定檔（config）
• 啟動命令的參數
• 程式碼中的 server.listen() 或類似函式

要點四：如何查詢自己的區網 IP

程式設定好監聽 0.0.0.0 之後，你需要知道電腦在區網中的實際 IP 位址，這樣手機才知道要連到哪裡。

Windows 查詢方法

方法一：使用命令提示字元

ipconfig

找到「無線區域網路介面卡 Wi-Fi」或「乙太網路介面卡」區塊，其中的「IPv4 位址」就是你的區網 IP：

無線區域網路介面卡 Wi-Fi:

   連線特定 DNS 尾碼 . . . . . . . :
   IPv4 位址 . . . . . . . . . . . : 192.168.1.105
   子網路遮罩 . . . . . . . . . . .: 255.255.255.0
   預設閘道 . . . . . . . . . . . .: 192.168.1.1

方法二：透過設定查看

1. 開啟「設定」→「網路和網際網路」
2. 點選目前連線的網路
3. 向下捲動找到「IPv4 位址」

Mac 查詢方法

方法一：使用終端機

ipconfig getifaddr en0

這會直接顯示你的區網 IP，例如：

192.168.1.105

如果用 WiFi，通常是 en0。如果用有線網路，可能是 en1。

你也可以用這個命令看到更完整的資訊：

ifconfig | grep "inet " | grep -v 127.0.0.1

方法二：透過系統偏好設定

1. 點選蘋果選單 →「系統偏好設定」→「網路」
2. 選擇目前連線的網路（WiFi 或乙太網路）
3. 右側會顯示「IP 位址」

Linux 查詢方法

# 方法一：使用 ip 命令（推薦）
ip addr show | grep "inet " | grep -v 127.0.0.1

# 方法二：使用 hostname
hostname -I

# 方法三：使用 ifconfig（較舊的系統）
ifconfig | grep "inet " | grep -v 127.0.0.1

區網 IP 的特徵

區網 IP（私有 IP）通常是以下格式開頭：

如果你看到的 IP 不是以上格式，可能查錯了位置。

注意：IP 會變動

區網 IP 通常是由路由器透過 DHCP 動態分配的，這意味著：

• 重新連線網路後，IP 可能會變
• 過一段時間後，IP 可能會被重新分配
• 不同網路環境下，IP 一定會不同

如果你希望 IP 固定不變，可以在路由器設定「DHCP 保留」或在電腦上設定「靜態 IP」。但對於開發測試來說，通常不需要這麼做，只要每次測試前確認一下 IP 就好。

要點五：防火牆設定：允許區網連線

即使程式正確監聽 0.0.0.0，你也找到了區網 IP，可能還是連不上。這是因為作業系統的防火牆可能擋住了連線。

Windows 防火牆設定

Windows 防火牆預設會擋住未知程式的外部連線。當你第一次在 0.0.0.0 上啟動程式時，Windows 通常會彈出視窗詢問是否允許。如果你不小心按了「拒絕」，就需要手動設定。

方法一：透過 Windows Defender 防火牆

1. 開啟「控制台」→「系統及安全性」→「Windows Defender 防火牆」
2. 點選左側「允許應用程式或功能通過 Windows Defender 防火牆」
3. 點選「變更設定」
4. 點選「允許其他應用程式」
5. 瀏覽找到你的開發工具（如 node.exe、python.exe）
6. 確認「私人」和「公用」都有勾選

方法二：新增輸入規則

如果你想開放特定 port：

1. 開啟「Windows Defender 防火牆」→「進階設定」
2. 選擇「輸入規則」→「新增規則」
3. 選擇「連接埠」→「下一步」
4. 選擇「TCP」，輸入要開放的 port（如 3000）
5. 選擇「允許連線」
6. 勾選「網域」、「私人」、「公用」（或只勾選「私人」更安全）
7. 輸入規則名稱（如「開發用 Port 3000」）

方法三：暫時關閉防火牆（不建議）

# 以系統管理員身份執行 PowerShell
netsh advfirewall set allprofiles state off

# 測試完畢後記得開啟
netsh advfirewall set allprofiles state on

Mac 防火牆設定

Mac 的防火牆預設是關閉的，但如果你有開啟：

1. 開啟「系統偏好設定」→「安全性與隱私」→「防火牆」
2. 點選鎖頭解鎖，輸入密碼
3. 點選「防火牆選項」
4. 確認沒有阻擋你正在使用的應用程式
5. 或勾選「自動允許內建軟體接收傳入連線」

也可以用終端機檢查防火牆狀態：

# 檢查防火牆狀態
sudo /usr/libexec/ApplicationFirewall/socketfilterfw --getglobalstate

# 暫時關閉防火牆（測試用）
sudo /usr/libexec/ApplicationFirewall/socketfilterfw --setglobalstate off

# 重新開啟防火牆
sudo /usr/libexec/ApplicationFirewall/socketfilterfw --setglobalstate on

Linux 防火牆設定（iptables / ufw）

使用 ufw（Ubuntu/Debian）

# 檢查狀態
sudo ufw status

# 允許特定 port
sudo ufw allow 3000/tcp

# 只允許區網連線
sudo ufw allow from 192.168.1.0/24 to any port 3000

使用 iptables

# 允許特定 port
sudo iptables -A INPUT -p tcp --dport 3000 -j ACCEPT

# 只允許區網
sudo iptables -A INPUT -p tcp --dport 3000 -s 192.168.1.0/24 -j ACCEPT

安全建議

開放防火牆時請注意：

1. 只開放需要的 port：不要開放太多或使用萬用規則
2. 限制來源 IP：可以只允許區網 IP 連線
3. 測試完記得復原：不需要時把規則移除
4. 注意網路環境：在公共網路時更要小心

要點六：手機連線測試

所有設定都完成後，來實際測試一下！

確認前置條件

在測試之前，確認以下事項：

手機連線步驟

1. 開啟手機的瀏覽器（Safari、Chrome 都可以）
2. 在網址列輸入：http://192.168.1.105:3000（換成你的實際 IP 和 port）
3. 按下 Enter

如果一切正常，你應該會看到跟電腦上一樣的頁面！

連線失敗的排查步驟

如果連不上，按照以下步驟排查：

Step 1：確認程式還在運行

回到電腦終端機，確認開發伺服器沒有當掉或被你不小心關掉。

Step 2：確認監聽位址

很多開發工具啟動時會顯示監聽位址：

  VITE v5.0.0  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.105:5173/    ← 有顯示這行才對

如果只有 Local 沒有 Network，表示沒有監聽 0.0.0.0。

Step 3：本機先測試區網 IP

在電腦的瀏覽器輸入 http://192.168.1.105:3000（用你的區網 IP）。如果本機用區網 IP 都連不上，那手機一定也連不上，問題出在程式設定或防火牆。

Step 4：檢查是否同一網路

確認手機和電腦連到同一個 WiFi。有時候手機可能自動切換到行動網路，或連到家裡另一個路由器。

Step 5：測試網路連通性

從手機 ping 電腦（需要特殊 App），或從電腦 ping 手機，確認兩台裝置可以互相通訊。

Step 6：檢查防火牆

暫時關閉防火牆測試，如果可以連了，問題就出在防火牆設定。

開發小技巧

使用 QR Code 快速開啟

每次手動輸入 IP 很麻煩，你可以產生 QR Code：

# 安裝 qrcode-terminal
npm install -g qrcode-terminal

# 產生 QR Code
qrcode-terminal "http://192.168.1.105:3000"

用手機掃描 QR Code 就能直接開啟網頁。

讓 Vite 自動顯示 QR Code

Vite 有套件可以自動產生 QR Code：

npm install vite-plugin-qrcode -D

// vite.config.js
import { defineConfig } from 'vite'
import { qrcode } from 'vite-plugin-qrcode'

export default defineConfig({
  plugins: [qrcode()],
  server: {
    host: '0.0.0.0'
  }
})

要點七：常見問題排解

在設定區網連線時，你可能會遇到一些問題。以下是常見問題和解決方案。

問題一：ERR_CONNECTION_REFUSED

症狀：手機顯示「拒絕連線」或「Connection Refused」

可能原因與解決方案：

1. 程式沒有在執行
   - 確認終端機中的開發伺服器還在運行

2. 監聽位址錯誤
   - 確認程式監聽 0.0.0.0 而非 127.0.0.1

3. Port 打錯
   - 確認手機輸入的 port 和程式監聽的 port 一致

4. 防火牆阻擋
   - 按前面說明設定防火牆

問題二：ERR_CONNECTION_TIMEOUT

症狀：手機長時間載入後顯示「連線逾時」

可能原因與解決方案：

1. 不在同一個區網
   - 確認手機和電腦連到同一個 WiFi

2. IP 位址錯誤
   - 重新確認電腦的區網 IP

3. 路由器設定問題
   - 有些路由器會隔離裝置互連（AP Isolation）
   - 登入路由器管理介面檢查此設定

問題三：區網 IP 一直在變

症狀：每次連線都要重新查詢 IP

解決方案：設定靜態 IP 或 DHCP 保留

Windows 設定靜態 IP：
1. 網路設定 → 變更介面卡選項
2. 右鍵 WiFi → 內容
3. 選擇「網際網路通訊協定第 4 版 (TCP/IPv4)」→ 內容
4. 選擇「使用下列的 IP 位址」
5. 填入固定 IP（如 192.168.1.100）
6. 子網路遮罩填 255.255.255.0
7. 預設閘道填路由器 IP（通常 192.168.1.1）

Mac 設定靜態 IP：
1. 系統偏好設定 → 網路
2. 選擇 WiFi → 進階 → TCP/IP
3. 設定 IPv4 選「手動」
4. 填入固定 IP

問題四：HTTPS 憑證問題

症狀：手機連到 HTTPS 頁面時顯示憑證警告

解決方案：

區網連線測試時，建議使用 HTTP。如果你的程式強制 HTTPS，可以：

1. 暫時改用 HTTP 測試
2. 或在手機上手動信任憑證（較麻煩）
3. 使用 ngrok 等工具，它們會提供有效的 HTTPS

問題五：手機可以連，但某些功能不正常

症狀：網頁可以顯示，但 API 呼叫失敗

可能原因：

1. CORS 問題
   - 瀏覽器可能阻擋跨域請求
   - 檢查開發伺服器的 CORS 設定

2. API 位址寫死 localhost
   - 檢查程式中是否有硬編碼 localhost 的 API 網址
   - 改用相對路徑或環境變數

3. Mixed Content
   - HTTPS 頁面無法載入 HTTP 資源
   - 統一使用 HTTP 或 HTTPS

如果這個步驟卡關，可以聯繫我們讓工程師直接幫你處理。

要點八：進階：讓外網也能連（公開上線）

區網連線只能讓同一個網路下的裝置存取。如果你想讓不在同一個網路的朋友、客戶，或任何人都能看到你的程式，就需要「公開上線」。

方法比較

使用 Ngrok 快速上線

Ngrok 是最快讓 localhost 公開的方式：

# 安裝 ngrok（Mac）
brew install ngrok

# 啟動 tunnel
ngrok http 3000

執行後會看到：

Forwarding    https://abc123.ngrok.io -> http://localhost:3000

把 https://abc123.ngrok.io 網址分享給任何人，他們就能看到你的程式了。

使用 Cloudflare Tunnel

如果需要更穩定的免費方案：

# 安裝 cloudflared
brew install cloudflare/cloudflare/cloudflared

# 快速 tunnel（無需帳號）
cloudflared tunnel --url http://localhost:3000

何時該正式部署？

雖然 Ngrok 和 Cloudflare Tunnel 很方便，但它們有限制：

• 免費版有流量限制
• URL 會隨機變動（除非付費）
• 需要保持電腦開機

如果你的程式需要長期穩定運作，建議正式部署到雲端平台：

• 前端專案：Vercel、Netlify（免費額度很充足）
• 後端專案：Railway、Render（有免費方案）
• 完整控制：AWS、GCP、VPS

程式只能在本機跑？

讓我們幫你從 localhost 走向全世界，把專案部署到雲端。

幫我上線

常見問題 FAQ

手機怎麼連到電腦的 localhost？

手機無法直接連到 localhost，因為 localhost 對每台裝置來說都是指自己。你需要：
1. 讓電腦程式監聽 0.0.0.0
2. 查詢電腦的區網 IP（如 192.168.1.105）
3. 確保手機和電腦在同一個 WiFi
4. 在手機瀏覽器輸入 http://192.168.1.105:3000

0.0.0.0 是什麼意思？

在監聽位址的語境中，0.0.0.0 代表「所有可用的網路介面」。當程式監聽 0.0.0.0:3000 時，它會接受來自任何 IP 的連線，包括：
- 本機 localhost（127.0.0.1）
- 本機區網 IP（如 192.168.1.105）
- 區網內其他裝置的連線

這與監聽 127.0.0.1 只接受本機連線不同。

為什麼區網 IP 會變？

區網 IP 通常是由路由器透過 DHCP 動態分配的。以下情況可能導致 IP 變動：
- 路由器重新啟動
- 電腦重新連線網路
- DHCP 租約到期並重新分配
- 區網中裝置數量變化

如果你需要固定 IP，可以在路由器設定「DHCP 保留」，或在電腦上設定「靜態 IP」。

延伸閱讀

想深入了解 localhost 相關主題？推薦閱讀：

• Localhost 是什麼？完整入門指南
• Localhost 常用 Port 對照表
• Localhost 拒絕連線？5 種原因與解決方法
• Ngrok 教學｜一鍵讓 Localhost 變成公開網址
• Cloudflare Tunnel 教學｜免費讓本機程式上線

程式只能在本機跑？

讓我們幫你從 localhost 走向全世界，把專案部署到雲端。

幫我上線

圖片描述

圖片一：localhost vs 區網連線示意圖

建議位置：要點一章節內

圖片規格：
- 尺寸：1200 x 675 px
- 格式：WebP
- 檔名：localhost-vs-lan-connection.webp

視覺內容描述：
左側顯示一台電腦圖示，上方有「127.0.0.1」標籤，箭頭指向自己，標示「只能自己存取」。右側顯示同一台電腦但標籤為「0.0.0.0」，有多個箭頭分別來自：本機瀏覽器圖示、手機圖示、另一台電腦圖示，所有箭頭都連到這台電腦，標示「接受區網連線」。整體使用深色背景，圖示使用亮色線條風格，文字清晰可讀。

Alt 文字：localhost 127.0.0.1 只能本機存取，0.0.0.0 可接受區網裝置連線

圖片二：區網 IP 查詢方式對照表

建議位置：要點四章節內

圖片規格：
- 尺寸：1200 x 675 px
- 格式：WebP
- 檔名：lan-ip-lookup-methods.webp

視覺內容描述：
三欄式設計，分別標示 Windows、Mac、Linux。每欄顯示各系統的查詢命令和模擬的終端機輸出畫面。Windows 欄位顯示 ipconfig 命令和 IPv4 位址的結果。Mac 欄位顯示 ipconfig getifaddr en0 命令和結果。Linux 欄位顯示 ip addr show 命令和結果。底部有共通提示：「區網 IP 通常以 192.168.x.x 或 10.x.x.x 開頭」。深色終端機風格背景。

Alt 文字：Windows、Mac、Linux 三種作業系統的區網 IP 查詢命令對照

圖片三：防火牆設定步驟圖

建議位置：要點五章節內

圖片規格：
- 尺寸：1200 x 800 px
- 格式：WebP
- 檔名：firewall-settings-steps.webp

視覺內容描述：
Windows Defender 防火牆的設定流程截圖或示意圖。Step 1：開啟 Windows Defender 防火牆的畫面。Step 2：點選「允許應用程式或功能通過」的選項標示。Step 3：「允許其他應用程式」按鈕標示。Step 4：找到 node.exe 或開發工具的列表項目，並勾選「私人」和「公用」選項。每個步驟使用紅色圓圈標號和箭頭指示。

Alt 文字：Windows 防火牆設定允許開發伺服器通過的四個步驟圖解

圖片四：手機連線測試流程圖

建議位置：要點六章節內

圖片規格：
- 尺寸：1200 x 675 px
- 格式：WebP
- 檔名：mobile-connection-test-flow.webp

視覺內容描述：
流程圖設計。起點是「手機開啟瀏覽器」圖示，箭頭指向「輸入 http://192.168.x.x:3000」步驟。接著分岔：成功路徑顯示打勾符號和「看到網頁內容」；失敗路徑顯示叉叉符號，連接到排查清單：「1. 確認程式運行中」「2. 確認監聽 0.0.0.0」「3. 確認同一 WiFi」「4. 確認防火牆設定」。整體使用簡潔的流程圖風格，淺色背景配深色線條。

Alt 文字：手機連線到電腦 localhost 的測試流程與錯誤排查步驟