More than 3 years have passed since last update.

DockerでReact Native(TypeScript)+Expoのプロジェクト構築

Last updated at 2020-11-11Posted at 2020-09-20

まえおき

React Native+Expoで構成されたプロジェクトのDockerコンテナをMac OS X上に構築する手順を記載しています。

各端末の情報

PC
- Mac OS Catalina Ver.10.15.6
- docker version 19.03.12, build 48a66213fe
- docker-compose version 1.26.2, build eefe0d31
iPhone
- iPhone XR
- iOS:13.7

ExpoClientで動作検証済みの端末

iPhone(iOS:13.7)

前提

docker, docker-compose導入済み

手順

1. Expoアカウントを作成します

Expoアカウントの作成方法

2. Expoクライアントアプリのインストールとセットアップをおこないます。

iPhoneでExpoクライアントアプリのインストールとセットアップ方法

3. Docker環境を構築します

ファイル構成

root
└── docker
    └── react_native
        └── dockerfile
└── docker-compose.yml
└── .env

docker/react_native/dockerfile


FROM node:14-alpine

WORKDIR /usr/src/app/

RUN apk update && apk add bash

RUN yarn global add expo-cli

docker-compose.yml

version: "3"
services:
  react_native:
    build: ./docker/react_native
    volumes:
      - ./react_native/:/usr/src/app
    env_file: .env
    command: yarn start
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"

.env

Expoを利用する各端末のIPなどを設定する必要があります。

~~ADB_IP~~
- ~~検証端末のIPアドレスを指定してください。カンマ区切りで複数指定可能なようです。~~
※この設定は不要であることが判明しました。（2020/11/11追記）
REACT_NATIVE_PACKAGER_HOSTNAME
- Dockerコンテナ可動端末のIPアドレス

例

REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.2

４. Dockerコンテナをビルドします

docker-compose build

5. Dockerコンテナへ接続します

docker-compose run --rm react_native bash --login

6. expoプロジェクトを作成します

expo init .

7. プロジェクトテンプレートを選択するとプロジェクトのセットアップが開始されます

わたしは[blank (TypeScript)]を選択しました。

? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
  blank                 a minimal app as clean as an empty canvas
❯ blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration