Zenn
💭

React Native + Expo + Dockerでホットリロードしたいときはwsl内にファイルを配置する

2023/10/13に公開
tech

はじめに

React Native + Expo の環境をDockerで作成したのですが、ホットリロードが効かず途方に暮れていたところ、WSL上に置けばいいとのことだったので試してみました。結果としてはうまくいったのですが、これだけだともう本記事が終わってしまうので、以下にWSL2のインストールについてと、Expo環境構築について書いておきます。

WSL2のインストール

本記事では省略しますが、参考URLは以下です。
Windows 10 HomeでWSL2 Ubuntuを使えるようにする
Windows11にWSL2をインストールしてUbuntuを使う

環境構築用ファイルの準備

ファイル構成

great_folder_name_here
　 ├ app
　 ├ docker-compose.yml
　 └ Dockerfile

docker-compose.yml

version: '3'

services:
  expo:
    build: .
    tty: true
    environment:
      - NODE_ENV=development
      - REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.2
    ports:
      - "19006:19006"
    volumes:
      - ./app:/usr/src/app
    working_dir: /usr/src/app

volumes:
  node_modules:

Dockerfile

FROM node:latest

RUN npm -g add expo-cli

環境構築

以下はターミナル内で実施します。

docker-compose up -d
docker-compose exec expo /bin/bash

以下はexpoコンテナ内で実行します

expo init
# 以下はコマンド実行時に出力される内容です
WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.
┌───────────────────────────────────────────────────────────────────────────┐
│                                                                           │
│   The global expo-cli package has been deprecated.                        │
│                                                                           │
│   The new Expo CLI is now bundled in your project in the expo package.    │
│   Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.        │
│                                                                           │
│   To use the local CLI instead (recommended in SDK 46 and higher), run:   │
│   › npx expo <command>                                                    │
│                                                                           │
└───────────────────────────────────────────────────────────────────────────┘

Migrate to using:
› npx create-expo-app --template

✔ What would you like to name your app? … {任意のプロジェクト名}
✔ Choose a template: › blank (TypeScript)  same as blank but with TypeScript configuration # 任意のテンプレートを選択してください

もろもろインストールが終わったら以下を実行します

cd {任意のプロジェクト名}
# ブラウザで動作確認したい場合は以下を実行します
npx expo install react-native-web@~0.19.6 react-dom@18.2.0 @expo/webpack-config@^19.0.0

インストールが終わったら開発サーバを起動します。開発サーバが起動したら。App.tsxを修正してホットリロードが効いているか確認してみてください。

expo start

参考URL

Dockerを使っていてhot reload系が効かなかったとき

Discussion