プロジェクトのご相談
Docker

WSL2 で React Native のアプリを作成する

DockerWSL2React
WSL2 で React Native のアプリを作成する

こんにちは！

皆さんは Windows で React Native の環境を作ろうとして、
Android Studio だの SDK だの、ネイティブの道具が重くて心が折れたことはないでしょうか？

WSL2 の中で Docker を回せば、ホストを汚さずに Expo まで持っていけます。
実機は Expo Go。これだけで始められます！

§ 要約

WSL2 + Docker で Expo プロジェクトを作る手順です。

  • コンテナの中で create-expo-app する
  • 実機確認はストア版の Expo Go（SDK 54）
  • 開けるポートは Metro の 8081 だけ。昔の 19000 番台はもう使いません
  • スマホから届かないときは tunnel、または WSL の mirrored networking

以上！終わり！
正直それで終わりにしてもいいのですが、せっかくなのでもう少し説明します。

§ 前提

最低限これだけあれば動きます。

  • Windows に WSL2 が入っている
  • Docker Desktop が WSL2 バックエンドで動いている
  • スマホと PC が同じ Wi-Fi
  • スマホに Expo Go が入っている

ストア版の Expo Go は SDK 54 です。
いま latest は SDK 57 ですが、App Store の Expo Go では開けません。
57 を使いたいなら development build が必要です。この記事は Expo Go でサクッと見る話なので、54 でいきます。

§ ディレクトリ

プロジェクトのルートはこんな感じです。

.
├── compose.yaml
├── .env
├── docker/
│   └── react_native/
│       └── Dockerfile
└── react_native/          # アプリ本体。最初は空でよい

.env が無いと compose が落ちるので、先に空ファイルでも作っておいてください。

$ mkdir -p docker/react_native react_native
$ touch .env

§ Dockerfile

docker/react_native/Dockerfile です。
Node 22 は SDK 54 の下限（20.19）を余裕で超えます。
vim と ll は、コンテナに入ったときに困らないためのお守りです。

FROM node:22-slim

WORKDIR /usr/src/app/

RUN apt update

RUN apt install -y vim

RUN echo 'alias ll="ls $LS_OPTIONS -la"' >> ~/.bashrc

yarn は入れません。Node イメージに npm が入っているので、それで十分です。

§ compose.yaml

version: はもう書かなくてよいです。
ポートは 8081 だけ。docker compose（スペース）で動かします。

services:
  reactn:
    build: ./docker/react_native
    volumes:
      - ./react_native/:/usr/src/app
    env_file: .env
    command: npx expo start
    ports:
      - "8081:8081"

QR コードがコンテナの中の IP を指すと、スマホから届きません。
Windows 側の Wi-Fi IPv4 を .env に書いてください。

REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.23

IP は環境によって違います。自分のマシンの値に置き換えてください。

§ プロジェクト作成

まだ react_native/ が空なので、コンテナに入って足場を作ります。

$ docker compose run --rm --build reactn bash
# npx -y create-expo-app@latest . --template blank-typescript@sdk-54 --yes
# npx expo install --fix

blank-typescript は最小構成 + TypeScript です。
Router 付きの default テンプレートが欲しくなったら、そのときに変えればよいです。

§ 起動

$ docker compose up

ターミナルに QR が出るので、Expo Go で読みます。
ブラウザで http://localhost:8081 が開ければ、とりあえずサーバは生きています。

§ つながらないとき

同じ Wi-Fi なのに Expo Go が Metro を見つけられない、はよくあります。
WSL2 は別ネットワークに見えることがあるからです。

まず試すなら、起動コマンドを tunnel に変えます。

    command: npx expo start --tunnel

LAN のままいきたい場合は、Windows の %USERPROFILE%/.wslconfig に mirrored networking を足します。

[wsl2]
networkingMode=mirrored

公式のメモはこちらです。

https://github.com/expo/fyi/blob/main/wsl.md

古い記事に出てくる 19000 / 19001 / 19002 は、Expo 49 より前のポートです。
いまは 8081 だけ見てください。

§ まとめ

やることはこれだけです。

$ docker compose run --rm --build reactn bash
# npx -y create-expo-app@latest . --template blank-typescript@sdk-54 --yes
# npx expo install --fix
$ docker compose up

ホストを汚さず、Expo Go で実機確認まで持っていけます！

この記事をシェアする