Ionic 从手机访问离子开发服务器

iq3niunx  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(168)

我想创建移动的浏览器应用程序。
我在windows11的wsl中使用ionic。
现在,当我做ionic serve --external时,我想从手机浏览器访问Web应用程序。
我在公共列车上使用wifi,所以这可能是我无法连接的原因?
这是离子(提取)的输出:

[INFO] Development server running!

       Local: http://localhost:8100
       External: http://172.21.17.144:8100

我的手机也在列车网络上。我可以从笔记本电脑(主机)访问外部ip,但不能从手机。当我试图连接外部ip时,手机浏览器会给出超时消息。
我还尝试通过hotspot连接。我在windows 11中创建了一个热点。从android手机连接到它。不幸的是,我也无法通过热点网络连接到我的笔记本电脑(ip:192.168.37.1)。而且我没有看到通过ip a在wsl中托管热点的网络适配器。
请问,你会如何连接到您的开发服务器,这是运行在您的笔记本电脑,从您的手机,没有太多的头痛?

vbopmzt1

vbopmzt11#

请问,你会如何连接到您的开发服务器,这是运行在您的笔记本电脑,从您的手机,没有太多的头痛?
有几种选择。第一种绝对是最简单的,如果它对你有效的话。

  • WSL 1基因

一般来说,在WSL 1上联网“更容易”,所以如果您正在使用的工具在那里工作,可以继续为它们使用WSL 1示例,如果您希望工具在那里工作得更好,您可以有一个单独的WSL 2示例。
WSL 1在Windows中作为系统调用转换层运行,因此它与Windows共享相同的网络接口。
另一方面,WSL 2是一个虚拟化环境,使用虚拟Hyper-V交换机后面的虚拟NIC。WSL 2网络在Windows网络后面/内部进行NAT,这就是为什么您无法从网络上的其他设备看到它。
WSL 2确实提供了一个称为“本地转发”的特性,允许Windows主机本身通过localhost地址访问WSL 2,但是,这并不能扩展到网络上的其他设备。
因此,如果您确实需要使用WSL 2,还有其他解决方案:

  • SSH反向隧道

目前我个人的偏好,因为它简化了转发和防火墙规则。请参阅我在this Ask Ubuntu answer中的“选项2”以获得说明。
有一些一次性的设置可能需要10-15分钟,但在此之后,在运行start the server之前连接端口是一行程序。

  • 桥接网络接口

您提到您使用的是Windows 11。只要这是Pro版本或更高版本(不是Home),您就可以使用WSL预览版中的新功能来创建桥接Hyper-V交换机。我自己还没有测试过,但您可以在this blog post中找到详细信息。

  • 传统端口转发方法

Microsoft文档中推荐的方法目前是通过netsh interface portproxy命令使用Windows端口转发将流量路由到WSL 2。问题是WSL 2地址是在每次重新启动时动态分配的),因此您必须在每次重新启动后确定或解析正确的地址。

相关问题