如何使用手机在笔记本电脑上的本地主机上测试网站（具有多个服务）

Question

虽然我可以从 iPhone (http://192.168.1.101:8080/index.html) 连接到 MacBook 的本地 IP 地址（例如 192.168.1.101）来测试我的网站，但 Web 应用程序本身是依次请求另外两个本地服务：http://localhost:3000 和 http://localhost:3010。当推送到外部服务器时，所有这些本地主机地址都会被替换为服务的真实地址。但是，我如何在本地世界中测试我的网站？虽然我可以从 iPhone 访问 http://192.168.1.101:8080/index.html，但 iPhone 不知道 http://localhost:3000 在哪里。当然，我可以用

localhost

替换

192.168.1.101

的所有实例，但明天动态分配的 IP 地址可能会发生变化，因此这似乎不是一个非常可靠的方法。有更优雅的解决方案吗？

更多详情请往下看

我的网络应用程序 100% 是客户端。事实上，它是通过 Github Pages 提供的，因此一旦存储库被

git push

ed 到 Github，就无法进行任何操作。该应用程序本身查询另外两个服务（在生产中的其他地方运行，但所有这些服务都在我的开发中的 MacBook 上运行）。我的开发流程是

• 进行所有更改并测试

• npx gulp

  因此各种文件被清理、缩小和连接
• 跳

  git

  舞蹈（

  add

  、

  commit

  、

  push

  ）

我有一段JS代码，就像这样

const globals = {

    uri: {
        api: window.location.hostname === 'localhost'
            ? `http://localhost:3010/v3` 
            : 'https://real/server1/',

        map:  window.location.hostname === 'localhost' 
            ? `http://localhost:3000` 
            : 'https://real/server2/'
    },
    …
}

再往下

await res = fetch(`${globals.uri.api}`?queryParams);
…
L.TileLayer(`${globals.uri.map}/z/x/y`);

我通过启动

api

和

map

服务来测试应用程序本身，然后使用

npx http-server

启动我的网络应用程序并转到

http://localhost:8080/index.html

。到目前为止，这个系统运行得很好。

现在我想在真实手机上测试我的网站，而不是浏览器 webdev 工具响应模式。我尝试了

localtunnel

和

ngrok

，但都失败了，因为它们插入了一个必须同意的页面并单击按钮……所以，虽然我可以为我的网络应用程序执行此操作，但我的网络应用程序得到了尝试访问其他两个服务时卡住了。

现在怎么办？

Answer 1

您应该尝试 mDNS。

由于您使用的是 Mac，请使用

hostname

命令（在终端提示符下）查找 Mac 的名称。

在您的 URL 中使用带有

.local

扩展名的名称。例如。

http://Punkishs-MacBook.local:3000/

顺便说一句，ngrok 应该可以与付费计划配合使用。与 https://pinggy.io/ 相同，这是一个不错的选择。