實用的 localhost 分享指南
使用 Cloudflare 與 GhostlyShare 公開 localhost
當客戶需要預覽、Webhook 供應商需要回調 URL,或您想在手機開啟開發伺服器時,需公開本地運行的 URL。本指南先介紹終端機為主的 Cloudflare 方案,再說明 GhostlyShare 重複分享流程。
快速決策
使用符合分享需求的工具
錯誤在於將每個本地預覽當作主機。隧道適合臨時存取,GhostlyShare 適合常態流程,正式部署適合用戶依賴的 URL。
使用 cloudflared.exe
安裝 Cloudflare 隧道客戶端一次,執行一條指令,複製臨時 URL,然後用 Ctrl+C 停止。
使用 GhostlyShare
讓桌面應用偵測本地服務,開始分享、顯示準備狀態、複製 URL,並可停止存取,無需翻找終端機輸出。
部署應用程式
若 URL 需持續運作、監控、備份、穩定發布或支援責任,筆電隧道非正確的可靠性邊界。
方法一
Cloudflare EXE:最快速且乾淨的命令列流程
Cloudflare 的隧道客戶端稱為 cloudflared。Windows 可用 winget 安裝或手動下載 EXE。短期開發預覽可用 Quick Tunnel,無需路由器轉發埠號、Cloudflare DNS 區域或自訂網域,隨機產生 HTTPS URL。
啟動本地應用程式
先在瀏覽器開啟本地 URL,若應用無法本地運作,公開隧道無法解決。
npm run dev
在 Windows 安裝 cloudflared
Use winget when it is available. If you download the EXE manually, place it in a folder such as C:\Cloudflared\bin and call it cloudflared.exe.
winget install --id Cloudflare.cloudflared
建立公開 URL
Use the exact local HTTP URL and port. In PowerShell from the EXE folder, use .\cloudflared.exe if the executable is not on PATH.
cloudflared.exe tunnel --url http://localhost:5173
分享前先測試
在隱私視窗或其他裝置開啟產生的 trycloudflare.com URL,檢查登入、資源、重定向與 API 呼叫,再分享給他人。
https://example-random-name.trycloudflare.com
刻意停止隧道
示範或 webhook 測試結束後,請停止終端機程序。若機器進入睡眠或斷線,快速隧道也會停止運作。
Ctrl+C
穩定的預覽名稱
隨機 URL 還是自訂 Cloudflare 主機名稱?
隨機 URL 適合測試後可消失的連結。自訂網域適合需穩定外觀的預覽,如 demo.example.com,且您已在 Cloudflare 管理該網域。
| 需求 | 使用 | 適用原因 |
|---|---|---|
| 五分鐘示範或 webhook 回調 | 隨機 URL | 無需帳號或 DNS 設定,測試後連結易於丟棄。 |
| 客戶評價需具品牌風格 | 自訂網域 | 您控制的主機名稱較易辨識,但需設定 Cloudflare 區域、權杖權限、DNS 與隧道路由。 |
| 不宜隨意開啟的預覽 | 密碼保護連結 | 公開前先設定密碼,並將 URL 與密碼分別分享給需要的小群組。 |
其他選項
公開 localhost 的其他方法
您不必為每種情況使用同一工具。最佳選擇取決於您需要一次性連結、桌面流程、品牌化預覽、私有網路工具,或刻意強化的自我主機方案。
| 工具 | 典型指令或操作 | 適用對象 | 注意 |
|---|---|---|---|
| Cloudflare 快速隧道 | cloudflared tunnel --url http://localhost:5173
|
快速且可丟棄的公開 HTTPS URL,無需更改路由器設定。 | 僅限開發與測試;隨機 URL;終端機生命週期。 |
| GhostlyShare | 在桌面應用選擇公開
|
重複本地預覽、webhook 測試、密碼保護示範及可選 Cloudflare 自訂網域。 | 仍非正式主機;本地應用與機器必須持續運作,連結才會有效。 |
| ngrok | ngrok http 5173
|
團隊已使用 ngrok、保留網域、流量檢查及供應商特定路由功能。 | 帳戶與方案細節重要,需較多供應商設定,非一次性快速隧道。 |
| Tailscale Funnel | tailscale funnel 3000
|
已使用 Tailscale 且想為 tailnet 裝置提供公開 HTTPS 端點的人。 | 需設定 Tailscale 並啟用 tailnet 的 Funnel。 |
| localtunnel | npx localtunnel --port 3000
|
基於 Node 的快速 localhost 分享,適合簡單測試。 | 適合簡單預覽;敏感內容請謹慎使用。 |
| 路由器埠轉發 | 設定路由器、DNS、TLS 與反向代理
|
當您有意經營基礎架構時的永久自我主機方案。 | 攻擊面更大;修補、設定防火牆規則、日誌與 TLS 成為您的責任。 |
Webhook 測試
節省 webhook 時間的細節
Webhook 供應商無法呼叫您筆電上的 http://localhost,只能呼叫公開隧道 URL。請將該 URL 視為真正的外部整合:保持簽章啟用,使用完整回調路徑,並檢查重定向與 CORS。
使用完整回調路徑
若接收端監聽 /api/webhooks/stripe,請貼上包含該路徑的公開 URL,而非僅域名。
保持簽章驗證啟用
公開隧道方便測試真實 webhook 簽章,但不應因此關閉簽章驗證。
注意基底 URL 與轉發標頭
若公開 URL 重新導向回 localhost,請設定公開基底 URL、轉發標頭、信任代理或框架主機設定。
從乾淨的瀏覽器分頁測試
使用隱私視窗或第二裝置,避免快取的 localhost 狀態遮蔽 Cookie、CORS、重定向或混合內容問題。
故障排除
先解決常見隧道問題
隧道啟動,但頁面空白
直接開啟本地 URL,檢查資源、API URL、WebSocket URL 或環境變數是否仍指向 localhost。
公開 URL 重新導向到 localhost
許多框架會根據請求主機建立重定向,請修正轉發標頭、信任代理、公開原點或強制開發重定向。
連結先出現,功能稍後生效
Cloudflare 路由、DNS、GhostlyShare 本地代理與原始應用程式可能需短暫時間同步,請稍候幾秒,重新整理並再次測試。
HTTPS localhost 證書導致錯誤
短期預覽時,盡量隧道本地 HTTP 端點。長期部署則應有意設定原點 TLS,避免猜測。
熱重載或 WebSockets 失敗
使用支援 WebSockets 的工具,並確保應用程式從公開主機建立 ws 或 wss URL,而非硬編 localhost。
安全性
發送公開 URL 前
公開預覽 URL 仍屬公開存取,密碼保護可減少誤入,但無法保障風險服務安全。請分享最精簡的 URL,使用測試資料,並於評審或 webhook 測試後停止連結。
使用測試資料
請勿公開真實客戶資料、資料庫管理介面、內部儀表板、種子密鑰或公司機密資料。
保持應用程式認證啟用
功能若通常需登入,公開預覽時仍應要求登入。
私密預覽請使用密碼保護
小型評審群組請於公開前設定 GhostlyShare 密碼,並與連結分開分享。
停止並輪替連結
使用後停止臨時連結。若 URL 或密碼洩漏至工單或聊天,請建立新預覽,勿重複使用。
常見問題
常見問題
Windows 的正確指令是什麼?
安裝 cloudflared 後,執行 cloudflared.exe tunnel --url http://localhost:PORT,將 PORT 替換為應用程式本地埠號,如 5173、3000、5080 或 8080。
GhostlyShare 僅是 cloudflared 的包裝器嗎?
不是。GhostlyShare 使用 Cloudflare 隧道,但增加桌面流程,包含應用偵測、隨機或自訂公開連結、準備狀態、停止存取及可選密碼保護。
GhostlyShare 能否為公開連結設定密碼保護?
是。公開前啟用密碼保護,訪客需輸入密碼後,GhostlyShare 才會轉發流量至選定的本地應用,但這仍無法取代完善的應用安全。
我需要設定路由器埠轉發嗎?
本指南的隧道流程不需。cloudflared、GhostlyShare、ngrok、Tailscale Funnel 等工具會從您的機器開啟外部連線,通常不需路由器入站轉發。
我可以透過本地隧道測試 webhook 嗎?
是。啟動本地 webhook 接收器,透過隧道公開,將公開 HTTPS URL 及正確回調路徑貼給供應商,發送測試事件並在本地檢查請求。
我應該公開管理工具或資料庫嗎?
通常不建議。除非刻意強化且設計為可從網際網路存取,否則請勿公開資料庫控制台、管理儀表板、基礎架構面板、除錯端點或內部服務。
我應該用筆電隧道處理正式流量嗎?
不是。請使用真正部署或管理的隧道,運行於設計持續在線、可更新、監控及故障恢復的基礎架構。