Android Emulator 连接到 WSL2 中的节点服务器

Question

我在使用 Android Studios、WSL2 和 React Native 时玩得很不开心。

每天我都有一些工作要做，其他的事情就会中断。昨天，一切正常，现在我无法从我的应用程序连接到我的服务器。

我不知道该去哪里问这个问题，但我感到绝望。我一直试图解决这个问题大约八天。我不能。我需要帮助。

我不是一个流利的开发人员。为了尽可能的澄清，我做了这个分步清单。

大部分内容都基于本教程，这是使 WSL2 + Android Studios 协同工作的唯一原因。

我在做什么，按顺序：

• 在 WSL (Ubuntu 20) 中启动 Hyper
• 导航到我的 React Native 项目文件夹
• 以管理员身份打开 Windows 终端
• 在终端运行：

adb kill-server
adb -a nodaemon server start

• 然后，在 Hyper：

unset ADB_SERVER_SOCKET
socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5037

• 我让 Terminal 和 Hyper 都运行并且不关闭它们的窗口/选项卡。
• 在另一个终端窗口中，我运行：

iex "netsh interface portproxy delete v4tov4 listenport=8081 listenaddress=127.0.0.1" | out-null;
$WSL_CLIENT = bash.exe -c "ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'";
$WSL_CLIENT -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';
$WSL_CLIENT = $matches[0];
iex "netsh interface portproxy add v4tov4 listenport=8081 listenaddress=127.0.0.1 connectport=8081 connectaddress=$WSL_CLIENT"

• 仍在终端中，我使用ipconfig. 让我们说它是172.22.32.1。
• 我打开 VS Code 并将我的 Axios API 连接更改为该 IP。例如：

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://172.22.32.1:3333',
});

export default api;

• 我打开了一个名为emulator-5554.
• 我yarn start在 Hyper 上运行。它显示“欢迎使用 React Native”等。
• 在另一个选项卡中，我运行yarn android --variant=debug --deviceId emulator-5554并等待它完成。
• 此时应用程序正在我的设备上运行。如果我对 VS Code 进行更改，它就会发生变化。一切显然运行顺利。
• 我启动 docker 桌面（带有 WSL2 集成的 Windows）并docker ps检查是否启动了任何东西。没有什么是。
• 我跑了docker start mongo redis gostack-postgres（有理由使用所有这些，但我认为这无关紧要）。
• 然后，docker ps：

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS
  NAMES
1a19b8e8914a        mongo               "docker-entrypoint.s…"   4 days ago          Up 5 seconds        0.0.0.0:27017->27017/tcp
  mongo
172505459df6        postgres            "docker-entrypoint.s…"   4 days ago          Up 4 seconds        0.0.0.0:5432->5432/tcp
  gostack-postgres
acac9fa31419        redis:alpine        "docker-entrypoint.s…"   5 days ago          Up 5 seconds        0.0.0.0:6379->6379/tcp
  redis

• 我导航到服务器文件夹并启动它运行yarn dev:server。
• 我使用我在 chrome 上运行的前端网站对其进行了测试localhost:3000。服务器工作正常，因为我可以登录和更改信息。
• 再次，我localhost:3333在浏览器中测试服务器并接收连接的消息。一切正常，所以我杀死了前端网站。
• 我尝试通过我的应用程序登录，就像我在网站上所做的那样。它等了几秒钟……然后给了我[Error: Network Error]React Native Metro的日志。
• 好的，连接有问题。让我们尝试localhost代替IP。我在我的 API 设置中更改它。

const api = axios.create({
  baseURL: 'http://localhost:3333',
});

• 为了确保一切正常，我重新运行 yarn android --variant=debug --deviceId emulator-5554
• 这一次，只要我按下登录按钮，应用程序就会返回[Error: Network Error]（其他时间我花了一些时间才返回）。
• 我相信这不是我应该使用的 IP。我尝试，然后0.0.0.0重新运行yarn android...。完成后，我用r.
• [Error: Network Error]

Answer 1

您只需要在 windows powershell 上运行此脚本（以管理员身份）：

# DELETE ANY PREVIOUS FORWARD CONFIGURATION PORT
iex "netsh interface portproxy delete v4tov4 listenport=3333 listenaddress=127.0.0.1" | out-null;

# GET THE WSL IP AND CHECKS IT FORMAT xxx.xxx.xxx.xxx
$WSL_CLIENT = bash.exe -c "ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'";
$WSL_CLIENT -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';
$WSL_CLIENT = $matches[0];

# ADD PORTS FORWARD FROM WSL TO WINDOWS
#(With this command, windows port 3333 starts to listen port 3333 of wsl2)
iex "netsh interface portproxy add v4tov4 listenport=3333 listenaddress=127.0.0.1 connectport=3333 connectaddress=$WSL_CLIENT"

# TO CHECK ALL PORTS CONFIGURED:
netsh interface portproxy show all

如果上面的代码对你不起作用，你也可以检查这个命令：

# Its the same concept, works like a proxy forwarding Linux traffic

$ sysctl -w net.ipv4.conf.all.route_localnet=1
$ iptables -t nat -I PREROUTING -p tcp -j DNAT --to-destination 127.0.0.1 

我希望这个对你有用。

更新

我已经创建了一个 powershell 脚本，所以每次我重新启动我的操作系统和我的 ip 更改时，我都会运行它。

param ($ports=(8081, 3333, 3000), $listenaddress='0.0.0.0', $connectaddress, [switch]$show, [switch]$reset, [switch]$help)

# #[Ports]
# #All the ports you want to forward separated by coma
# $ports=@(8081, 3333);

if( $help ){
    write-host "Parameters:"
    write-host "show => show all portproxys configured."
    write-host "reset => reset all portproxys configured."
    write-host "ports (-ports 8081,3333)"
    write-host "listenaddress (-listenaddress 127.0.0.1)"
    write-host "connectaddress (-connectaddress 127.0.0.1)"
    exit;
}

if( $show ){
    netsh interface portproxy show all
    exit;
}

if( $reset ){
    netsh interface portproxy reset
    exit;
}

$remoteport = bash.exe -c "ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'"
$found = $remoteport -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';

if( $found ){
  $remoteport = $matches[0];
} else{
  write-host "The Script Exited, the ip address of WSL 2 cannot be found";
  exit;
}

if( $connectaddress ){
    $remoteport  = $connectaddress
}

for( $i = 0; $i -lt $ports.length; $i++ ){
  $port = $ports[$i];
  iex "netsh interface portproxy delete v4tov4 listenport=$port listenaddress=$listenaddress";
  iex "netsh interface portproxy add v4tov4 listenport=$port listenaddress=$listenaddress connectport=$port connectaddress=$remoteport";
  write-host "Port $port configured: `nListen address: $listenaddress`nConnect address: $remoteport"
}

# write-host "====================================================="
netsh interface portproxy show all

如何使用： 我将此脚本保存为 wslbridge.ps1 并将其放在“C:\Windows\System32”中。要执行它，只需打开 powershell 并键入wslbridge（它将配置默认端口 8081、3333、3000 - *您可以更改此设置）。

列出配置的端口： wslbridge -show

添加新的端口配置： wslbridge -port XXXX

重置预先配置的端口： wslbridge -reset

干杯，