React Native + Expoを用いたアプリを今まではローカル環境で開発をしていたが、新しくメンバーが開発に加わった際にも楽に環境構築ができ、環境依存のエラーをなくすためにもDockerでの環境構築を試した。
環境
macOS Sequoia 15.4.1
Windows 11
expo:52
react-natvie:0.76.6
Docker Desktopのインストール
下記リンクから該当のOSとアーキテクチャのDockerDesktopをインストールする。
概要
環境はVSCodeを用いて、ホスト上のGitHub Desktopを使えるようにしたい。
ホスト上のVSCodeをBindマウントにし、node_modulesをVolume マウントにしてハイブリッドにする方式が理想。
| マウント方式 | 管理の仕方 | 場所 | 編集の仕方 |
|---|---|---|---|
| Bindマウント | ホストのフォルダの場所は変えずにコンテナにコピー | E:\GitHub\プロジェクト名 |
通常通りにコードを直接編集 |
| Volumeマウント | コンテナ上の仮想環境に構築 | /var/lib/docker/volumes/.../_data |
コンテナ内に入って編集 |
Docker Fileの作成
FROM node:22-alpine
RUN apk update && apk add git
# 作業ディレクトリを /app に設定
WORKDIR /app
COPY package*.json ./
RUN npm install
# ソースコードをコンテナにコピー
COPY . .
EXPOSE 8081
expoのドキュメントにLTS版のnodeが推奨されているので、node:22をベースに。
Docker-Compose.ymlの作成
services:
expo-app:
build:
context: .
dockerfile: Dockerfile
env_file:
- .env
# Bind + Volume
volumes:
- ./:/app
- /app/node_modules
# volumes:
# - project:/app
ports:
- "8081:8081"
stdin_open: true
tty: true
environment:
# Metro がバインドするホスト名
- REACT_NATIVE_PACKAGER_HOSTNAME=${HOST_IP_ADDRESS}
# command: npx expo start --clear
volumes:
project:
driver: local
仮想環境で起動
- 環境変数
.envにホストのIPアドレスを記載する。
HOST_IP_ADDRESS=192.168.??.??
- Docker-compose.ymlを
Bind + Volumeで構築する。
Bind + Volume
volumes:
# ↓ ここでコードをホストFSと同期
- ./:/app
# ↓ 依存関係だけを Docker 管理の Volume に
- /app/node_modules
- ターミナルで
docker-compose up --buildで起動。
docker-compose up --build
- 起動したらターミナルで
docker-compose exec expo-app shを入力し、コンテナ内に入る。
docker-compose exec expo-app sh
- dockerのコマンドラインで
npx expo startを入力して開発サーバーを起動する。
npx expo start
WindowsでHotReloadが行えない問題
WindowsでWSL内にレポジトリを置けない場合
- GitHub Desktopからレポジトリを通常のWindowsのディレクトリ内に
clone - cloneしたレポジトリをVSCodeで開き、環境変数
.envにホストのIPアドレスを記載する。
HOST_IP_ADDRESS=192.168.??.??
- Docer-compose.ymlを
Volumeで構築する。
Bind + Volume
# ↓ すべてをVolumeで構築。
volumes:
- project:/app
-
Dev Containers:Open Folder in Containersから、該当のフォルダを選択。 - コンテナが立ち上がったら、
npx expo startを入力し、client appをインストールした実機でホストのIPアドレスで接続する。
npx expo start
まとめ
今回はReact Native + Expoの開発環境をDockerを用いて構築してみた。Dockerの環境さえあれば、あとはプロジェクトをcloneするだけで新しいPCでもすぐに開発できるようになるということでとても便利。
しかし、現状だとローカル上で開発アプリをビルドするnpx expo run:androidはできない。
ネイティブコードを含む場合はExpo Goでは動かせないため、仮想環境上でビルドできるように今後はしていきたい。
Discussion