当使用 WSL2 到 运行 时，如何将我的 phone 连接到 expo
How can i connect my phone to expo when using WSL2 to run it
每当我尝试 运行 expo start 或 npm start IP 时，它不是我的 LAN IP，而是我的 WSL2 eth0 IP，这将导致我的 phone 不是连接到世博会。
我已经尝试使用 export 命令设置 REACT_NATIVE_PACKAGER_HOSTNAME 并且它也会更改与 expo 相关的浏览器中的 ip，但我认为它不会 运行 ip 因为我的 phone 再次无法连接（我也关闭了防火墙）
对我来说，预期的事情是能够 运行 我的 phone 上的 expo 代码，而无需使用将使用互联网的隧道选项。
我遇到了这个问题，这是关于该主题的主线程，所以我想我应该添加一个适合我的解决方案。
重申一下，这是 运行ning Expo SDK 36 和 WSL2（Ubuntu 18.04 LTS，Win 10 build 19559.1000）。
expo 开始 运行（在 WSL2 中），QR 码会弹出。用我的 phone 扫描代码会导致错误。
我找到的解决方案是转到打开的 Metro Bundler window。在 "Connection" 下，有三个选项可用：隧道、局域网和本地。世博会开始默认为局域网。这是似乎发生错误的地方。
解决方案是从 LAN 切换到 Tunnel。这会生成一个新的二维码，使 Expo phone 应用程序能够正确识别并连接到 Expo 项目。
expo start --tunnel
我知道最初的 post 不想使用隧道选项，但对于那些可以的人来说，这很有效。
希望对您有所帮助！
隧道将通过互联网重定向您的流量，并且比直接连接慢。
我通过将端口 19000 和 19001 转发到 WSL 解决了这个问题
netsh interface portproxy add v4tov4 listenport=19000 listenaddress=0.0.0.0 connectport=19000 connectaddress=127.0.0.1
netsh interface portproxy add v4tov4 listenport=19001 listenaddress=0.0.0.0 connectport=19001 connectaddress=127.0.0.1
（基于this优秀博客post）
其他一些要验证的事情：
- 您可能需要配置 Linux 防火墙以允许端口 19000 和 19001 上的连接（我不需要这样做）
- 您可能需要为端口 19000、19001 设置 Windows 防火墙规则（我不需要这样做）
- 确保您的 PC 和移动设备都在同一个 WiFi 网络上
要添加到 Simons 的答案中，这是我必须做的才能得到它 运行ning。
将到达 Windows 的请求转发到 WSL2 实例。
在您的 WSL2 中，运行 ip addr (Ubuntu)。这将为您提供您的 IP 地址。寻找 eth0，可能类似于“inet 172.22.182.52”。 （请注意，如果您 运行 在您的计算机上设置多个 Expos，那么您可能需要为更多端口执行此操作）
然后，在 Windows 终端（作为管理员）中，运行:
netsh interface portproxy add v4tov4 listenport=19000 connectport=19000 connectaddress=172.22.185.52
netsh interface portproxy add v4tov4 listenport=19001 connectport=19001 connectaddress=172.22.185.52
netsh interface portproxy add v4tov4 listenport=19002 connectport=19002 connectaddress=172.22.185.52
允许请求通过Windows 防火墙
Windows 防火墙阻止了东西。好的。现在打开expo需要的ports。 （请注意，如果您 运行 在您的计算机上设置多个 Expos，那么您可能需要为更多端口执行此操作）
在 Windows 终端内（作为管理员）：
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort 19000 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort 19001 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort 19002 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort 19000 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort 19001 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort 19002 -Action Allow -Protocol TCP";
重启时 WSL2 IP 发生变化
我还没有尝试过这些，但这里有一些脚本可以在重新启动时自动为您更新上述内容。
- https://gist.github.com/xmeng1/aae4b223e9ccc089911ee764928f5486
- https://www.brianketelsen.com/blog/ssh-to-wsl2/
（奖励）更新来自 Expo
的二维码
您需要有一个自定义环境变量，为 QR 码指定不同的主机 URL。最简单的方法是将变量添加到您 运行 的命令之前。最好你的项目有一个文件设置，你可以在其中放置这些变量。
在 Windows、运行 的终端中：
ipconfig /all。
在那里的某个地方，您将获得 Windows 机器的 IP 地址。可能在无线适配器或以太网适配器下。
在您的项目中（来自 WSL2）：
REACT_NATIVE_PACKAGER_HOSTNAME=<IP address to your Windows machine> yarn expo:start（或任何您的命令）。
两年后的更新，以防它有用——我不再需要执行已接受答案中显示的 netsh 命令来使其在 WSL2 上运行（事实上，这样做会中断其他事情！）但我仍然需要执行防火墙命令。然后一切正常。
你可以使用我制作的这个脚本！
它自动化 Simon Farshid and Skurpi 评论的整个过程，例如：
- 在 Windows 防火墙上打开
19000,19001,19002,19003,19004,19005 端口；
- 将
REACT_NATIVE_PACKAGER_HOSTNAME 环境变量插入 .bashrc 和 .zshrc 文件（如果有）；
- 环境变量
REACT_NATIVE_PACKAGER_HOSTNAME自动接收本机IP地址(Windows);
- 定义了一个Windows注册表项，方便通过运行[=15执行脚本=] 使用命令
wsl2host;
- 在 Windows 上创建计划任务到 运行 登录时的脚本
下载此存储库，或者如果您安装了 Git：
$ git clone https://github.com/jonhoffmam/wsl2_host.git
运行 start.bat 文件在第一个 运行 脚本
在 运行[=48 上使用命令 wsl2host 的 运行 脚本是可能的=]
如果您的 windows 机器上启用了 IPV6，您可以将 Exo 端口上的 IPV4 请求转发到本地主机 IPV6，如下所示：
netsh interface portproxy add v4tov6 listenport=19002 connectport=19002 connectaddress=::1 listenaddress=0.0.0.0
netsh interface portproxy add v4tov6 listenport=19001 connectport=19001 connectaddress=::1 listenaddress=0.0.0.0
netsh interface portproxy add v4tov6 listenport=19000 connectport=19000 connectaddress=::1 listenaddress=0.0.0.0
这是一个永久性的解决方案，因为即使您的 WSL2 IP 发生变化，它也会继续工作。
在您的 phone 上，您需要使用 exp://YOUR_WINDOWS_IP:19000
我在搜索类似问题时发现了这个 运行 WSL2 中的 Dokcer：
https://github.com/microsoft/WSL/issues/4983
这是我发现在我的手机和 WSL2 中 运行 之间进行 LAN 开发的完整步骤（Ubuntu 20 on Windows 10 20H2）：
1。一开始：在 Windows 防火墙
中打开 Expo 端口入站
Windows 防火墙应该打开，默认情况下它应该阻止入站尝试。
以下将打开 Expo 端口 19000–19006，入站，，但仅在您配置为“私有” 的网络上（即 -Profile Private部分）：
(powershell 作为管理员)
New-NetFireWallRule -Profile Private -DisplayName 'Expo ports for LAN development' `
-Direction Inbound -LocalPort 19000-19006 -Action Allow -Protocol TCP
(用Get-NetFirewallRule |Where-Object {$_.DisplayName -Match "Expo.*"}后可以查看)
2。点portproxy到WSL；重新运行“每次WSL都有一个新的IP地址”
（我还不确定 WSL IP 地址多久更改一次，但我怀疑只有重新启动才会）
我在网上看到了一些东西，包括这里的其他答案，对 connectaddress=127.0.0.1 说 portproxy 但它不 对我有用（WSL2，Windows 10 20H2).
我不能说为什么其他人发现它有效，我只能说反复测试为我确认 127.0.0.1 无效，但 WSL IP 地址确实有效。
所以这是一个可重复使用的命令，可以自动将连接地址设置为正确的 WSL 地址：
(powershell — 只是为了简单的内联 Trim() — 作为管理员)
netsh interface portproxy add v4tov4 listenport=19000 listenaddress=0.0.0.0 `
connectport=19000 connectaddress=$($(wsl hostname -I).Trim());
netsh interface portproxy add v4tov4 listenport=19001 listenaddress=0.0.0.0 `
connectport=19001 connectaddress=$($(wsl hostname -I).Trim());
3。将 Metro 指向您的开发机器 LAN IP 地址；在 WSL 中重新 运行“每次开发主机都有一个新的 IP 地址”
这可能是更改最频繁的一个。当您更改网络时，您的笔记本电脑本地网络 IP 肯定会更改（例如 home/office）——并且在其他时间也可能更改。
幸运的是它也是可粘贴的/可别名的：
WSL2 shell
export REACT_NATIVE_PACKAGER_HOSTNAME=$(netsh.exe interface ip show address "Wi-Fi" | grep 'IP Address' | sed -r 's/^.*IP Address:\W*//')
echo Meteor will use dev machine IP address: $REACT_NATIVE_PACKAGER_HOSTNAME
（如果您的开发箱不经常更改 LAN，您可以在 .bashrc / .zshrc 中设置 REACT_NATIVE_PACKAGER_HOSTNAME）
我“希望我不必重新 运行 事情，它可以全部自动化”，
但同样的懒惰让我很高兴至少有命令 2 和 3 能够简单地“re运行”并始终让 Expo LAN 模式为我的 WSL2 托管的 Expo 开发模式工作。
您可以检查端口是否正确打开并设置 sudo lsof -i -P -n | grep LISTEN
我还必须在我的 zshrc 配置中添加 export EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0
也许这是我最后所做的总结。
1。在我的 PC 启动并打开 WSL 后将其保存为 expo_wsl2_port_forwarding.ps1 和 运行：
$local_ip = "0.0.0.0";
$wsl_ip = iex "wsl hostname -I"
$ports = @(19000, 19001, 19002);
$ports_list = $ports -join ",";
# Firewall rules
iex "Remove-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock'";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort $ports_list -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort $ports_list -Action Allow -Protocol TCP";
# Port-forwarding
for($i = 0; $i -lt $ports.length; $i++){
$port = $ports[$i];
iex "netsh interface portproxy delete v4tov4 listenport=$port listenaddress=$local_ip";
iex "netsh interface portproxy add v4tov4 listenport=$port listenaddress=$local_ip connectport=$port connectaddress=$wsl_ip";
}
您需要 运行 在提升的提示中执行此操作（“运行 作为管理员”）。
您第一次 运行 可能会看到一个错误，因为没有要删除的现有防火墙规则。
2。然后在 WSL2 中我 运行 以下内容：
REACT_NATIVE_PACKAGER_HOSTNAME=`dig host.docker.internal +short` expo start --lan
请务必注意，主机名 host.docker.internal 将 仅在您 运行 正在 Docker 主机 上可用(Windows)。如果你不这样做，你将不得不使用另一种技术来计算你的主机 IP（参见其他答案）。
每当我尝试 运行 expo start 或 npm start IP 时，它不是我的 LAN IP，而是我的 WSL2 eth0 IP，这将导致我的 phone 不是连接到世博会。
我已经尝试使用 export 命令设置 REACT_NATIVE_PACKAGER_HOSTNAME 并且它也会更改与 expo 相关的浏览器中的 ip，但我认为它不会 运行 ip 因为我的 phone 再次无法连接（我也关闭了防火墙）
对我来说，预期的事情是能够 运行 我的 phone 上的 expo 代码，而无需使用将使用互联网的隧道选项。
我遇到了这个问题，这是关于该主题的主线程，所以我想我应该添加一个适合我的解决方案。
重申一下，这是 运行ning Expo SDK 36 和 WSL2（Ubuntu 18.04 LTS，Win 10 build 19559.1000）。
expo 开始 运行（在 WSL2 中），QR 码会弹出。用我的 phone 扫描代码会导致错误。
我找到的解决方案是转到打开的 Metro Bundler window。在 "Connection" 下，有三个选项可用：隧道、局域网和本地。世博会开始默认为局域网。这是似乎发生错误的地方。
解决方案是从 LAN 切换到 Tunnel。这会生成一个新的二维码，使 Expo phone 应用程序能够正确识别并连接到 Expo 项目。
expo start --tunnel
我知道最初的 post 不想使用隧道选项，但对于那些可以的人来说，这很有效。
希望对您有所帮助！
隧道将通过互联网重定向您的流量，并且比直接连接慢。
我通过将端口 19000 和 19001 转发到 WSL 解决了这个问题
netsh interface portproxy add v4tov4 listenport=19000 listenaddress=0.0.0.0 connectport=19000 connectaddress=127.0.0.1
netsh interface portproxy add v4tov4 listenport=19001 listenaddress=0.0.0.0 connectport=19001 connectaddress=127.0.0.1
（基于this优秀博客post）
其他一些要验证的事情：
- 您可能需要配置 Linux 防火墙以允许端口 19000 和 19001 上的连接（我不需要这样做）
- 您可能需要为端口 19000、19001 设置 Windows 防火墙规则（我不需要这样做）
- 确保您的 PC 和移动设备都在同一个 WiFi 网络上
要添加到 Simons 的答案中，这是我必须做的才能得到它 运行ning。
将到达 Windows 的请求转发到 WSL2 实例。
在您的 WSL2 中，运行 ip addr (Ubuntu)。这将为您提供您的 IP 地址。寻找 eth0，可能类似于“inet 172.22.182.52”。 （请注意，如果您 运行 在您的计算机上设置多个 Expos，那么您可能需要为更多端口执行此操作）
然后，在 Windows 终端（作为管理员）中，运行:
netsh interface portproxy add v4tov4 listenport=19000 connectport=19000 connectaddress=172.22.185.52
netsh interface portproxy add v4tov4 listenport=19001 connectport=19001 connectaddress=172.22.185.52
netsh interface portproxy add v4tov4 listenport=19002 connectport=19002 connectaddress=172.22.185.52
允许请求通过Windows 防火墙
Windows 防火墙阻止了东西。好的。现在打开expo需要的ports。 （请注意，如果您 运行 在您的计算机上设置多个 Expos，那么您可能需要为更多端口执行此操作）
在 Windows 终端内（作为管理员）：
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort 19000 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort 19001 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort 19002 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort 19000 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort 19001 -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort 19002 -Action Allow -Protocol TCP";
重启时 WSL2 IP 发生变化
我还没有尝试过这些，但这里有一些脚本可以在重新启动时自动为您更新上述内容。
- https://gist.github.com/xmeng1/aae4b223e9ccc089911ee764928f5486
- https://www.brianketelsen.com/blog/ssh-to-wsl2/
（奖励）更新来自 Expo
的二维码您需要有一个自定义环境变量，为 QR 码指定不同的主机 URL。最简单的方法是将变量添加到您 运行 的命令之前。最好你的项目有一个文件设置，你可以在其中放置这些变量。
在 Windows、运行 的终端中：
ipconfig /all。
在那里的某个地方，您将获得 Windows 机器的 IP 地址。可能在无线适配器或以太网适配器下。
在您的项目中（来自 WSL2）：
REACT_NATIVE_PACKAGER_HOSTNAME=<IP address to your Windows machine> yarn expo:start（或任何您的命令）。
两年后的更新，以防它有用——我不再需要执行已接受答案中显示的 netsh 命令来使其在 WSL2 上运行（事实上，这样做会中断其他事情！）但我仍然需要执行防火墙命令。然后一切正常。
你可以使用我制作的这个脚本！
它自动化 Simon Farshid and Skurpi 评论的整个过程，例如：
- 在 Windows 防火墙上打开
19000,19001,19002,19003,19004,19005端口； - 将
REACT_NATIVE_PACKAGER_HOSTNAME环境变量插入.bashrc和.zshrc文件（如果有）； - 环境变量
REACT_NATIVE_PACKAGER_HOSTNAME自动接收本机IP地址(Windows); - 定义了一个Windows注册表项，方便通过运行[=15执行脚本=] 使用命令
wsl2host; - 在 Windows 上创建计划任务到 运行 登录时的脚本
下载此存储库，或者如果您安装了 Git：
$ git clone https://github.com/jonhoffmam/wsl2_host.git
运行 start.bat 文件在第一个 运行 脚本
在 运行[=48 上使用命令 wsl2host 的 运行 脚本是可能的=]
如果您的 windows 机器上启用了 IPV6，您可以将 Exo 端口上的 IPV4 请求转发到本地主机 IPV6，如下所示：
netsh interface portproxy add v4tov6 listenport=19002 connectport=19002 connectaddress=::1 listenaddress=0.0.0.0
netsh interface portproxy add v4tov6 listenport=19001 connectport=19001 connectaddress=::1 listenaddress=0.0.0.0
netsh interface portproxy add v4tov6 listenport=19000 connectport=19000 connectaddress=::1 listenaddress=0.0.0.0
这是一个永久性的解决方案，因为即使您的 WSL2 IP 发生变化，它也会继续工作。
在您的 phone 上，您需要使用 exp://YOUR_WINDOWS_IP:19000
我在搜索类似问题时发现了这个 运行 WSL2 中的 Dokcer： https://github.com/microsoft/WSL/issues/4983
这是我发现在我的手机和 WSL2 中 运行 之间进行 LAN 开发的完整步骤（Ubuntu 20 on Windows 10 20H2）：
1。一开始：在 Windows 防火墙
中打开 Expo 端口入站Windows 防火墙应该打开，默认情况下它应该阻止入站尝试。
以下将打开 Expo 端口 19000–19006，入站，，但仅在您配置为“私有” 的网络上（即 -Profile Private部分）：
(powershell 作为管理员)
New-NetFireWallRule -Profile Private -DisplayName 'Expo ports for LAN development' `
-Direction Inbound -LocalPort 19000-19006 -Action Allow -Protocol TCP
(用Get-NetFirewallRule |Where-Object {$_.DisplayName -Match "Expo.*"}后可以查看)
2。点portproxy到WSL；重新运行“每次WSL都有一个新的IP地址”
（我还不确定 WSL IP 地址多久更改一次，但我怀疑只有重新启动才会）
我在网上看到了一些东西，包括这里的其他答案，对 connectaddress=127.0.0.1 说 portproxy 但它不 对我有用（WSL2，Windows 10 20H2).
我不能说为什么其他人发现它有效，我只能说反复测试为我确认 127.0.0.1 无效，但 WSL IP 地址确实有效。
所以这是一个可重复使用的命令，可以自动将连接地址设置为正确的 WSL 地址：
(powershell — 只是为了简单的内联 Trim() — 作为管理员)
netsh interface portproxy add v4tov4 listenport=19000 listenaddress=0.0.0.0 `
connectport=19000 connectaddress=$($(wsl hostname -I).Trim());
netsh interface portproxy add v4tov4 listenport=19001 listenaddress=0.0.0.0 `
connectport=19001 connectaddress=$($(wsl hostname -I).Trim());
3。将 Metro 指向您的开发机器 LAN IP 地址；在 WSL 中重新 运行“每次开发主机都有一个新的 IP 地址”
这可能是更改最频繁的一个。当您更改网络时，您的笔记本电脑本地网络 IP 肯定会更改（例如 home/office）——并且在其他时间也可能更改。
幸运的是它也是可粘贴的/可别名的：
WSL2 shell
export REACT_NATIVE_PACKAGER_HOSTNAME=$(netsh.exe interface ip show address "Wi-Fi" | grep 'IP Address' | sed -r 's/^.*IP Address:\W*//')
echo Meteor will use dev machine IP address: $REACT_NATIVE_PACKAGER_HOSTNAME
（如果您的开发箱不经常更改 LAN，您可以在 .bashrc / .zshrc 中设置 REACT_NATIVE_PACKAGER_HOSTNAME）
我“希望我不必重新 运行 事情，它可以全部自动化”，
但同样的懒惰让我很高兴至少有命令 2 和 3 能够简单地“re运行”并始终让 Expo LAN 模式为我的 WSL2 托管的 Expo 开发模式工作。
您可以检查端口是否正确打开并设置 sudo lsof -i -P -n | grep LISTEN
我还必须在我的 zshrc 配置中添加 export EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0
也许这是我最后所做的总结。
1。在我的 PC 启动并打开 WSL 后将其保存为 expo_wsl2_port_forwarding.ps1 和 运行：
$local_ip = "0.0.0.0";
$wsl_ip = iex "wsl hostname -I"
$ports = @(19000, 19001, 19002);
$ports_list = $ports -join ",";
# Firewall rules
iex "Remove-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock'";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort $ports_list -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort $ports_list -Action Allow -Protocol TCP";
# Port-forwarding
for($i = 0; $i -lt $ports.length; $i++){
$port = $ports[$i];
iex "netsh interface portproxy delete v4tov4 listenport=$port listenaddress=$local_ip";
iex "netsh interface portproxy add v4tov4 listenport=$port listenaddress=$local_ip connectport=$port connectaddress=$wsl_ip";
}
您需要 运行 在提升的提示中执行此操作（“运行 作为管理员”）。
您第一次 运行 可能会看到一个错误，因为没有要删除的现有防火墙规则。
2。然后在 WSL2 中我 运行 以下内容：
REACT_NATIVE_PACKAGER_HOSTNAME=`dig host.docker.internal +short` expo start --lan
请务必注意，主机名 host.docker.internal 将 仅在您 运行 正在 Docker 主机 上可用(Windows)。如果你不这样做，你将不得不使用另一种技术来计算你的主机 IP（参见其他答案）。