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

Question

我在使用 Android Studios、WSL2 和 React Native 时遇到了麻烦。

每天我都有一些东西可以工作，其他东西会坏掉。昨天一切正常，现在我无法从我的应用程序连接到我的服务器。

我不知道该去哪里问这个问题，但我感到很绝望。我已经尝试解决这个问题大约八天了。我不能。我需要帮助。

我不是一个流利的开发者。为了尽可能清楚，我列出了这个分步列表。

大部分是 based on this tutorial ，唯一让 WSL2 + Android Studio 协同工作的东西。

我在做什么，按顺序:

• 在 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 获取我的 WSL ip。假设它是 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 的 Android Studios AVD。
• 我在 Hyper 上运行 yarn start。它显示“欢迎使用 React Native”等。
• 在另一个选项卡中，我运行 yarn android --variant=debug --deviceId emulator-5554 并等待它完成。
• 此时应用程序正在我的设备上运行。如果我对 VS Code 进行更改，它就会更改。一切显然都在顺利进行。
• 我启动 docker desktop(集成了 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 重新加载 Metro。
• [错误:网络错误]

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

干杯，