如何讓 Localhost 上線？5 種方法讓別人看到你的本機程式

引言：從自己電腦到全世界

你是不是有過這樣的困擾：

• 程式在自己電腦跑得好好的，但客戶想看怎麼辦？
• Line Bot 開發需要 Webhook，但 localhost 收不到？
• 想讓設計師同事看看網站進度，但他連不到你的電腦？

Localhost 只活在你的電腦裡，外界是看不到的。但別擔心，這篇文章會教你 5 種方法，讓任何人都能看到你的本機程式。

要點一－為什麼 Localhost 別人看不到？

在講解決方案前，我們先理解問題的本質。

127.0.0.1 只對你自己有效

當你打開 localhost 或 127.0.0.1，其實是訪問一個只存在你電腦裡的虛擬地址。

它的設計初衷就是：

• 隔離測試環境：讓程式在本機安全運行
• 避免外部干擾：開發時不會被外界請求打斷
• 不需網路設定：localhost 不經過任何路由器或防火牆

這就像你家有一條只通往自己房間的密道，外人根本不知道有這條路存在。

區網 vs 外網

即使你的電腦在公司區網裡有 IP（例如 192.168.1.100），同事可能可以透過這個 IP 看到你的程式，但：

• 需要在同一個區域網路
• 需要你的防火牆允許連入
• 離開公司就連不到了

而外網的人（像是客戶、遠端同事）完全沒辦法連到你的區網 IP。

NAT 和防火牆的限制

大多數網路環境都有：

這些機制保護了你的電腦，但也讓「讓別人看到 localhost」變得複雜。

要點二－什麼情況需要讓 Localhost 上線？

不是每次都需要把程式放到正式伺服器。以下情況用「臨時上線」就夠了：

給客戶或團隊展示

最常見的需求！程式還沒完成，但想讓客戶先看看進度：

• 網站前端進度展示
• App 介面審核
• 功能原型 Demo

這時候只需要一個臨時網址，用完就關掉。

Webhook 測試

很多第三方服務需要呼叫你的 API：

• Line Bot：需要 Webhook URL 接收訊息
• Stripe 金流：需要接收付款通知
• GitHub Actions：需要觸發你的 CI/CD

這些服務要從外部呼叫進來，localhost 完全收不到。

跨裝置測試

想用手機測試網站？或讓同事在他電腦上看？

• 手機測試 RWD
• 不同瀏覽器測試
• 多人同時測試

如果每次都部署到正式環境太麻煩了。

臨時分享 vs 正式上線

如果你需要長期穩定、自訂網域、SEO 優化，就應該正式部署到雲端。

要點三－方法一：Ngrok（最簡單）

Ngrok 是最多人用的本機穿透工具，原因很簡單：一行指令就能搞定。

Ngrok 是什麼？

Ngrok 會在你的電腦和它的雲端伺服器之間建立一條加密隧道，然後給你一個公開網址。

你的電腦 (localhost:3000)
    ↓ 隧道
Ngrok 伺服器
    ↓
