本記事は東京学芸大学 櫨山研究室 Advent Calendar 2020の14日目の記事になります．

はじめに

本記事ではExpoを使ったReact Nativeでのアプリケーション開発にDockerを使用する際のTipsを紹介します．

概要

• ローカルのIPが変わるたびにREACT_NATIVE_PACKAGER_HOSTNAMEで設定し直すのは面倒である．
• なのでシェルスクリプトでどうにかする💡

Expoとは？

ExpoはユニバーサルなReactのフレームワークです．
React Nativeのエコシステムに則っており簡単にクロスプラットフォームで動作するアプリケーションを作成することができます．

Expoで作成したアプリケーションの実機での動作確認

Expoではyarn startコマンドを実行すると以下のようにQRコードが表示されます．

iPhoneにExpo Clientアプリを入れておくことで開発中のアプリケーションの動作を実機で検証することができます．

このとき検証に用いる実機デバイス(iPhone)と開発マシン(PC)は同じネットワークに接続する必要があります．

よって開発環境に仮想マシンやDockerを使う場合では設定をする必要があります．

ExpoをDockerで動作させる

とりあえずDockerfileを用意します．
JSのバージョンは14.0にしておきます．

FROM node:14.4.0-alpine

WORKDIR /usr/src/

RUN apk update && apk add bash

RUN yarn global add expo-cli

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

またポートの設定も必要になるので以下のようなdocker-compose.ymlを用意します．

version: '3.7'

services:
  expo:
    container_name: expo
    build:
      context: ./
      dockerfile: ./Dockerfile
    working_dir: /app
    volumes:
      - ./:/app:cached
    environment:
      - REACT_NATIVE_PACKAGER_HOSTNAME=${LOCAL_IP_ADDR}
    command: yarn start
    ports:
      - 19000:19000
      - 19001:19001
      - 19002:19002

ExpoをDockerで動作させる場合には動作させるコンテナの環境変数REACT_NATIVE_PACKAGER_HOSTNAMEにローカルのIPアドレスを指定する必要があります．
docker-composeでは.envファイルを用意しておくと読み取ってくれるので以下のように記述しておきます．

 REACT_NATIVE_PACKAGER_HOSTNAME=ローカルIPアドレス

しかしmacbookなどの端末で開発していると移動先などでローカルIPが変わり少し手間になります．

そこでコンテナ起動時に.envファイルのIPアドレスを書き換えることで対処します．

具体的には以下のようなシェルスクリプトget-local-ip-addr.shを用意します．

#!/bin/bash

IP=`ifconfig | grep inet | cut -d " " -f2 | grep "[0-9]*\.[0-9]*\.[0-9]*\.[0-9]*" | awk 'NR==2'`
sed -i".bak" -e "/LOCAL_IP_ADDR=/d" .env
echo "LOCAL_IP_ADDR=$IP" >> .env

行っているのは以下のような簡単な処理です．

1. ifconfigコマンドでIPアドレスを調べる．
2. sedコマンドで.envファイルに記述されている環境変数REACT_NATIVE_PACKAGER_HOSTNAMEの情報を削除する．
3. 1.で取得したIPアドレスを.envファイルに書き込む．

このスクリプトをdocker-compose upコマンドの前に実行する必要があります．
そこでMakefileを用意してタスクとして登録します．

expo:
    ./get-local-ip-addr.sh
    docker-compose -f docker-compose.yml up --remove-orphans

これで以下のコマンドで立ち上げることができます．

make expo

おわりに

Dockerを使ってExpoを動作させる際のTipsを紹介しました．

なお本記事のシェルスクリプトの記述はmacOS依存です，ご了承ください🙇‍♂️