從任何地方訪問本地主機

您花了好幾個小時在本地電腦上工作，將新網站設計調整得恰到好處。您的CMS已經妥善設置了示例內容，您想要在幾款移動設備和平板電腦上測試它。您的客戶也想看看——但您沒有時間將所有內容遷移到公共服務器上，以便讓他們快速預覽。

如果您是一名網頁開發者，很可能您已經多次遇到這種情況。而且在那些時候，您可能不得不熬夜將項目遷移到一個面向公眾的服務器上，希望有更簡單的方法。

對於那些疲憊不堪的網頁開發者來說，我在此告訴您，一個更簡單的方法已經到來！事實上，有許多應用程序和服務可以幫助簡化這一過程，通過提供從Web訪問您的localhost的方式。在本文中，我將討論以下幾個工具：

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

關鍵要點

如何從任何地方存取本地主機？

透過安全隧道服務即可實現！這些線上服務提供了一條從網際網路到您機器的隧道。

這意味著它們提供了一個公開可達的URL，監聽該URL上的呼叫，並將這些呼叫轉發至您的本地主機伺服器。所有複雜的設定已為您完成；您只需安裝一個應用程式並將其指向您的本地主機。

A Note About Using Virtual Hosts

在我的本地主機上，我已設置虛擬主機。若未將以下每項服務的地址列為ServerAlias，我的伺服器將拒絕正常運作。經歷了數小時的困惑。若您也遇到相同情況，請在您的httpd.conf中新增一個ServerAlias，並將下方ngrok地址替換為您所使用服務的地址：

<VirtualHost *:80>
  DocumentRoot "/Users/patcat/Web"
  ServerName mytestsite.test
  ServerAlias 350c0f8e.ngrok.com
</VirtualHost>

ngrok

ngrok 是一款適用於Windows、macOS和Linux的應用程序，它不僅能建立隧道，還允許您檢查通過該隧道的所有流量，並重播這些流量以進行測試。

您可以免費使用基本功能，然後註冊以訪問更多高級功能。若要使用自定義子域和保留域，您需要註冊付費計劃。否則，您將能夠使用該服務，但會被分配一個隨機域名，例如上述虛擬主機示例中的350c0f8e.ngrok.com URL。

截至2021年5月，Ngrok的計劃如下：

ngrok的一個主要優勢是它沒有任何依賴性。您只需安裝ngrok並運行它，無需其他任何東西。

如何使用ngrok

訪問ngrok.com，下載壓縮包並將其解壓到您希望ngrok在您的計算機上存在的任何位置。以下是基本步驟，但如果您需要更多細節，我們還有另一篇文章關於“如何使用ngrok共享本地開發網站”。

打開命令行終端並轉到您解壓ngrok的文件夾。運行以下命令以在端口80上創建到您本地主機的隧道：

./ngrok http 80

您將看到如下屏幕：

在上面的示例中，我們已將流量導向一個隨機生成的ngrok地址http://42e474ef9799.ngrok.com，並將其轉發到我們本地主機的127.0.0.1:80。

在任何具備網路連線的裝置上開啟該URL，即可從網際網路存取您的本地主機！

ngrok提供的獨特功能之一是能夠檢查過往流量。要進行此操作，請在您的電腦上前往http://localhost:4040/。您將進入一個儀表板，顯示進入的請求。您可以點擊左側的每個請求，並在右側查看標頭和其他數據的詳細信息。我最喜歡的使用方式是查看請求返回的JSON數據。當載入一個簡單的HTML頁面時，這個基本佈局看起來像這樣：

您甚至可以通過點擊右側的重播按鈕來重放請求。這將在隧道中重新運行請求。

ngrok的高級功能

密碼保護允許您防止公眾中的隨機成員訪問您的網站：

ngrok http -auth="username:password" 80

自訂子域名適用於當您不想記住那個隨機生成的URL時！如果您註冊了付費的ngrok計劃，您可以保留一個子域名，以便其他人無法占用。以下允許您在nogophersinmytunnel.ngrok.com上查看您的本地主機：

ngrok http -subdomain nogophersinmytunnel 80

自訂域名適用於當您更希望在隧道項目的URL中不包含“ngrok”時。付費計劃允許您使用自己的域名，而不必使用ngrok.com：

ngrok http -hostname="tunnel.yourdomain.com" 80

您甚至可以將隧道指向本地網絡上本來無法從外部世界訪問的IP地址：

ngrok http 192.168.0.27:80

或者您可以為其他非HTTP服務創建隧道：

ngrok tcp 22

您可以進行多項操作，從同時運行多個隧道到創建配置文件以保存這些設置供將來使用。

要了解所有可能的功能，請參閱ngrok的文檔。

PageKite

PageKite是一款基於Python的“動態隧道式反向代理”，適用於Windows、macOS、Linux甚至Android設備！它與ngrok非常相似，但已存在更長時間，並且對於更廣泛的用途似乎經過了更多的實戰檢驗。他們甚至使其兼容Minecraft協議，允許人們在本地機器上運行Minecraft服務器。

您可以註冊一個月的免費試用，享受2.5GB的傳輸配額。之後，採用“按需付費”系統（最低每月USD$4，或如果您從事免費開源軟件則免費）。在這種情況下，您確實需要支付更多才能獲得更多，支付較多金額的用戶將獲得更大的配額、更長的服務期限、自定義子域名等。

PageKite似乎沒有像ngrok那樣的流量檢查器，但它確實具有一些令人難以置信的功能，如內置防火牆，可阻止對/wp-admin、/xampp、phpMyAdmin頁面等常見攻擊目標的訪問…等等。如果您願意，可以禁用這些公開功能。

他們甚至在澳大利亞悉尼設有前端中繼服務器，這可能為澳大利亞開發者提供更快的速度。

如何使用PageKite

前往PageKite.net下載適用於您操作系統的版本。Windows用戶需先確保已安裝Python。對於macOS和Linux用戶，可直接透過命令行使用cURL命令進行安裝。

下載後，運行以下命令以啟動通往本地伺服器的隧道。您可以選擇一個特定的子域名，每次使用（而非ngrok的隨機分配）。這裡我選擇了hurrygetintothefancytunnel：

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

最近在我的Mac上，我發現需要在前面加上python3才能運行，如果上述方法不奏效，可以嘗試這樣做：

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

運行過程中，如果您尚未註冊該服務，它會引導您完成註冊。之後，您的本地伺服器就能向全世界開放了！

PageKite的高級功能

PageKite還具備一些更為出色的附加功能。

例如：無需網頁伺服器。若您未運行伺服器，它內建的網頁伺服器能夠運行您的靜態文件，如下所示：

pagekite.py /path/to/folder igotthattunnelvision.pagekite.me

與ngrok類似，您可以通過密碼限制訪問：

pagekite.py 80 terelekkayatuneli.pagekite.me +password/username=password

或通過IP地址限制訪問：

pagekite.py 80 arcadefirecamethroughmywindow.pagekite.me +ip/1.2.3.4=ok +ip/4.5.6=ok

如前所述，您甚至可以在手機上運行這一切。我在Android上安裝了一個名為kWS的網頁伺服器，然後使用PageKite將其暴露於網絡：

雖然這不是我每天都會做的事情，但看到現在僅憑智能手機就能實現這些功能，確實令人印象深刻！

與ngrok相似，PageKite能同時建立多個隧道，並支援使用自有網域，還能為隧道設定配置文件。更多相關資訊，請查閱其快速入門指南及更詳盡的操作指南。

localtunnel

localtunnel是一項隧道服務，最初是以Node.js構建，但亦有基於Go語言和C#/.NET的客戶端版本。

如何使用localtunnel

您可以像安裝大多數npm套件一樣，將其全域安裝於您的裝置上：

npm install -g localtunnel

若要啟動一個連接至本地端口80的隧道，請執行以下命令：

lt --port 80

操作方式與ngrok和PageKite類似！它會提供一個類似於我所獲得的子網域：https://loud-ladybug-21.loca.lt。

