💫
eas.jsonを設定して、developmentでビルドする方法

2024/11/20に公開
 はじめにeas.jsonを設定したので、developmentでビルドできるか検証しました。

 eas.jsonとは?eas.jsonとは、ExpoのEAS (Expo Application Services) を使用する際の設定ファイルです。

このファイルは、Expoアプリのビルドプロセスやストア提出プロセスを管理するための構成情報を記述するために使用されます。

eas.jsonを使用すると、開発・プレビュー・本番環境ごとに異なる設定を簡単に管理できます。

 EASとは？EAS (Expo Application Services) は、Expoが提供する次のようなサービスの総称です。
EAS Build: Expoプロジェクトをクラウドでビルドし、iOSやAndroidのアプリを生成。
EAS Submit: アプリストア（Google PlayやApp Store）への提出を自動化。
EAS Update: アプリのコードやアセットをリアルタイムで更新。
EAS CLI: これらのサービスをコマンドラインから操作。

 eas.jsonを設定eas.jsonに下記の内容を記載
eas.json
{
  "cli": {
    "version": ">= 10.2.4",
    "appVersionSource": "remote"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {
      "autoIncrement": true
    }
  },
  "submit": {
    "production": {}
  }
}


 ビルド準備easがインストールされているか確認
$ eas login
されていなかったらインストール
$ npm install -g eas-cli
ビルドします。
$ eas build:configure
上記のコマンドを打つと、下記の質問が出てきます。
✔ Would you like to automatically create an EAS project for @mii/mobile? … yes
✔ Which platforms would you like to configure for EAS Build? › All
🎉 Your project is ready to build.と書かれたら完了です！

 developmentでビルドpreview,productionもあるのですが、今回はdevelopmentのビルドを行なっていきます。
下記のコマンドを実行
$ eas build --profile development --platform all
コマンド実行後、質問が出てきますので、答えていく。
✔ Do you want EAS CLI to install expo-dev-client for you? … yes
✔ What would you like your Android application id to be? … com.mii.app
✔ Generate a new Android Keystore? … yes
yes or no初めてのビルドでまだKeystoreを持っていない場合は、y（Yes）を選択。

Expoが新しいAndroid Keystore（署名に必要な証明書ファイル）を自動生成します。

KeystoreはExpoのサーバーに安全に保存されます。
既存のアプリを更新する場合は、n(No)を選択。

確認が必要: すでにGoogle Playに公開されているアプリの更新ビルドである場合、以前のKeystoreで署名する必要があります。

新しいKeystoreを生成してしまうと、Google Playは署名が異なると判断し、アプリの更新を拒否します。
✔ What would you like your iOS bundle identifier to be? … com.mii.app
? Do you want to log in to your Apple account? › (Y/n)

Apple IDを入れます。

? Generate a new Apple Distribution Certificate? › (Y/n)

yes or no初めてのビルドの場合は、Yを選択。

新しい証明書を生成してください。

まだApple Distribution Certificateを持っていない場合、Expoが自動で生成し、必要な設定を処理します。
すでに証明書を持っている場合は、nを選択。

Expoに既存の証明書を使用させることができます。
? You don't have any registered devices yet. Would you like to register them now? › (Y/n)
yes or no開発用ビルドを作成してテストしたい場合は、Y（Yes）を選択。

まだ登録されていないデバイス（iPhone、iPad）を Apple Developer アカウントに追加し、ビルドに使用できるようにします。

登録したデバイスでのみテスト用アプリをインストールして実行できます。
App Store への配布ビルドを作成する場合は、N（No）を選択。

App Store で公開するビルドには、特定のデバイス登録は必要ありません。

Expo CLI の質問をスキップしてそのまま進めてください。
デバイス登録を手動で行いたい場合は、N（No）を選択。

手動でデバイスを Apple Developer Portal に登録します。
? How would you like to register your devices? › - Use arrow-keys. Return to submit.
selectWebsite（おすすめ）

デバイスを登録するための専用URLを生成し、登録したいiOSデバイスでそのURLを開きます。

デバイスのUDIDが自動的に取得され、Apple Developer Portalに登録されます。

簡単で、複数のデバイスを素早く登録可能。
Developer Portal

