docker + WSL2 + expoでreact native開発環境の構築

WSL2上のdockerでexpoの開発サーバーを建てたときに外部端末からアクセスする方法。
色々なサイトを参考にやってみたが、詰まったので、解決した方法をメモ程度で記載する。

0.0. やること

※ 前提としてWSL2上にUbuntuがあることとする

1. ポート開放
2. ポートフォワーディング
3. docker compose

1.1. ポート開放

PowerShellを管理者権限で実行して以下を実行する。

New-NetFireWallRule -DisplayName "WSL 2 Firewall Unlock" -Direction Inbound -LocalPort <port> -Action Allow -Protocol TCP

<port>を任意に変更する

1.2. ポートフォワーディング

expoは19000, 19001、Webは8080を使う。
PowerShellを管理者権限で実行して以下を実行する。

netsh interface portproxy add v4tov4 listenport=<port> listenaddress=* connectport=<port> connectaddress=<WSLのIP>

<WSLのIP> <port>を任意に変更する

以下のコマンドでポートフォワーディングしているポートを一覧で見れる。

netsh interface portproxy show all

1.3. docker compose

ちなみに、今回はMakeファイルを用いてビルドを行う為直接のdocker composeは行わない。
ディレクトリ構成
root
┣ app
┣ .env
┣ compose.yml
┣ dockerfile
┣ grepIP.sh
┗ Makefile

1.3.1 grepIP.sh

composeするときにローカル側のipが必要なのでシェルスクリプトを用いて自動で取ってくる。

grepIP.sh

IP=$(/mnt/c/Windows/system32/ipconfig.exe | iconv -f CP932 -t UTF-8 | sed -e 's/\r//' | grep 'IPv4' | head -1 | cut -d ':' -f 2 | awk '{print $1}')
sed -i".bak" -e "/LOCAL_IP_ADDR=/d" .env
echo "LOCAL_IP_ADDR=$IP" >> .env

やってること

ipconfigして 'IPv4'を含む行を抽出。その一行目のIPをenvファイルに書き込む。
なお、複数端末で実行に問題が無いことは確認済みですが、この方法は環境に依存するので、もっと良い方法があれば教えてください。

1.3.2 compose.yml

compose.yml

version: '3'

services:
  expo:
    build: .
    tty: true
    environment:
      - NODE_ENV=development
      - REACT_NATIVE_PACKAGER_HOSTNAME=${LOCAL_IP_ADDR}
    ports:
      - "19000:19000"
      - "8080:8080"
    volumes:
      - ./app:/usr/src/app
    working_dir: /usr/src/app

volumes:
  node_modules:
  

1.3.3 dockrfile

FROM node:latest
RUN npm -g add expo-cli

1.3.4 Makefile

expo_sample:
	chmod +x ./grepIP.sh
	./grepIP.sh
	docker-compose up -d
	docker-compose exec expo /bin/bash

1.3.5 makeする

rootディレクトリに移動してmakeコマンドを実行。
あとはコンテナ内でexpo initして開発していく。

9. 後始末について

9.1. ポート開放を解除

PowerShellを管理者権限で実行して以下のコマンドを実行。

Remove-NetFirewallRule -DisplayName "WSL 2 Firewall Unlock"

ポートフォワーディングを解除

PowerShellを管理者権限で実行して以下のコマンドを実行。

netsh interface portproxy delete v4tov4 listenport=<port> listenaddress=*

<port>を任意に変更する