Ryusuke Nomoto

[備忘] expo-dev-clientとEAS Buildを使うモチベーションと、導入時の手順・はまりどころについて

個人開発でexpoを利用しており、課金系ライブラリをいれたときにexpo-dev-clientとEAS Buildを使う必要でてきたので備忘として残しておきます 🙆‍♂️

 

背景: expo-dev-clientとEAS Buildを使うモチベーション

 
  • 個人開発をする中で、課金系のライブラリを使う必要がでてきた
    • 課金系のライブラリを使う際はNativeの機能を利用する必要あり、Expo Goを活用した開発から脱却し、Development buildを使った開発へ移行する必要がある
  • Development buildはexpo-dev-clientを内包したビルドのこと
  • expo-dev-clientを利用することでAndroid/iOSのプロジェクトソースを自動生成し、アプリをその場でビルドすることができるようになるらしい
    • これにより、課金系含むすべてのReact Nativeのライブラリを利用することができる
  • EAS Buildを使ってDevelopment buildを簡単に作成できる
 

手順とはまりどころ

前提

  • Expo Managed Workflowで開発していたプロジェクトが既にある
  • iPhoneの実機で開発・デバッグできることを目標とする
 

必要なパッケージのインストール

npm install -g eas-cli npx expo install expo-dev-client
 

ビルド設定

プロジェクトルートで以下を実行
eas build:configure
 
すると、 eas.jsonが作成される。
{ "build": { "development": { "developmentClient": true, "distribution": "internal" }, "preview": { "distribution": "internal" }, "production": {} } }
 
続いて以下のコマンドを実行し、デバイスを登録する。
eas device:create
 

ビルド実行

以下のコマンドを実行する
eas build --profile development --platform ios --local
ハマりポイント1: buildは—localで実行する
localオプションをつけるとeas buildをローカルで実行してくれる。
つけないとクラウド上での実行となる。
Expoの無償プランの場合30回までしかクラウド上で実行ができず、またビルド処理がキューに積まれて実施をまたされるため、実行にとても時間がかかってしまう。
ハマりポイント2: buildに必要な各種ライブラリがないと怒られる

TLDR;

  1. brew install fastlane でfastlaneいれる
  1. sudo gem install cocoapods でcocoapodsいれる
  1. certificateで怒られたらこれを試す
    1. https://github.com/expo/eas-cli/issues/1331#issuecomment-1235603312

Fastlaneについて

FastlaneはHomebrew経由で入れるとバグるという噂があったのだが、試したら特に問題おきなかったのでbrewでいれた。
 

Cocoapodsについて

これも同様にHomebrew経由で入れたが、次の問題が起きてしまった。
flutter/flutter/issues/118295
多分、Cocoapodsが内部的に使っているrubyのバージョンとeas buildで自動生成されて作られたrubyファイルのバージョンの不一致から、解釈できない構文を使ってしまっていることが原因のよう。
expoやreact nativeのバージョンを上げる対応もしたが別の問題が起きてしまい行き詰まったので、Cocoapodsはgem経由でいれることにした。
rbenvを使ってrubyのバージョンを指定する。
rbenv install 3.1.2 rbenv global 3.1.2
gem経由でcocoapodsを入れる
brew remove cocoapods # brewでいれたcocoapodsを外す sudo gem install cocoapods
 

Certificateがないと怒られた

これを試したら直った
 
ビルド成果物として、 ipaファイルが作成される。

実機へインストール

実機へのインストールは以下の記事に従い、 Apple Configuratorを経由して実機へインストールする
 
インストール後、以下のコマンドを実行
expo start --dev-client
表示されたQRコードをiPhoneのカメラで読み取るとアプリが起動する
ハマりポイント3: QRコードを読み込んでもなにも表示されない
ビルド成果物を実機にインストールしないとこの問題が起きる。
eas buildのローカル実行 + 実機検証の組み合わせの記事がなく、なぜこの問題が起きるのかわからず地味に苦労した。
 
