Zenn
💫

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

2024/11/20に公開
Expo
tech

はじめに

eas.jsonを設定したので、developmentでビルドできるか検証しました。

eas.jsonとは?

こちらに詳しく書いたので、ご覧ください。
https://zenn.dev/yumemi9808/articles/fb8aec8bb5896b

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.

select

  1. Website（おすすめ）
    デバイスを登録するための専用URLを生成し、登録したいiOSデバイスでそのURLを開きます。
    デバイスのUDIDが自動的に取得され、Apple Developer Portalに登録されます。
    簡単で、複数のデバイスを素早く登録可能。

  2. Developer Portal
    すでにApple Developer Portalに登録済みのデバイスをインポートします。
    Apple Developer Portalでデバイスを登録済みの場合に適しています。
    既存デバイスの登録情報を再利用でき、手間が省ける。

  3. Input
    手動でUDIDを入力してデバイスを登録します。
    高度なオプションで、特定のデバイスだけを直接登録したい場合に使用。
    UDIDを正確に把握している場合、無駄なく登録可能。

  4. Current Machine
    現在使用中のApple Silicon Macをデバイスとして登録します。
    macOSアプリの開発で、Macを直接テストデバイスとして使いたい場合に便利。
    macOSデバイスでのみ必要になる特殊なケース。

  5. 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でビルドする方法を記載しました。

Discussion