DockerでReactNativeの開発環境を構築

---

公開: 2023年12月28日

目次

DockerでReact Native + Expoを動作させる

React Native環境を用意するのは何かと面倒なので、 Dockerでイミュータブルな動作コンテナを用意できるようにする。

Dockerfile

FROM node:20-alpine

WORKDIR /home/react-app

RUN apk update && apk add bash

RUN npm install -g expo-cli

RUN npm install -g react-native-elements moment
RUN expo --version

Docker-compose

以下のDocker-composeでExpoを起動する。 今回は環境変数にHOSTNAMEの値を上書きしてDockerホストの192.168.11.67にしている。

version: "3"
services:
  expo_react_native:
    container_name: expo_react_native
    build: ./docker
    command: expo start
    volumes:
      - ./src/:/home/react-app:z
    environment:
      - REACT_NATIVE_PACKAGER_HOSTNAME=192.168.11.67
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"
      - "19003:19003"
      - "19004:19004"
      - "19005:19005"
      - "19006:19006"
# For initialization
# docker-compose run --rm expo_react_native bash --login
#   expo init .
#   expo start

docker-compose up で起動後は以下のようなコンソールが出ればよい

Creating network "react-native-app_default" with the default driver
Creating expo_react_native ... done
Attaching to expo_react_native
expo_react_native    | 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.
expo_react_native    | [14:13:07] Starting project at /home/react-app
expo_react_native    | [14:13:08] Starting Metro Bundler
expo_react_native    |
expo_react_native    | ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
expo_react_native    | █ ▄▄▄▄▄ █▀█ █▄▀ ▀██ ▄▄▄▄▄ █
expo_react_native    | █ █   █ █▀▀▀█ ▀██▄█ █   █ █
expo_react_native    | █ █▄▄▄█ █▀ █▀▀▀ ▀▀█ █▄▄▄█ █
expo_react_native    | █▄▄▄▄▄▄▄█▄▀ ▀▄█ ▀▄█▄▄▄▄▄▄▄█
expo_react_native    | █  ▄  ▀▄▄ ▄▀▄▀ ▀▄▄▄█▄█ █ ██
expo_react_native    | █▀▄▄ █▀▄▄▀█▄█▀▄█ ▄▄██▄ █▄ █
expo_react_native    | █▀▄█▀▄█▄  ▄▄█▄▄▀▄▄▀▄▄▄▀ ▀██
expo_react_native    | █ █▀▄▄▀▄▀█▄  ▄█▀▄▀▀ ▄▀ ▄  █
expo_react_native    | █▄██▄██▄▄ ▄▀▄  ▀▀ ▄▄▄ ▄ ▄▄█
expo_react_native    | █ ▄▄▄▄▄ █▄███ █▀▀ █▄█ ▀▄  █
expo_react_native    | █ █   █ █ ▄ ▀▀▄▀ ▄▄   ▄ ▀▀█
expo_react_native    | █ █▄▄▄█ █  ██ ██▄  ▀▀█▀▄█ █
expo_react_native    | █▄▄▄▄▄▄▄█▄▄▄██▄█▄██████▄▄▄█
expo_react_native    |
expo_react_native    | [14:13:08] Your native app is running at exp://192.168.11.67:19000
expo_react_native    | Logs for your project will appear below. Press Ctrl+C to exit.
expo_react_native    | [14:13:13] Started Metro Bundler
expo_react_native    | [14:28:06] iOS Bundling complete 6747ms
expo_react_native    | [14:28:07] iOS Running app on iPhone
expo_react_native    |
expo_react_native    | [14:28:33] RangeError: invalid array length
expo_react_native    |
expo_react_native    | This error is located at:
expo_react_native    |     in Hello (created by App)
expo_react_native    |     in RCTView (created by View)
expo_react_native    |     in View (created by App)
expo_react_native    |     in App (created by withDevTools(App))
expo_react_native    |     in withDevTools(App)
expo_react_native    |     in RCTView (created by View)
expo_react_native    |     in View (created by AppContainer)
expo_react_native    |     in RCTView (created by View)
expo_react_native    |     in View (created by AppContainer)
expo_react_native    |     in AppContainer
expo_react_native    |     in main(RootComponent), js engine: hermes

スマホからの動作確認

expoが起動したあとはiPhone等でExpo go を起動して動作確認をする。