概要
手元の環境がChromeOSだったが手っ取り早くReact Native Expoの環境を作成したかったので実施。
- Cloud9上にReact Native Expoの環境を構築
- 手元のiOS、Android端末からExpo Goで疎通確認
前提条件
- AWSアカウントを準備済みであること
AWSの設定等は細かく記載していません。また、expo関連の記載も詳細には記載していません。
本記事記述時に取得した各パッケージのバージョンは以下の通りです。
ec2-user:~/environment $ nvm -v
0.39.0
ec2-user:~/environment $ npm -v
8.11.0
ec2-user:~/environment $ expo --version
6.0.2
Cloud9の準備
EC2インスタンスの作成
詳細は割愛。マネジメントコンソールから作成。
サンプルアプリの準備
expo-cliの準備
npmでexpo-cliをインストール
npm install -g expo-cli
サンプルアプリの作成
expo-cliを使用して新規アプリを作成
今回はblank (TypeScript)を指定して作成した
expo init sample-application
サンプルアプリの起動
cd sample-application
expo start
上記でMetro Bundler Serverが起動する
あとはExpo Goから接続するだけ・・・なんですが、問題が2つ。
問題と対策：２つ
問題1 ネットワークの問題
これはまぁ、当たり前といえば当たり前。
Cloud9上に起動したサーバなので、外部からのアクセスを受け付けられない。
AWSマネジメントコンソールから、EC2＞セキュリティグループの設定を確認し、
expoで使用するポート(19000 - 19006など)を開放する。
今回は、各端末が作業しているPCと同じWi-fi接続のため、接続元にマイIPを指定することで、
単一のグローバルIPに対して、接続を許可した。
また、ElasticIPを作成、割当し、外部公開のIPアドレスを固定で設定した。
問題2 QRコードがうまく表示されない問題
これはちょっとふふっwってなりましたが、
Cloud9のWebコンソール上でのQAコードの表示が・・・
AAみたいになってました。(バージョンとか設定とか・・・？詳しくは調べてないですが)
ec2-user:~/environment/sample-application (master) $ expo start
This command is being executed with the global Expo CLI.
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo start
Starting project at /home/ec2-user/environment/sample-application
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ ██▄▄ ▀▄██ █ ▄▄▄▄▄ █
█ █ █ █▀▄ █▀ █▄█ █ █ █
█ █▄▄▄█ █▄▀ █▄ ▄█▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄▀▄█ █▄▄█
█ ▄▀▀▀ ▄▄▀ ▄
█ ▄ ▀▀▄ ▄▄▀ ▄█▀ ▀▄██▄▄█▄ █
█ ▀████▀ █ █
█ ████ ▄▀▀ ██▀██▄ ▀▄ ▄ █
█▄█▄█▄▄▄█▀ ▄▄█
█ ▄▄▄▄▄ █ █▀▄▄▄█ █▄█ ███ █
█ █ █ ██▄▄▄ ▄█▄▄▄ ▄ ▄▀▀█
█ █▄▄▄█ █▀█▄█ ███ ▄▀▀██▄█ █
█▄▄▄▄▄▄▄█▄▄█▄██▄▄▄█▄▄▄███▄█
› Metro waiting on exp://xxx.xxx.xxx.xxx:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Press a │ open Android
› Press w │ open web
› Press r │ reload app
› Press m │ toggle menu
› Press ? │ show all commands
Logs for your project will appear below. Press Ctrl+C to exit.
Started Metro Bundler
※一部マスク、編集済み。
Expo GoアプリやQAコードリーダーでは表示できないので、
上記の表示内のexp://xxx.xxx.xxx.xxx:19000を別途、QAコード生成サービスを使用して
QAコードを生成し、そちらを読み込むことで対応しました。
最終的に
生成したQREコードを使用して、各端末からExpo GoでMetoroBundleServerに接続し、
expo init で生成したアプリケーションに接続することができました。