AWS EC2上でReact Native + Expo アプリを動かし、手元のスマホに配信する方法

概要

React Native + Expoを使用すると、エミュレータだけではなく、実機でも手軽にアプリの動作を確認することができます。
ただし、制約もあります。

実機への配信は、同一のネットワークからでなければ配信することができない
配信元はローカルのPCとなるので、マシンスペックが高くないと作業効率が落ちる*1

ウチの会社では3月末まで自宅勤務推奨期間で、ほとんどのメンバーが自宅からリモートで業務を行っています。
このような状況から、同一のネットワーク、ローカルPCから配信することは現実的ではなくなったため、さくっとクラウド内だったり、SaaSを使って痛みから開放されないか模索しました。

今回は模索した先にたどり着いたAWS EC2上でReact Native + Expo アプリを動かし、手元のスマホに配信する方法について紹介します。

候補

候補になったのは複数あります。

AWS EC2から配信
Appetize
Genymotion Cloud ...

などなど、候補はいくつかありますが、安価で手っ取り早く解決できそうだったAWS EC2にしました。
(初手で解決できてしまったのもあり...、しっかり比較検討できませんでした)

手順

EC2の設定

まずはEC2を起動します。
ExpoでJavaScriptビルドが複数走るので、インスタンスタイプはC系が良いでしょう。

nodeのインストール

expo-cliを使用するために、nodeをインストールします。

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash
$ . ~/.nvm/nvm.sh
$ nvm install stable
$ node -v

続いて、ExpoのプロジェクトでYarnを使用している(いた)ので、それもインストールします。

$ npm install -g yarn
$ yarn install

最後に、expoコマンドを使用するためにexpo-cliをインストールします。

$ npm install --global expo-cli

EC2からの配信確認

EC2から配信するためには、2つやることがあります。

配信方法にtunnelを指定する
バックグラウンド起動しておく(nohup ~~~ &)

配信方法にtunnelを指定すると、Expoがインターネットを経由してビルドしたファイルを配信します。
また、バックグラウンド起動については、単純にexpo startとしてしまうと、フォアグラウンドで実行されてしまうため、ssh接続を終えてしまうと、プロセスも切れてしまいます。それを回避するためにバックグラウンド起動をします。
コマンドは以下の通りです。