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

# まえおき

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アカウントの作成方法](https://qiita.com/hidenoritoki/items/0c5084b84dfc2126d9ec)

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

[iPhoneでExpoクライアントアプリのインストールとセットアップ方法](https://qiita.com/hidenoritoki/items/afa69ca6ce910ee28cd9)

### 3. Docker環境を構築します

#### ファイル構成

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

#### docker/react_native/dockerfile

```dockerfile

FROM node:14-alpine

WORKDIR /usr/src/app/

RUN apk update && apk add bash

RUN yarn global add expo-cli
```

#### docker-compose.yml

```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アドレス

```yml:例
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
```

### 8. セットアップが完了したらコンテナから抜けます

### 9. Dockerコンテナを起動します

```
docker-compose up
```

### 10. 表示されたQRコードを検証端末上で読み取ります

![スクリーンショット 2020-09-20 20.16.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249974/cc0214d5-a44b-9bf7-3ca3-b0282f669926.png)

### 11. 検証端末でExpo Clientアプリが起動しREACTの画面が表示されます

![スクリーンショット 2020-09-20 21.31.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249974/966fd84b-6e6a-aed9-8567-bb2cfb500607.png)


### 12. react_native/App.tsxを更新すると・・・

react_native/App.tsxのファイル内に記述された表示テキストの末尾に☺️を追加してファイルを更新します。

![スクリーンショット 2020-09-20 20.22.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249974/68faa4f4-06de-d592-3cb3-3eb6efd768f9.png)

### 13. 更新した内容が検証端末へ自動的に反映されます

ホットリロードによって末尾の☺️がiPhone上の検証画面へ自動的に反映されます。

![スクリーンショット 2020-09-20 20.24.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249974/df86525f-2a75-bf4a-c4b6-42b0bb8e3e43.png)

# 参考

[DockerでReact Native環境作成から、Expo Clientで実機確認するまで](https://qiita.com/h-yoshikawa/items/51b631ec0a6beabdce2d)
[WSLでReact Native + Expo環境を作ろう](https://qiita.com/h-yoshikawa/items/610ffea888f13275cde8)
[DockerでExpo / React Nativeを実行する](https://medium.com/@hmajid2301/running-expo-react-native-in-docker-ff9c4f2a4388)