首次運行localtunnel時，您會收到一個友好的提醒，告知此操作將使您的資源公開於網路上。只需點擊繼續即可。

localtunnel的高級功能

在此，獲取一個免費的自訂子網域是完全可行的，只要該子網域尚未被佔用。若要使用自訂子網域，只需在命令中加入--subdomain參數：

lt --port 80 --subdomain platypusestunneltoo

localtunnel提供的一項非常便利的功能是Node API，允許您透過JavaScript生成localtunnels，用於自動化測試中：

const localtunnel = require('localtunnel');

(async () => {
  const tunnel = await localtunnel({ port: 3000 });

  // 您的隧道URL將顯示為 tunnel.url

  tunnel.on('close', () => {
    // 隧道關閉後執行某項操作
  });
})();

boringproxy

boringproxy 是一個全新的選擇，完全免費且開源，基於MIT許可證！其主要焦點似乎是讓人們更容易在自己的電腦上自託管網站。它以單一可執行文件的形式提供，兼具伺服器和客戶端功能。提供了適用於多種Linux系統和Windows的可執行文件。macOS則標記為“未經測試”。我自己還未能在Mac上成功運行它，但如果您有Linux系統或Raspberry Pi，這可能正是您需要的解決方案。所有代碼均用Go編寫，並歡迎貢獻者參與。

其主要特點簡述如下：

• 100%免費且開源，基於MIT許可證
• 可完全自託管
• 內建反向代理
• 支持自定義域名/子域名

如何使用 boringproxy

主要步驟最易於參照boringproxy文檔，因為不同平台操作有所不同。

大致步驟包括：

• 通過curl下載伺服器實例（例如，curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64）
• chmod 指令賦予下載的執行檔可執行權限（例如：chmod +x boringproxy-linux-x86_64）
• 設定綁定至埠號 80 和 443（例如：sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64）
• 在客戶端也設置執行檔

創建者提供的此視頻最佳地涵蓋了操作方法

無聊代理的高級功能

自動 HTTPS 證書 透過 Let’s Encrypt 自動管理，無需擔心測試用證書，一切在幕後進行。

網頁介面配置 自動設置，讓您管理用戶、存取令牌及隧道。

您可以輕鬆地隧道化網路應用。自行託管網路應用如 Etherpad（如上述視頻所示），為其分配子域名，即可從任何地方存取。

BrowserStack

BrowserStack 提供自動化截圖和虛擬機，用於測試您的網站在各種設備和瀏覽器上的表現。若您需要存取 localhost 進行測試，BrowserStack 可能會引起您的興趣。

您可以使用上述方法在 BrowserStack 虛擬機中測試 localhost 網站，但它也提供了 Chrome 和 Firefox 的瀏覽器擴展，允許您從其伺服器提供 localhost 存取。

然而，此功能僅適用於BrowserStack服務，並不對公眾開放。BrowserStack提供免費試用，之後若要繼續使用則需支付月費。對於僅為設備測試而需訪問localhost的情況，此服務將非常實用。

如何使用BrowserStack

前往BrowserStack.com註冊試用。他們網站上對本地測試的流程有詳盡的文檔，若您有意採用此方法，不妨詳讀一番。

最終，它將允許您在網絡上運行的虛擬機中測試您的localhost網站，如下所示：

偏愛之選

在嘗試了所有這些選項後，個人最喜歡的當屬ngrok和PageKite。

PageKite看似是最多才多藝的解決方案，潛力巨大。多年來，它已被開發並擴展以適應各種用途，成為一款真正令人印象深刻的應用！

ngrok同樣出色，以其簡潔性和流量檢查器而聞名。對於大多數希望從網絡訪問其localhost的網頁開發者來說，它提供的功能已綽綽有餘。

總結

若您的電腦已連接互聯網，現在您可以在短短幾分鐘內從世界任何地方設置對localhost的訪問！起步極為簡單，正如您所見，解決方案多不勝數！

您是否使用過這些服務？您還有其他偏好的選擇嗎？我很想知道您的看法在Twitter上！

 

關於從任何地方訪問localhost的常見問題