从任何地方访问本地主机

您已经在本地计算机上花费了数小时，精心调整新网站设计，使其看起来恰到好处。您的CMS已妥善配置，填充了示例内容，现在您希望在几款移动设备和平板上进行测试。客户也想预览一下——但您没有时间将其迁移到公共服务器上，以便他们快速查看。

如果您是一名网页开发者，很可能多次遇到这种情况。您可能在这些时刻熬夜加班，将项目迁移到面向公众的服务器上，渴望有一种更简便的方法。

对于那些疲惫的网页开发者们，我要告诉你们，一个更简便的方法已经到来！实际上，有一系列应用和服务能够通过提供从Web访问本地主机的功能，帮助简化这一流程。本文将讨论的应用包括：

• 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，即可通过Web访问您的本地主机！

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的传输配额。之后，它采用“按需付费”系统（最低每月4美元，或如果您从事免费开源软件工作则免费）。当然，付费越多，您获得的配额、服务期限、自定义子域名等就越多。

虽然PageKite没有像ngrok那样的流量检查器，但它具有一些非常出色的功能，如内置防火墙，可以阻止对/wp-admin、/xampp、phpMyAdmin页面等常见攻击目标的访问。如果您愿意，可以禁用此功能。

PageKite甚至在澳大利亚悉尼设有前端中继服务器，这可能为澳大利亚开发者提供更快的速度。

如何使用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还具备一些更令人印象深刻的高级功能。

例如：无需Web服务器。如果您没有运行服务器，它内置的Web服务器可以托管您的静态文件，如下所示：

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的Web服务器，并使用PageKite将其暴露到互联网：

虽然这不是我每天都会做的事情，但看到现在仅凭智能手机就能实现这些功能，确实相当酷炫！

与ngrok类似，PageKite能够同时创建多个隧道，并支持使用自有域名，还允许为隧道设置配置文件。欲了解更多详情，请参阅其快速入门指南及更为详尽的操作指南。

localtunnel

localtunnel是一种隧道服务，最初基于Node构建，但亦提供了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系统或树莓派，这或许正是您所需的解决方案。该项目全部使用Go语言编写，并欢迎贡献者参与。

简要功能如下：

• 完全免费且开源，遵循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）
• 在客户端也设置可执行文件

来自boringproxy创建者的视频详细介绍了操作步骤：

boringproxy的高级特性

自动HTTPS证书通过Let’s Encrypt自动管理，无需担心测试用证书的获取，一切都在后台自动完成。

配置的Web界面自动设置，便于管理用户、访问令牌和隧道。

轻松隧道化Web应用，如视频中演示的Etherpad，为其分配子域名，即可从任何地方访问。

BrowserStack

BrowserStack提供自动截图和虚拟机服务，用于在多种设备和浏览器上测试网站。若需访问localhost进行测试，BrowserStack可能符合需求。

可利用上述方法在BrowserStack虚拟机中测试localhost站点，其还提供Chrome和Firefox的浏览器扩展，允许从其服务器访问您的localhost。

然而，此功能仅限于BrowserStack服务，并不对公众开放。BrowserStack提供免费试用，之后需支付月费才能继续使用。对于那些仅因设备测试而需访问localhost的情况，这会是一个便捷的选择。

如何使用BrowserStack

前往BrowserStack.com注册试用。他们网站上对本地测试流程有详细记录，若你对此途径感兴趣，不妨一读。

最终，它将使你能够在网络上运行的虚拟机中测试localhost站点，操作如下：

偏好之选

经过对这些选项的尝试，我个人偏爱ngrok和PageKite。

PageKite似乎是最多才多艺的解决方案，潜力巨大。多年来，它不断发展并适应各种用途，成为一款真正令人印象深刻的应用！

ngrok同样出色，因其简洁性和流量检查器而备受青睐。对于大多数希望从网络访问localhost的网页开发者来说，其功能已绰绰有余。

总结

如果你使用的是一台联网计算机，现在只需几分钟就能从世界任何地方设置对localhost的访问！起步极其简单，正如你所见，解决方案层出不穷！

你使用过这些服务吗？你还有其他偏好的服务吗？我很想听听你的看法在推特上！

 

关于从任何地方访问本地主机的常见问题解答