公開網址 (https://abc123.ngrok.io)
    ↓
任何人都能訪問

安裝與使用

1. 下載並安裝

# macOS (使用 Homebrew)
brew install ngrok

# Windows (使用 Chocolatey)
choco install ngrok

或到 ngrok.com 下載。

2. 註冊帳號並設定 Token

ngrok config add-authtoken YOUR_TOKEN

3. 啟動隧道

假設你的程式跑在 port 3000：

ngrok http 3000

立刻就會得到一個網址：

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

免費版限制

免費版對於開發測試來說通常夠用。

💡 ngrok 設定遇到問題？ 可以聯繫我們讓工程師直接幫你處理。

要點四－方法二：Cloudflare Tunnel（免費穩定）

如果你需要免費且穩定的方案，Cloudflare Tunnel 是最佳選擇。

為什麼選 Cloudflare？

• 完全免費（包含自訂網域）
• 企業級穩定度
• 自帶 SSL 和 DDoS 防護
• 網址永久有效（不會每次重啟就換）

快速開始

1. 安裝 cloudflared

# macOS
brew install cloudflare/cloudflare/cloudflared

# Windows
# 下載 https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation

2. 快速隧道（不需登入）

cloudflared tunnel --url http://localhost:3000

這會產生一個 *.trycloudflare.com 的臨時網址，適合快速測試。

3. 正式設定（需登入）

如果要使用自己的網域：

# 登入 Cloudflare
cloudflared tunnel login

# 建立 Tunnel
cloudflared tunnel create my-tunnel

# 設定路由到你的網域
cloudflared tunnel route dns my-tunnel dev.yourdomain.com

# 啟動
cloudflared tunnel run my-tunnel

Cloudflare vs Ngrok

要點五－方法三：Localtunnel（完全免費）

不想註冊任何帳號？Localtunnel 最適合你。

特色

• 不需註冊
• 開源免費
• 一行指令

使用方式

# 安裝
npm install -g localtunnel

# 使用
lt --port 3000

會得到網址像是：https://your-random-name.loca.lt

自訂子網域

lt --port 3000 --subdomain myproject
# 網址：https://myproject.loca.lt

限制

• 穩定度不如商業方案
• 有時需要通過驗證頁面
• 不適合生產環境

適合臨時快速分享使用。

要點六－方法四：VS Code Port Forwarding

如果你用 VS Code 開發，內建的 Port Forwarding 非常方便。

啟用步驟

1. 開啟 VS Code 的 Terminal
2. 點擊下方面板的 PORTS 分頁
3. 點擊 Forward a Port
4. 輸入你的 port（例如 3000）

VS Code 會自動建立隧道，給你一個 *.devtunnels.ms 網址。

設定公開權限

預設是 Private（需要登入 GitHub），如果要讓任何人都能看：

1. 右鍵點擊 port
2. 選擇 Port Visibility → Public

優點

• 零設定：VS Code 使用者直接可用
• 整合良好：開發環境直接操作
• 免費：GitHub 帳號就能用

缺點

• 必須使用 VS Code
• 穩定度取決於微軟服務

要點七－方法五：部署到雲端平台（正式上線）

如果你需要長期對外服務，以上方案都不適合。你需要正式部署到雲端。

前端靜態網站

如果是 React、Vue、Next.js 等前端專案：

後端 API / 全端應用

部署基本流程

1. 程式碼上 Git：推到 GitHub/GitLab
2. 連接平台：授權存取 repo
3. 設定環境：設定環境變數、build 指令
4. 自動部署：推送就會自動更新

💡 想正式部署到雲端但覺得很複雜？ 可以參考我們的部署服務，讓工程師協助你完成部署。

要點八－5 種方法比較表

讓我們整理這 5 種方法的優缺點：

一張圖看懂選擇

需要讓別人看到 localhost？
         │
         ▼
    正式對外服務？
    ├─ 是 → 雲端部署（Vercel/Railway）
    │
    └─ 否（臨時/測試）
         │
         ▼
    需要自訂網域？
    ├─ 是 → Cloudflare Tunnel
    │
    └─ 否
         │
         ▼
    想要最簡單？
    ├─ 是 → Ngrok
    │
    └─ 用 VS Code？ → VS Code Port Forward

要點九－該選哪種方法？決策指南

根據你的情境，我給出具體建議：

情境 1：給客戶看 Demo

推薦：Ngrok

ngrok http 3000

複製網址給客戶，Demo 完關掉即可。

情境 2：Line Bot / Webhook 測試

推薦：Ngrok 或 Cloudflare Tunnel

兩者都支援 HTTPS，Line 等服務要求 HTTPS 才能接收 Webhook。

情境 3：需要長期穩定的測試網址

推薦：Cloudflare Tunnel

設定一次，網址永久有效，不用每次重新產生。

情境 4：準備正式上線

推薦：部署到雲端

Vercel（前端）或 Railway（全端）都有免費方案，適合初期使用。

情境 5：不想裝任何東西

推薦：VS Code Port Forwarding（如果你用 VS Code）

完全零設定，點幾下就能用。

程式只能在本機跑？

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

幫我上線

常見問題 FAQ

Q1：如何讓別人連到我的 localhost？

使用 Ngrok 或 Cloudflare Tunnel 等穿透工具，建立一條通道讓外部可以連進來。最簡單的方式是執行 ngrok http 3000，會立即得到一個公開網址。

Q2：Ngrok 和 Cloudflare Tunnel 哪個好？

Ngrok 最簡單，一行指令就能用；Cloudflare Tunnel 完全免費且支援自訂網域。如果只是臨時分享選 Ngrok，如果需要長期使用或自訂網域選 Cloudflare。

Q3：臨時分享和正式上線有什麼差異？

臨時分享（穿透工具）是把你電腦的程式透過隧道公開，電腦關機就無法連線。正式上線是把程式部署到雲端伺服器，24/7 運行，可以綁定網域、設定 SEO。

Q4：免費上線方案有哪些？

• 前端網站：Vercel、Netlify、GitHub Pages（完全免費）
• 後端 API：Railway（每月 $5 免費額度）、Render（有免費方案）
• 穿透工具：Cloudflare Tunnel、Localtunnel（完全免費）

延伸閱讀

• Localhost 是什麼？127.0.0.1 完整指南
• Ngrok 教學｜一鍵讓 Localhost 變成公開網址
• Cloudflare Tunnel 教學｜免費讓本機程式上線
• Localhost 轉正式上線｜從本機到雲端部署完整流程

程式只能在本機跑？

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

幫我上線

圖片描述

插圖 1：本機上線概念圖
- 檔名 slug: localhost-online-concept
- 圖片類型: 概念示意圖
- 主要視覺元素:
- 左側：電腦顯示 localhost:3000 的畫面
- 中央：多條彩色隧道/通道圖示
- 右側：地球圖示代表網際網路
- 文字標註: "localhost:3000"、"Tunnel"、"Internet"、各種工具名稱
- 色調與風格: 藍綠色調科技風格
- 構圖建議: 水平三段式構圖，清楚顯示本機→隧道→網路的流程

插圖 2：NAT 與防火牆示意圖
- 檔名 slug: nat-firewall-diagram
- 圖片類型: 網路拓撲圖
- 主要視覺元素:
- 左側：電腦圖示（標示 localhost 和區網 IP）
- 中央：路由器和防火牆圖示（含鎖頭符號）
- 右側：雲端圖示代表外網
- 文字標註: "192.168.1.100"、"NAT"、"Firewall"、紅色 "X" 標示阻擋
- 色調與風格: 技術圖表風格，使用紅色標示阻擋區域
- 構圖建議: 左右對稱配置，箭頭顯示連線方向

插圖 3：Ngrok vs Cloudflare 比較圖
- 檔名 slug: ngrok-vs-cloudflare
- 圖片類型: 比較資訊圖
- 主要視覺元素:
- 左側：Ngrok 品牌區塊
- 右側：Cloudflare 品牌區塊
- 中央：對照表格
- 文字標註: 各項特點對比、綠色勾勾和灰色叉叉
- 色調與風格: 資訊圖表風格，清晰對比
- 構圖建議: 雙欄並排設計，底部附選擇建議

插圖 4：方法選擇決策樹
- 檔名 slug: localhost-method-decision-tree
- 圖片類型: 流程決策圖
- 主要視覺元素:
- 樹狀結構從頂部開始
- 每個節點是選擇問題
- 葉節點是推薦方法
- 文字標註: 問題文字、是/否選項、最終推薦工具名稱
- 色調與風格: 清晰簡潔的流程圖風格，使用不同顏色區分路徑
- 構圖建議: 垂直樹狀結構，適當使用顏色區分不同決策路徑