React Native + ExpoのアプリにHermes、EAS Build、EAS Submitを導入した
以前、React Native + Expoでアプリを作って公開したという記事を書きました。
その後も不具合修正やUI改善のアップデートを細々としていますが、この度HermesとEAS Build、EAS Submitを導入してみました。
Hermes
HermesはReactNative用に最適化されたオープンソースのJavaScriptエンジンです。従来のJSCでビルドするよりも、起動時間が短縮し、メモリ使用量も少なくなり、バイナリサイズも小さくなるようです。
これを使わない手はないよね、ということで導入してみました。
app.configにjsEngine: 'hermes'を追記します。
import { ExpoConfig, ConfigContext } from '@expo/config'
export default ({ config }: ConfigContext): ExpoConfig => ({
...config,
jsEngine: 'hermes'
})
効果
ファイルサイズがめちゃくちゃ小さくなりました。
| JSC（従来） | Hermes | |
|---|---|---|
| iOS | 58.1MB | 15.0MB |
| Android | 58.0MB | 29.1MB |
特にiOSでファイルサイズが小さくなりました。ファイルサイズは小さければ小さいほどいいので、これはありがたいです。
起動時間は元から速かったので体感ではあまり分からず、メモリ使用量については「多少動作が軽快になったかな？」という感じでした。個人開発のシンプルなアプリなので、もっと複雑なアプリだと大きな違いがあるかも知れません。
Hermesの設定自体は上記だけで終わりですが、従来のexpo buildではなくEAS Buildでアプリをビルドする必要があります。
EAS Build
EAS (Expo Application Services)はExpo向けのクラウドサービスで、EAS Buildはその１機能です。
早速設定していきます。
# EAS CLIをインストール
$ npm install -g eas-cli
# Expoアカウントでログイン
$ eas login
# 設定ファイルを生成
$ eas build:configure
eas.jsonというファイルが作られるので、編集します。以下のガイドを参考に設定します。
eas.jsonの編集
僕はこんな感じにしました。
{
"cli": {
"version": ">= 0.42.4"
},
"build": {
"development": {
"distribution": "internal",
"ios": {
"simulator": true
},
"android": {
"buildType": "apk"
},
"releaseChannel": "dev-x.x.x"
},
"staging": {
"distribution": "internal",
"releaseChannel": "staging-x.x.x"
},
"production": {
"releaseChannel": "prod-x.x.x"
}
}
}
Internal Distribution
developmentとstagingでは"distribution": "internal"と指定しています。developmentではシミュレータ向けにビルドしているのであまり意味はないんですが、stagingビルドでこの指定をしておくと、iOS、Androidともにアプリを実機に直接インストールすることができて便利です。
iOSでは端末の登録？とプロファイルのインストールが必要です。
こんな感じでExpoのサイトからアプリを直接インストールすることができる
アプリをiPhoneの実機にインストールするために、今までは
- ビルド
- Expoのサイトに行って.ipaファイルをダウンロード
- TransporterでApp Store Connectにアプリをアップロード
- 輸出コンプライアンス情報を提出
- TestFlightでアプリをインストール
という手順を踏む必要がありましたが、
- ビルド
- Expoのサイトに行ってアプリをインストール
だけで良くなり、めちゃくちゃ実機確認が楽になりました。
Release Channel
expo buildでは--release-channelというオプションをつけてビルドができましたが、EAS Buildではそのオプションがなくなり、eas.jsonにreleaseChannelを書く必要があります。とはいえEAS BuildではRelease Channelの必要性がそこまで高くなくなりました。
従来のexpo buildでは、ビルドしたときにexpo publishも同時におこなわれてしまう仕様でした。なので、Release Channelを分けずにビルドしてしまうと、開発ビルドのコードが本番ビルドにも配布されてしまうという問題がありました。
EAS Buildでは事前にpublishされることがなくなったので、明示的にexpo publishしない限りはユーザーにコードが配布されなくなりました。
とはいえRelease Channelが設定してあるとExpoのサイトでどのバージョン、どのプロファイルかが分かりやすくなるので、引き続きRelease Channelは設定するようにしています。
Release Channelを付けておくとビルド一覧を見た時に分かりやすい
本当はnpm scriptでRelease Channelを動的に設定…みたいなことがやりたいですが、いったんはeas.jsonにバージョンをベタ書きする運用にしました。バージョンアップするときにeas.jsonを編集する感じです。
ちなみにexpo publishコマンドはEAS Build環境下でも使えて、--release-channelオプションも使えるので、ストアに申請するほどでもないアップデートは従来どおりOTAで配布できます。
EAS Submit
EAS Submitは、Expo経由でアプリをApp Store / Google Playに提出できる機能です。
eas buildコマンドに--auto-submitというオプションがあり、ビルドが終わるとApp Store / Google Playにアプリを自動で提出してくれるようになります。とても便利。
eas.jsonを編集します。
{
"cli": {
...
},
"build": {
...
},
"submit": {
"production": {
"ios": {},
"android": {
"track": "production",
"releaseStatus": "draft"
}
}
}
}
"build"ブロックの下に"submit"ブロックを追加します。ほぼ未設定ですが、Androidは未設定だと「内部テスト/完全公開」になってしまいます。まぁ内部テストから製品版に移行できるので問題ないですが、個人的には「製品版/下書き」になって欲しいので、"track": "production"と"releaseStatus": "draft"を設定しています。
# productionビルド（自動提出）
$ eas build --profile production --platform all --no-wait --auto-submit
そして上記のコマンドを打つと、自動でiOSとAndroidのビルドをしてくれて各ストアに提出までやってくれます。
今までは、
- ビルド
- (iOS) Expoのサイトに行って.ipaファイルをダウンロード
- (iOS) TransporterでApp Store Connectにアプリをアップロード
- (iOS) 輸出コンプライアンス情報を提出
- (iOS) リリースノートを書いて申請→公開
- (Android) Expoのサイトに行って.aabファイルをダウンロード
- (Android) Google Play Consoleに.aabファイルをアップロード
- (Android) リリースノートを書いて申請→公開
という手順が必要だったのが、
- ビルド
- (iOS) 輸出コンプライアンス情報を提出
- (iOS) リリースノートを書いて申請→公開
- (Android) リリースノートを書いて申請→公開
だけやればよくなり、上で書いたInternal Distribution以上に作業工数が短縮されて本当に快適です。
最後に
expo buildからEAS Buildへの移行は多少大変でしたが、移行ドキュメントもしっかり用意されているので分かりやすかったです。Expoがドキュメントが本当に分かりやすくて良いです。
そして何より、EAS Build & EAS Submitによって実機確認やストア提出の工数が圧倒的に削減されたのが最高です。EAS Buildに移行すればHermesによるファイルサイズや動作の軽量化の恩恵も受けられます。
React Native + Expoで開発している場合は是非導入を検討してみてください。
ちなみに作っているアプリはこちらです。良かったら使ってみてください！
Discussion