shwld
Invalid Date

WSL2上でExpoを起動し、LANで接続する

tonnel接続を利用すればWSL2でexpoを利用すること自体は簡単だが、不安定な気がしたのでLAN接続も試してみる。

Attention Required! | Cloudflare

https://medium.com/weavik/react-native-expo-on-wsl2-aff04b1639f8

こちらの記事を参考(丸コピー)にして試してみたが、日本語環境だったりするせいかうまく実行できなかった。

自分の環境で動くようにしてみたのでメモしておく。(grepするあたりとかだけ環境に合わせて直せば動いてくれた)

やっていることは以下

  1. Expoが利用する19000~19006のファイアウォールを開ける
  2. 19000, 19001ポートをWSLへフォワードする
  3. Expoを起動する際にWSLのipアドレスではなくwindows側のipアドレスで実行するように設定する
powershell
unlock_expo_port.ps1
# 作業前に以下のコマンドを”管理者権限のPowershell”で実行することでExpoのポートを開放&フォワードする
#
# ```
# powershell.exe -ExecutionPolicy Bypass -f \\wsl.localhost\Ubuntu\***repo-path***\tools\unlock_expo_port.ps1
# ```
#

# Find WSL2 IP address
$wsl_ip = $(wsl hostname -I).Trim();
$windows_ip = '0.0.0.0';

if ( -Not $wsl_ip ) {
  Write-Output "IP address for WSL 2 cannot be found";
  exit;
}

Write-Output $wsl_ip
Write-Output $windows_ip

# Remove all previously proxied ports (only if not using other ports!)
Invoke-Expression "netsh int portproxy reset all"

# Remove Firewall Exception Rules
Invoke-Expression "Remove-NetFireWallRule -DisplayName 'Expo WSL2 Ports' ";

# Allow Expo ports through Windows Firewall
New-NetFireWallRule -DisplayName 'Expo WSL2 Ports' -Direction Inbound -LocalPort 19000-19006 -Action Allow -Protocol TCP;
New-NetFireWallRule -DisplayName 'Expo WSL2 Ports' -Direction Outbound -LocalPort 19000-19006 -Action Allow -Protocol TCP;

# Proxy Expo ports to WSL2
netsh interface portproxy add v4tov4 listenport=19000 listenaddress=$windows_ip connectport=19000 connectaddress=$wsl_ip;
netsh interface portproxy add v4tov4 listenport=19001 listenaddress=$windows_ip connectport=19001 connectaddress=$wsl_ip;
# NOTE: Avoid proxying port 19002, as this will prevent loading the Expo dev tools on the host (browser)!

# Show all newly proxied ports
Invoke-Expression "netsh interface portproxy show v4tov4"

cmd /c pause

↑このスクリプトを作業前に実行する(管理者権限かつExecutionPolicy Bypass)。 自動で走らせてもいいが、自分は作業前に都度実行。

json
package.json
"scripts": {
    "start:wsl": "REACT_NATIVE_PACKAGER_HOSTNAME=$(netsh.exe interface ip show address | grep 'IP Address' | grep '192.168.' | sed -r 's/^.*IP Address[ \\.:]*//') expo start",
}

↑WSL2で動かす場合は、yarn start の代わりにyarn start:wslで起動する

書いた人

shwld
shwldLV: 106
ATK32620
DEF30929
SPD38392
HIT95
AVD19
CRI20

他の投稿を見る

もっと見る