iOS、Android両方に対応するアプリを作成することができるReact Native。
最近、個人的に興味がわいたので、Docker環境作成にチャレンジしてみたのですが、あまり記事を見かけなかったので構築手順を書いておきます。
※この記事はQiitaからの転載です。
目次
※2019/9/21追記
後述しますが、自分がやった時にホットリロードが効かなかったり、エミュレータ環境との連動がうまくできなかったりしてます…。
自分のやり方が悪いだけかもしれませんが、あまりDockerで構築するメリットがないかもしれません。
※2019/9/28追記
WSLで環境作り直しました。
→WSLでReact Native + Expo環境を作ろう
前提 #
- docker導入済み
- docker-compose導入済み
環境構築手順 #
事前準備 #
React Nativeで開発をしていく上でExpoを使うと便利です。
環境構築も比較的楽に行え、アプリの内容をQRコードで発行して簡単に実機確認を行うことができます。
Expoアカウントを作成 #
- expo.ioにいき、「Create an account」を選択。
- e-mail、ユーザ名、パスワードを入力して「Create your account」を選択。
Expo Clientをインストール #
- 使用するiOS/Android端末にApp Store/Google playからインストール。
- 作成したExpoアカウントでログインしておく。
Docker環境作成 #
自分の場合は以下のディレクトリ構成で行っています。
React Native(プロジェクトフォルダ)
├─ docker
| ├─ node
| ├─ dockerfile
├─ .env
├─ docker-compose.yml
Dockerfile #
FROM "node:10-alpine"
WORKDIR /usr/src/app/
RUN apk update && apk add bash
RUN yarn global add expo-cli
後ほど、expo start
する際にbash
が必要になりますが、使用しているイメージのalpine linuxにはbash
が入っていないため、インストールしています。
はじめからbash
が入っているイメージを使用するのもありです。
React Nativeのプロジェクトを作成するCLIツールとして、以前はcreate-react-native-app
があったそうなのですが、expo-cli
に統合されたそうなのでこちらをインストール。
.env #
REACT_NATIVE_PACKAGER_HOSTNAME=(自分のローカルPCのIPアドレス)
コンテナに渡す環境変数を定義します。
REACT_NATIVE_PACKAGER_HOSTNAME
は、後ほど$ expo start
でExpoアプリをホスティングする際のIPになります。デフォルトではコンテナのIPを使用してしまうために、Expo Clientから接続することができないので、ローカルPC自体のIPを指定しておきます。
IPはWindowsでは$ ipconfig
、Macでは$ ifconfig
で確認できます。
docker-compose.yml #
version: "3"
services:
node:
build: ./docker/node
volumes:
- ./app/:/usr/src/app
tty: true
stdin_open: true
environment:
- REACT_NATIVE_PACKAGER_HOSTNAME=${REACT_NATIVE_PACKAGER_HOSTNAME}
ports:
- "19000:19000"
- "19001:19001"
- "19002:19002"
tty、stdin_open - $ docker-compose up
したコンテナを起動させたままにするために設定。
environment - .envファイルで定義した環境変数を設定。
port - Expoで使用する3つのポートを設定。
起動 #
バックグラウンドで起動
$ docker-compose up -d
RUN yarn global add expo-cli
の個所でWARNがたくさん出ますが、ERRORがなければ動いてくれると思います。(すみません、WARNの内容まではちゃんと見れていません)
Expoプロジェクト #
作成 #
# コンテナの中に入る
$ docker-compose exec node bash
# expoプロジェクト作成
$ expo init .
テンプレートが選択できます。
とりあえずはblankを選択してEnter。
bash-4.4# expo init .
? 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
Expoプロジェクトの表示名を聞かれます。
入力してEnter。
? Choose a template: expo-template-blank
? Please enter a few initial configuration values.
Read more: https://docs.expo.io/versions/latest/workflow/configuration/ ‣ 0% completed
{
"expo": {
"name": "<The name of your app visible on the home screen>",
"slug": "app"
}
}
Yarnを使ってパッケージをインストールするか聞かれます。Yでインストール実行。
? Yarn v1.17.3 found. Use Yarn to install dependencies? (Y/n)
これでExpoプロジェクトのひな型が作成されました。
起動 #
expo start
もしくはyarn start
でExpoサーバとして起動。
しばらくするとQRコードが表示されます。
Expo Clientで実機確認 #
表示されたQRコードをiOS/Android端末から読み込むと、Expo Clientが立ち上がりビルドが始まります。
なお、注意点として、ExpoサーバになるPCとiOS/Android端末は同じネットワークにつないでいる必要があります。
しばらくしてビルドが終わると初期ガイドが表示されます。
ガイドを消すと、Expoアプリの画面が表示されます。これが実行結果です。
blankテンプレートを選択したのでシンプルな画面ですね。
一連の手順で比較的楽に実機確認をすることができました。
ただ、ホットリロードがうまく動作していないのか、コードの変更が即座に反映されませんでした。なぜ…。
補足 #
http://localhost:19002 #
アクセスすると、Expo DevToolが使用できます。
ここからシミュレータを起動したりできるみたいです。
(X Code、Android Studioのインストールや設定が別途必要になるようです)
末尾にも書いていますが、自分はうまくいきませんでした…。
http://localhost:19001 #
HTMLが表示されます。
expo start
時の表示でMetro Bundlerだと書いてありましたが、なんなのかはよくわかってません。
http://localhost:19000 #
Expoプロジェクトの情報?が表示されます。
エミュレータについて(2019/9/18追記) #
自分の環境はWindowsなので、Docker環境の中にAndroidのエミュレータ環境を作ろうとしましたがうまくいきませんでした…。
一応やってみたこととしては
1.openjdkをインストール
2.Android公式からコマンドラインのzipファイルをダウンロード
3.Andoid SDKを格納するディレクトリを作成し、zipファイルを解凍して配置
4.Android SDKに関するパスを設定
5.sdkmanager、avdmanagerコマンドが実行できることを確認
6.sdkmanagerコマンドで必要なSDKをインストール
↑
ここでエミュレータをインストールしたのですが、なぜかemulatorコマンドが実行できませんでした。パスはちゃんと通しているはずなのに、ひたすらNo such file or directory
が出てしまい…。一体なんなのか。
WSLで環境構築した方が、早いかもしれませんね。
だからDockerで構築している記事がほとんどなかったんでしょうか…。