React Native Tips

React Nativeの実務で役立つサイト。私自身が実際に実装するとき、情報が少なくて困ったものを中心に記事にしていきます。

【Expo】EAS Buildのおすすめ設定方法

EAS Buildで「開発、テスト、リリース」をする時のする時のおすすめのeas.jsonの設定方法をシェアしていきます。まずは結論から。

{
  "cli": {
    "version": ">= 3.9.2"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "channel": "development",
      "android": {
        "buildType": "apk"
      }
    },
    "development-simulator": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      },
      "channel": "development-simulator"
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  },
  "submit": {
    "production": {
      "android": {
        "serviceAccountKeyPath": "./pc-api-****.json",
        "track": "internal"
      },
      "ios": {
        "appleId": "****@**.**",
        "ascAppId": "********"
      }
    }
  }
}

以下、細かくみていきましょう。

※serviceAccountKeyPath、appleId、ascAppIdの値は自分のものに置き換えてください。
※development、development-simulator、preview、productionの変数名は他の名前でも構いません。私はわかりやすいようにこのようにしているだけです。

シュミレーターで開発時の設定

"development-simulator": {
  "developmentClient": true,
  "distribution": "internal",
  "ios": {
    "simulator": true
  },
  "channel": "development-simulator"
}

こちらはシュミレーターで開発する時に必要な設定です。

初めて開発する、または再ビルドが必要なパッケージをインストールした後に下記コマンドを打つ必要があります。(例、expo-images-pickerなどをインストールした後)

eas build --profile development-simulator

ビルドには15~20分ほどかかります。ビルドが終わったら、「シュミレーターで起動しますか?」と問われるので、「Y」をクリックしましょう。

もしくは、Expoのダッシュボードにログインして、「対象のビルドをダウンロード→解凍→シュミレーターにドラックアンドドロップ」でもインストールできます。iOS、Android、どちらのシュミレーターでもインストールできます。

シュミレーターにアプリがインストールされた後は下記で、アプリが実行できます。

yarn start

以後は、ソースを修正し、保存すると、リアルタイムでシュミレーターに結果が反映されます。毎回ビルドをする必要はないです。

"ios": {
  "simulator": true
},

また、上の設定を入れないと、iOSシュミレーターでは開発できなくなるので、忘れないようにしましょう。

実機での開発時の設定

"development": {
  "developmentClient": true,
  "distribution": "internal",
  "channel": "development",
  "android": {
    "buildType": "apk"
  }
},

続いて、実機で開発するときの設定です。

上述した、シュミレーターの時と同じく、初回やビルドが必要なパッケージをインストール後に下記コマンドを実行します。

eas build --profile development

これも15分ほど待つ必要があります。Android、iOS共に使えます。実行後は、ターミナルでYを押す。もしくは、端末で直接、Expoのダッシュボードにログインして、対象のビルドをインストールをしましょう。

実機にアプリがインストールされた後は下記で、実行できます。

yarn start

これでソースコードの修正がリアルタイムで反映されます。

テスト

"preview": {
  "distribution": "internal",
  "channel": "preview"
},

実装が終わり、リリース前に試験をするときに使います。

eas build --profile preview

ビルドが完了したら、「実機での開発時の設定」と同じ手順で端末にインストールすることができます。

勘違いされる方が多いのですが、こちらのビルドをインストール後「yarn start」をする必要はないです。アプリを立ち上げるとそのまま動きます。なので、ソースコードを修正してもリアルタイムで反映されることはないです。ソースを修正した後は場合は、毎回ビルド&インストールが必要です。

リリース用のビルド

"production": {
  "channel": "production"
}

本番にリリースする時です。下記を実行します。

eas build --profile production

注意としては、上コマンドを打つ前に、app.jsonのexpo.ios.buildNumberとexpo.android.versionCodeの数字を増やしましょう。数字が同じものはアップできません。

ビルドの提出

"submit": {
    "production": {
      "android": {
        "serviceAccountKeyPath": "./pc-api-******.json",
        "track": "internal"
      },
      "ios": {
        "appleId": "******@**.**",
        "ascAppId": "*********"
      }
    }
  }

serviceAccountKeyPath、appleId、ascAppIdは自分のものに書き換えてください。

ビルドが完成したら、下記を実行し、ビルドを提出しましょう。

eas submit 

日記習慣で語学を身につけよう!

このブログで取り上げている、私が開発・運営しているアプリ名は「LangJourunal」です。一般的な日記機能に加えて、添削AIがついております。日記で語学を習得したい人向けアプリです。

英語、ドイツ語、スペイン語、フランス語、ポルトガル語、オランダ語 に対応しております。React Nativeだけでなく、語学もぜひ勉強しましょう!

アプリの詳細はこちら
Daiki【Expo】EAS Buildのおすすめ設定方法
Share this post

Join the conversation