以降は、Javascript, Typescript部分の変更についてはExpo Goと同じように修正したら即反映される。(とっても便利)
ネイティブコード部分を修正した場合は再度ビルドが必要。

参考記事

Expo アプリを EAS Build でローカルビルドしてみた - Qiita
Expo アプリは基本クラウド上でビルドしますが、EAS Build (Expo 向けの次世代ビルドサービス) にローカルビルドの機能があったので試してみました。試したのはiOSのみですが、Androidにも対応しています。 EAS Buildは、Expo Application Servicesのビルドを行うための次世代のビルドサービスです。 EAS Build (クラウド上のビルドサービス) EAS Submit (クラウドからアプリストアにサブミットするためのサービス) EAS Update (OTAでアップデートを提供するためのサービス(まだ使えない)) 2021/5時点では、EAS Build、EAS Submit は、EASのPriorityプランに入ると機能プレビューとして使えるようになるみたいですが、EAS Buildのローカルビルドについては、Freeプランでも試すことができます。 なお、2021/5時点ではEAS BuildはFeature Previewなので、まだお試し段階だと思います。 EAS Buildは、クラウド上のビルドサービスですが、ローカルでビルドするための--local オプションがあります。 以降、試したときの手順です。 Expo アカウントが必要 Apple Developer Programアカウントが必要 iOSアプリのローカルビルドにはMacが必要なので、Macの利用が前提 また、ローカルビルドのため、React Nativeアプリがビルドできるようにセットアップしておく必要があるかもしれません、不要なのもあるかもしれませんが下記をセットアップした状態から始めました。 なお、以下の手順ではiOSアプリに関連する、証明書、プロビジョニングプロファイル、デバイス登録などは、事前に用意、実施しています。 EAS Buildでローカルビルドするのに必要なnpmパッケージを、グローバルインストールします。 適当なExpoプロジェクトを用意し、移動します。 取得済みのExpoアカウントでログインします。 を参考に、コマンドを実行して対話的に設定します。 設定後、 eas.json が作成されます。 今回は、iOSのみ試すので、iOSを選択します。 app.jsonにbundleIdentifierがない場合、bundleIdentifierの入力が求められるので入力します。 変更をGitにコミットするか確認されるので、差分を確認してから、コミットします。 eas build コマンドでは、未コミットの変更があると実行できないため、コミットが必要になります。 ビルドする際の細かな設定をします。 app.jsonにビルド番号を追加します。 eas.jsonにビルドで指定する、プロファイルを追加します。 上記の例では、previewというプロファイルを追加し、 distributionを、AdHocビルド用のinternalと指定 credentialsSourceを、証明書やプロビジョニングプロファイルの指定をローカルでするためにlocalと指定 しています。もし、ストアで公開するためのビルド(store)で、証明書やプロビジョニングプロファイルをリモートのEAS側で管理する場合(remote)は、追加はしなくてもよいです。 設定値などは、次などを参考に。 eas.jsonでcredentialsSourceをlocalとした場合、証明書やプロビジョニングプロファイルの指定をします。 証明書やプロビジョニングプロファイルを配置します。 ios-certs/cert.p12 ios-certs/プロファイル名.mobileprovision 置き場所は、次の設定ファイルで指定するため、ある程度任意ですが、 ios ディレクトリを作ってしまうと、ローカルビルドが実行できなかったのでiosディレクトリ以外にした方が良さそうです。Managed Workflowとして判定されなくなる? 証明書やプロビジョニングプロファイルの情報は、credentials.json で指定します。 .gitignoreに、Gitコミットの対象外ファイルを追加します。 *.ipa : ビルド後のファイル ios-certs/ : 証明書やプロビジョニングプロファイルを置いたディレクトリ credentials.json : p12ファイルのパスワードを書いているので念のため eas buildをする時、Git コミットが必要になるので、あらかじめ差分を確認してコミットします。 設定が終わったら、次のコマンドでビルドします。 profile: ...
Expo アプリを EAS Build でローカルビルドしてみた - Qiita
2021年版 Expoまとめ - Qiita
Expoのここ3年くらいの動きが慌ただしかったため、用語整理も兼ねてまとめる 動きを大まかにまとめると、 2018/12ごろの「 ExpoKit 2019 - And bringing Expo APIs to bare React Native 」で、それまでのExpoKit(なんだっけこれ)での開発体験がよくなかったとのことで、Bare Workflowの構想が始まる 2019/6のSDK33でBare Workflowがリリースされる 2019年はそれまでのモノレポ(@expo/expo)からreact-native-unimodulesへの分離・移行が進む 2020/6のSDK38でExpoKit終了 2021/1にEAS Build発表 2022/6予定のSDK46で従来のビルド(Classic Build、expo build)のサポート終了 expo.ioによるクラウドビルドによって、アプリ開発環境をローカルに構築しなくてもリリースビルドまで作れてしまう機能を早くから提供していた※ただし、アプリストアへのリリースは、ビルドを手でDLして手で上げにいく形だった ※いつの間にかドメインが expo.dev に変わっていた リリースに必要なAndroid/Appleの証明書等はexpo.io上に預けておくことができる 以前はexpo.ioにログインしても預けた証明書等を見ることはできなかったが、2021年のEAS Submitリリースに合わせて管理画面も刷新し証明書の閲覧や更新が画面上で出来るようになった (記憶違いかもしれないが)Organizationアカウントにメンバーを招待することができたが、以前はeas buildを実行するときにログインするユーザーはオーナーアカウントではなくてはならず、チーム開発しにくかったいつのまにか が出来ていて、organizationに招待されていればメンバーのアカウントでもコマンドが使えるようになっており、チーム開発もしやすくなった 2年ほど前に今後のリリースサイクルが発表され、3カ月ごとに年4回リリースされることになった 直近は2021/12にSDK44がリリースされた 予定通りだと2022年は45,46,47,48がリリースされるはず 最新バージョンから数えて4バージョンしかサポートされない サポートが外れたバージョンはExpo Goでビルドできない 非常にややこしい話だが、ReactNativeを使っているはずのExpo SDKで開発したアプリでもReactNativeのネイティブ部分を自由に扱うことはできなかった サードパーティのReactNativeモジュールをインストールしてもネイティブコードの修正部分をアプリに反映することができないため正常な動作とならず、利用できるモジュールは限定的だった ※GoogleAnalyticsのReactNative SDKなどを入れても何も送信されることはなかった また、Expo SDKで利用しているReactNativeはExpo用のForkプロジェクトであり純粋なReactNativeではなかった(Expo42まで) SDK33より Bare Workflow が登場した $ expo eject コマンドを実行することで、ios/ android/ フォルダにネイティブコードが生成されるというものだった 生成されたフォルダはXcodeやAndroid Studioでそのまま開くことができ、これによりネイティブコードも好きにいじれるようになった その反面、Expoの恩恵には与れなくなり、アイコン類の自動生成、Expo Goでの実行、クラウドビルド、証明書の管理、PUSH通知 など多くの機能が手作業実装となり手間が増えた Expo SDKのバージョンアップ後にもネイティブ側への必要な修正を手作業で行う必要があり非常に手間であった Bare Workflowが登場したことで従来のexpo.ioを用いた開発方法は Managed Workflow と呼ばれるようになった Expo managed workflow in 2021 - Apr 22, 2021 2021年4月のSDK 41より、新しいビルド方法による開発フローが利用できるようになった EAS Build によりネイティブコード生成を含むビルドもクラウドビルドすることが可能となった また、ビルドだけではなくストアへのリリースまでサポートすることが発表された (EAS Submit) EAS は Expo Application Services
2021年版 Expoまとめ - Qiita
 

badge