WSL2环境运行Expo项目时能否使用LAN选项连接手机？

核心根因 #

1. WSL2默认采用NAT网络模式，虚拟网卡和Windows主机所在的家庭局域网属于不同网段，手机无法直接访问WSL内的服务
2. 主机无WiFi模块，有线网卡的IP才是局域网内可被手机访问的IP，Expo默认绑定WSL虚拟网卡IP，生成的二维码包含的是不可被外部访问的WSL内网地址
3. 此前的端口转发未覆盖Expo全量端口，或未配置Windows防火墙放行规则导致拦截

操作步骤 #

• 第一步：获取两个核心IP地址
  • 在WSL2终端执行如下命令获取WSL内网IP：
    ip addr show eth0 | grep inet | awk '{ print $2; }' | sed 's/\/.*$//'
    记为WSL_IP
  • 在Windows端CMD执行ipconfig，找到有线以太网网卡对应的IPv4地址（一般为192.168开头，不要选WSL虚拟网卡、蓝牙网卡的地址），记为WIN_LAN_IP
• 第二步：配置Windows多端口转发（需以管理员权限打开CMD执行）
  依次执行如下3条命令，将Expo所需的3个核心端口的请求转发到WSL：

  netsh interface portproxy add v4tov4 listenport=19000 listenaddress=0.0.0.0 connectport=19000 connectaddress=替换为你的WSL_IP
  netsh interface portproxy add v4tov4 listenport=19001 listenaddress=0.0.0.0 connectport=19001 connectaddress=替换为你的WSL_IP
  netsh interface portproxy add v4tov4 listenport=19002 listenaddress=0.0.0.0 connectport=19002 connectaddress=替换为你的WSL_IP
  

  执行完成后可运行netsh interface portproxy show all确认所有转发规则已生效
• 第三步：配置Windows防火墙放行规则（需以管理员权限打开PowerShell执行）
  运行如下命令放开Expo端口的入站访问权限：
  New-NetFirewallRule -DisplayName "Expo WSL Port Allow" -Direction Inbound -LocalPort 19000,19001,19002 -Protocol TCP -Action Allow
• 第四步：指定参数启动Expo
  回到WSL2的项目根目录，执行如下命令启动服务，不要直接用默认的expo start：
  EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0 REACT_NATIVE_PACKAGER_HOSTNAME=替换为你的WIN_LAN_IP npx expo start --lan
  注意：尽量不要用sudo启动Expo，若提示端口权限不足，可先执行sudo setcap 'cap_net_bind_service=+ep' $(which node)给Node.js开放低端口权限即可

验证 #

启动完成后先在Windows主机浏览器访问http://替换为你的WIN_LAN_IP:19002，确认可以正常打开Expo调试面板后，再用手机端Expo Go扫描二维码即可正常通过LAN连接。

若嫌每次重启WSL后IP变更需要重新配置麻烦，可自行配置WSL2静态IP，无需每次修改转发规则

内容的提问来源于stack exchange，提问作者pileup