Expo Application Services(EAS)でReact Nativeアプリをビルドしてみた 【CI/CD】

EAS BuildでReact Nativeのビルドはもっと簡単になるのか？試してみました！

Expo Application Servicesって何？

Expo Application Services(以下EAS)は、Expoが提供するReact Native開発者のためのツール・セットです。

・EAS Build:  React Nativeアプリのビルド
・EAS Submit: React NativeアプリのApp Store/Google Play Storeへのサブミット
・EAS Update(準備中): ストアにリリースせずにアプリのコードを更新するOver The Air Update

など、React Nativeアプリケーションを配信するための便利な機能が提供されています。

Expo

EASでReact Nativeアプリケーションをビルドしてみた

U-motion開発チームではReact Nativeアプリのビルドに Bitrise を導入済みです。Bitriseは様々なプラグインを組み合わせてモバイル・アプリケーションのビルドを実行できるCI/CDツールで大変便利なのですが、プロジェクトのサイズが大きくなるとともに若干ビルドに時間がかかりタイムアウトが発生しがちになっていたこともあって、EAS Buildを試してみることにしました。

EAS Buildのドキュメントはこちらにあります。

Creating your first build - Expo Documentation

あらかじめ用意するもの
アプリケーションのビルドには下記の情報が必要です

・Apple Developerアカウント
・Google Developerアカウント
・Expoアカウント

expo-cliをインストール
まずは、コマンドラインツールをインストールしていきます。

$ npm install -g eas-cli

Expoにログイン
EASを利用するにはExpoアカウントが必要です。アカウントはExpoのウェブサイトで作成できます。作成したアカウントでログインします。

$ eas login

EAS設定を初期化
今度はEASを利用するための設定ファイルを作成します。

$ eas build:configure

Ad-Hoc配信のためのデバイスUUIDの登録
AppStoreでAd-Hoc配信をする場合は事前にデバイスIDを登録しておきます。

$ eas device:create

ストア配信用証明書の登録
配信用の証明書などは初回のビルド時に登録します。AppStore Application Specific Passwordを登録すると、APIを介してウィザード形式でプロビジョニング・プロファイルの作成までやってくれます。

クレデンシャルやトークンはExpoの「Secrets」に保存
Firebaseで利用する GoogleService-Info.plist などは git commit の対象にせず、ビルド時に別途差し込んでいる運用が多いと思います。EAS Buildではセンシティブな情報を管理するExpoのSecretsの値を環境変数として参照できます。

npmスクリプトで GoogleServices-Info.plist に書き出します。またAPIサーバのURLなどもSecretsから環境変数にセットして「dot-env」でソースコードに取り込んでいます。

// package.json
 "scripts": {
   ・・・
   "eas-build-pre-install": "echo $DotEnvIOS_Debug > .env; source .env; 
        echo $GoogleServiceInfoPlist_Debug > ios/GoogleService-Info.plist"
 },

ビルドを実行
あとはコマンドラインからビルドコマンドを実行するだけです。ビルドするプラットフォームによってコマンドの引数が異なります。

# Androidビルドを実行する場合
$ eas build --platform android 

# iOSビルドを実行する場合
$ eas build --platform ios 

# iOS/Android両方のビルドを実行する場合
$ eas build --platform all

Expoの無料プランの場合、ビルドはほかのユーザーと共通のキューに入って順番が来るとビルドが開始されます(公式サイトの説明では10〜20分待ち)。有料プランに入ると、待ち時間なしにビルドを開始できるようになります。

ビルド時間はBitriseより短い結果に

ビルド・コマンドを実行して暫く待っていると、ビルドが完了しました。

Expoで初期化して２画面ほど追加した簡易的なアプリケーションでは、合計時間は10分程度でした。

この後でU-motion用スマホ・アプリUM Utilsも試しにビルドしてみたところ、合計で25分ほどかかりました。依存しているライブラリの数が増えると当然ビルド時間も伸びていきますが、このアプリは普段 Bitrise でビルドしているときはiOS版は45分ギリギリかかっているので、それと比べると早いですね。

BitriseではAppStore Connectへのアップロードなどのステップも動かしているので若干の誤差はありますが、BitriseのDeveloperプランが$40/月でEASは$29/月なのでコストパフォーマンスは良いと言えるでしょう。

EASのメリットと現状の懸念点

Expoが提供するEAS Buildを使って、React Nativeアプリケーションをビルドしてみました。実際に手を動かしてみて感じたメリットについて、いくつか書いてみます。

設定がほぼ不要
ほぼ設定無しでReact Nativeアプリをビルドできるようになる手軽さは高評価です。Bitriseやその他のビルド・サービスでは、React Native向けにビルド・プロセスをカスタマイズする必要がありますが、EASはコード・サインの情報などを除くとほぼ設定が必要ありません。

Cocoa Podsのインストール、コード・サインなども自動でやってくれるので、React Nativeのプロジェクトなら導入コストは最小と言っても良いでしょう。

OTA、ストア配信の機能がビルド・サービスに統合されている
またストアへの配信をサポートしてくれるEAS Submitも魅力的です(執筆段階では未テスト)。
そしてまだ準備中ですが、React NativeならではのOver The Airアップデートを簡単に配信できるEAS Updateも提供がアナウンスされています。U-motion開発チームでは、OTAアップデートにMicrosoft AzureのApp Centerを利用しているのですが、EASなら使用するサービスを統一できそうです。
また、EASとは別にExpoの機能としてプッシュ通知のサービスも提供されています。

懸念点
懸念点としては、ビルドに使っているXcodeのバージョンやOSイメージのバージョンを選択することが今の所はできない点があげられます。Bitriseでは設定画面からＯＳバージョンやXcodeのバージョンを選択できます。
Xcodeのバージョンに起因するエラーなどからバージョンを低いままキープする場面もあると思うので、こうした点は若干気になりました。

また、まだ若いサービスであるため外部のノウハウが蓄積されておらず、踏み抜かれていない地雷がある可能性も考慮は必要でしょう。

まとめ

React Nativeに特化したCI/CDツールということで、ビルドまでの手間が少ないのはとても良いと思いました。最後に書いた懸念点もありますが、今後のサービス選択の選択肢に加えたいと思える内容でした。

みなさんも、ぜひいちど試してみてください。

おまけ: U-motion開発部はテクノロジーで農家さんに貢献したいエンジニアを募集中です！！

デザミス株式会社では、JavaScript/Reactでフロントエンド開発をしたいエンジニアと、バックエンド・エンジニアを募集中です。

こちらからお気軽に問い合わせてください。面接は無しでまずはカジュアル面談から、という方も大歓迎です。

採用情報| デザミス株式会社 desamis Co.,Ltd.

フロントエンド
・React + TypeScriptを使った大規模なアプリケーション開発
・React Nativeを使ったネイティブ・アプリケーション開発

バックエンド
・大量のデータを扱うバックエンド開発(Rails、Python、AWS)

はじめてこのブログを読んだ方へ: U-motionとは？

U-motionは牛の首につけたセンサーを使って活動内容を記録、AIの力で健康状態を解析して畜産農家さんをサポートするモニタリング・システムです。

ユーザー様の声

プロダクト紹介

U-motion（ユーモーション）| デザミス株式会社 desamis Co.,Ltd.

テレビ朝日夕方のニュース番組「スーパーニュースJ」でも紹介されました

牛にタグつけAIが体調管理　人工授精にも活用可能