すでにApple Developer Portalに登録済みのデバイスをインポートします。

Apple Developer Portalでデバイスを登録済みの場合に適しています。

既存デバイスの登録情報を再利用でき、手間が省ける。
Input

手動でUDIDを入力してデバイスを登録します。

高度なオプションで、特定のデバイスだけを直接登録したい場合に使用。

UDIDを正確に把握している場合、無駄なく登録可能。
Current Machine

現在使用中のApple Silicon Macをデバイスとして登録します。

macOSアプリの開発で、Macを直接テストデバイスとして使いたい場合に便利。

macOSデバイスでのみ必要になる特殊なケース。
Exit

デバイス登録を中断し、操作を終了します。

デバイス登録を今は行いたくない場合、または登録方法を再検討したい場合に使用。
Websiteを選択すると、これが出ます。


 デバイス登録方法QRコードを登録したいデバイスで読み取る

デバイスにこちらの画面が出ます。ダウンロードプロファイルを押下します。

ダウンロード済みのプロファイルを押下して

インストールを押下します。

こちらの画面になれば完了です！

登録してビルドしていたらエラーがでたので対応エラーが発生

ビルドログを確認

リンクから失敗したビルドの詳細ログを確認します：
Android ビルドログ:

Android build details

iOS ビルドログ:

iOS build details
- Creating native directory (./android)
✔ Created native directory
- Updating package.json
✔ Updated package.json
- Running prebuild
✖ Prebuild failed
Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, open './assets/images/adaptive-icon.png'
Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, open './assets/images/adaptive-icon.png'
    at Object.openSync (node:fs:603:3)
    at readFileSync (node:fs:471:35)
    at calculateHash (/home/expo/workingdir/build/node_modules/@expo/image-utils/build/Cache.js:14:91)
    at createCacheKey (/home/expo/workingdir/build/node_modules/@expo/image-utils/build/Cache.js:19:18)
    at Object.createCacheKeyWithDirectoryAsync (/home/expo/workingdir/build/node_modules/@expo/image-utils/build/Cache.js:28:33)
    at generateImageAsync (/home/expo/workingdir/build/node_modules/@expo/image-utils/build/Image.js:211:34)
    at async generateIconAsync (/home/expo/workingdir/build/node_modules/@expo/prebuild-config/build/plugins/icons/withAndroidIcons.js:352:11)
    at async /home/expo/workingdir/build/node_modules/@expo/prebuild-config/build/plugins/icons/withAndroidIcons.js:276:21
    at async Promise.all (index 0)
    at async generateMultiLayerImageAsync (/home/expo/workingdir/build/node_modules/@expo/prebuild-config/build/plugins/icons/withAndroidIcons.js:272:3)
Error: Unknown error. See logs of the Prebuild build phase for more information.
Build failed: Unknown error. See logs of the Prebuild build phase for more information.
実際のExpo画面

Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, open './assets/images/adaptive-icon.png'
このエラーは、必要なアイコンファイルが存在しなかったため発生しています。

サンプルからassets/images配下の画像を全部コピペして持ってきました。
これでビルドができました🎉

 デバイスで見れるか確認ビルドができたら、下記のQEコードが出てきます。
iOSのリンクを押下

installを押下

この画面が出てきます。

このQRコードを読み込むと、このモーダルが出るので、インストールを押下します。

これでアプリがインストールされました🎉

アプリを開こうとしたら、ディベロッパーモードにする必要があったので、設定します。


 ディベロッパーモードの設定ディベロッパーモードをオンにします。

再起動します。

再起動し終わったら、オンにします。

アプリを開くとこの画面になります！


 アプリを立ち上げるターミナルで下記コマンドで立ち上げて読み込みます。
npm run dev
このQRコードをデバイスで読み込みます。

許可を押下します。

自分の作ったアプリが開けました🎉これで完了です！


 おまけAndroidのエミュレータも開くかどうか聞かれるので、それもやりました。
✔ Install and run the Android build on an emulator? … yes

Androidエミュレータが立ち上がりました！

今回は記載しませんが、下記のコマンドも今後やっていきます。
previewのコマンド
eas build --profile preview --platform all
productionのコマンド
eas build --profile production --platform all

 まとめeas.jsonを設定して、developmentでビルドする方法を記載しました。