【初心者向け】Expoのビルドはどれを使えばいいのか理解する

{
	// EAS Buildの設定
  "build": {
	  // ①開発中のビルド設定
    "development": {
      "developmentClient": true,    // 開発ビルド（development build）を有効にする
      "distribution": "internal"    // 内部配布を可能にする
    },
    
    // ②プレビュー用のビルド設定
    "preview": {
      "distribution": "internal"    // 内部配布を可能にする
    },
    
    // ③リリース用のビルド設定
    "production": {}
    
    // 他にも自由にビルド設定を増やせる！
    // ...
  }
}

ビルド時はこの3種類のビルド設定から1つ選んでビルドする。

（オプション--profileを使う）

// 例
eas build --profile development

📎

公式ドキュメント（eas.jsonの生成）

Build configuration process

Learn how EAS CLI configures a project for EAS Build.

https://docs.expo.dev

📎

公式ドキュメント（eas.jsonの書き方）

Configure EAS Build with eas.json

Learn how a project using EAS services is configured with eas.json.

https://docs.expo.dev

基本的なビルドの流れ

✅コマンド1つで簡単にビルドができる。

【手順1】設定ファイルを準備

✅先ほど作った設定ファイル「eas.json」に、どのようなビルドをするか設定する。

（基本はデフォルトのままでOK）

eas.json

{
	// EAS Buildの設定
  "build": {
	  // 開発中のビルド設定
    "development": {
      "developmentClient": true,    // 開発ビルド（development build）を有効にする
      "distribution": "internal"    // 内部配布を可能にする
    },
    // プレビュー用のビルド設定
    "preview": {
      "distribution": "internal"    // 内部配布を可能にする
    },
    // リリース用のビルド設定
    "production": {}
  }
}

【手順2】ビルド

✅コマンドeas buildでビルドする。

eas build --platform all

💡

たったこれだけでコードをアプリ化できる！

【手順3】ビルド結果の確認

✅ビルドが完了すると、［Expoの管理画面 ‐ Build］で成果物（アプリ）が確認できる。

→具体的には「Google Playへの公開に必要なaabファイル」と「App Storeへの公開に必要なipaファイル」が生成されている。

📎

公式ドキュメント

Create your first build

Learn how to create a build for your app with EAS Build.

https://docs.expo.dev

💡

ここでは一般的によく使われる3種類のビルド設定（eas.json）を紹介する。

【パターン1】開発用のビルド設定

✅開発中に使う一般的なビルド設定。

いつ使う？

✅「Expo Go」で動作確認できないアプリを開発するとき。

💡

基本は開発ビルドは不要。

Expo Goで動作確認できない場合のみ必要。

【注意】iOSの実機にインストールするにはApple Developer Program のメンバーシップが必要

Apple Developer Program のメンバーシップ（有料）に未登録の場合、実機（自分のiPhoneやiPad）にはインストールできない💦

（iOSシミュレーターにはインストールできる）

📎

参考

Create a development build

Learn how to create development builds for a project.

https://docs.expo.dev

【手順1】開発用のビルド設定を書く

✅eas.jsonの設定を書き換える。

（デフォルトのeas.jsonでは設定が不十分なので書き換える）

eas.json

{
  "build": {
	  ...

	  // 開発用のビルド設定
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "enterpriseProvisioning": "universal",
        // シミュレーターで確認するときのみ必要
        // "simulator": true
      }
    },

		... 
    }
  }
}

"developmentClient": true
- 開発用のビルド設定をONにする。
"distribution": "internal"
- 配布を可能にする（URLでダウンロード可）
- これによりビルドしたアプリをアプリストアに公開せず、特定のデバイスにインストールできる。
"android": { "buildType": "apk" },
- Android用の設定。
- ビルドするとaabではなくapkファイルを生成するように変更。
  （インストールするときにapkファイルが必要）
"ios": { "enterpriseProvisioning": "universal" }
- iOS用の設定。
- universalプロビジョニングプロファイルを使用する。

【手順2】パッケージをインストール

✅パッケージ「expo-dev-client」をインストールする。

※開発用のビルドをするために必要。

npx expo install expo-dev-client

【手順3】ビルド

✅eas buildコマンドでビルドする。

# 【パターン1】Android と iOS 両方をビルドする
eas build --profile development --platform all

# 【パターン2】Android のみビルドする
eas build --profile development --platform android

# 【パターン3】iOS のみビルドする
eas build --profile development --platform ios

【手順4】デバイスにインストール

✅最後に任意のデバイスにアプリをインストールする。

ビルドが終わったら、インストールしたいスマホでQRコードを読み取る。

【補足】エミュレーターにもインストール可能
QRコードを読み取ると、［install］からインストールできる。

💡

これで実機にインストールが完了する！

【補足】デバイス単体ではアプリは動かない

🚫インストールしたアプリは、Expo Goと同様単体では動かない。

✅インストールしたアプリを動かすには、開発PCでnpx expo start --dev-clientを実行しておく必要がある。

【パターン2】プレビュー用のビルド設定

✅完成したアプリを知り合いに配るときなどに使う一般的なビルド設定。

いつ使う？

✅リリース前の動作確認をするとき。

【事前知識】Androidアプリの配布方法

✅Androidは無料でアプリを配布できる。

apkファイル（アプリ化したファイル）を配布すれば、インストールしてもらうことが可能。
今回は、apkファイルをEASのページからダウンロードできる状態をゴールとする。
（どこからダウンロードしてもOK。GoogleドライブなどからダウンロードしてもOK。）

【事前知識】iOSアプリの配布方法

✅iOSは無料でアプリを配布できない。

ipaファイル（アプリ化したファイル）を配布しても、インストールできない。
iOSに配布するには有料のApple Developer アカウントが必要。
- AdHoc版のipaファイル（アプリ化したファイル）を配布すれば、インストールしてもらうことが可能。
- 今回は、AdHoc版のipaファイルをEASのページからダウンロードできる状態をゴールとする。
  （どこからダウンロードしてもOK。GoogleドライブなどからダウンロードしてもOK。）

【手順1】プレビュー用のビルド設定を書く

✅eas.jsonの設定を書き換える。

（デフォルトのeas.jsonでは設定が不十分なので書き換える）

eas.json

{
  "build": {
	  ...

	  // プレビュー用のビルド設定を作成
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "enterpriseProvisioning": "universal"
      }
    },

		... 
    }
  }
}

"distribution": "internal"
- 配布を可能にする（URLでダウンロード可）
- これによりビルドしたアプリをアプリストアに公開せず、特定のデバイスにインストールできる。
"android": { "buildType": "apk" },
- Android用の設定。
- ビルドするとaabではなくapkファイルを生成するように変更。
"ios": { "enterpriseProvisioning": "universal" }
- iOS用の設定。
- universalプロビジョニングプロファイルを使用する

💡

これらの設定によりURLを共有するだけで知り合いにインストールしてもらえる。

（アプリストアを介さずに直接インストールできる！）

【手順2】デバイスを登録する（iOSに配布する場合のみ）

✅AdHoc版のアプリを配布したいデバイスを事前に登録しておく。

登録用のURLを生成する。
```
eas device:create
```
インストールしたいデバイスでURLを開き、登録する。
（指示に従うだけで登録できる）

【手順3】ビルド

✅eas buildコマンドでビルドする。

# 【パターン1】Android と iOS 両方をビルドする
eas build --profile preview --platform all

# 【パターン2】Android のみビルドする
eas build --profile preview --platform android

# 【パターン3】iOS のみビルドする
eas build --profile preview --platform ios

【手順4】デバイスにインストール

✅最後に任意のデバイスにアプリをインストールする。

ビルドが終わったら、インストールしたいスマホでQRコードを読み取る。

【補足】エミュレーターにもインストール可能
QRコードを読み取ると、［install］からインストールできる。

💡

これで実機にインストールが完了する！

📎

公式ドキュメント

Internal distribution

Learn how EAS Build provides shareable URLs for your builds with your team for internal distribution.

https://docs.expo.dev

【パターン3】リリース用のビルド設定

✅アプリストアに公開するときに使う一般的なビルド設定。

いつ使う？

✅一般ユーザーに配布するとき。

✅特定のユーザー（テスターなど）に配布するとき。

【事前知識】Androidアプリのリリース方法

✅aabファイル（ビルドしたアプリ）をGoogle Playにアップロードして審査等の手続きをすれば公開できる。

⚠️

【注意】

Google Playに公開するには有料のApple Developer アカウントが必要。

【事前知識】iOSアプリのリリース方法

✅ipaファイル（ビルドしたアプリ）をApp Sotreにアップロードして審査等の手続きをすれば公開できる。

⚠️

【注意】

App Sotreに公開するには有料のApple Developer アカウントが必要。

【手順1】リリース用のビルド設定を書く

✅デフォルトのeas.jsonのままでOK。

eas.json

{
  "build": {
	  ...

	  // リリース用のビルド設定を作成
    "production": {} 
    }
  }
}

"production": {}
- 特別な設定はなし。

💡

リリースのときは特別な設定は不要！

【手順2】ビルド

eas buildコマンドでビルドする。

# 【パターン1】Android と iOS 両方をビルドする
eas build --profile production --platform all

# 【パターン2】Android のみビルドする
eas build --profile production --platform android

# 【パターン3】iOS のみビルドする
eas build --profile production --platform ios

署名の生成

⚠️

アプリストアに公開する場合は署名が必要！
1. Androidの場合：
  ビルド中に「Generate a new Android Keystore?」と表示されるのでyesを入力するだけ。
  これでキーストアがEASに保存される。
2. iOSの場合：
  ビルド中にApple Developer Program アカウントにサインインが促されるので、プロンプトに従う。

【手順3】Google Play／App Storeへ公開

✅最後にビルドした成果物（アプリ）をアプリストアへ公開する。

［Expoの管理画面 ‐ Build］で成果物（アプリ）をダウンロードする。
Google Play／App Storeへ公開する。
（Expoとは関係ないので具体的な手順は割愛する。）

📎

公式ドキュメント

Build your project for app stores

Learn how to create production builds of your project that are ready for the app stores.

https://docs.expo.dev

設定ファイル（eas.json）をカスタマイズすれば、より柔軟なビルドができる。

💡

ここではよく使う設定を紹介する！

Androidエミュレーターにインストールする

✅android.buildType: “apk”を指定すればOK。

eas.json

{
  "build": {
	  ...

    "preview": {
      "android": {
        "buildType": "apk"     // apkファイルを生成する
      }
    },

		... 
    }
  }
}

android.buildType: “apk”を指定しない場合：
aabファイル（アプリストアに公開する用のファイル）が生成される。
android.buildType: “apk”を指定した場合：
apkファイル（スマホに直接インストールできるファイル）が生成される。

事前に必要なもの

Androidエミュレーターで動作確認するには、Andoid Studioが必要。

📎

Android Studioのインストール手順

Android Studio Emulator

Learn how to set up the Android Emulator to test your app on a virtual Android device.

https://docs.expo.dev

手順

✅「プレビュー用のビルド」とまったく同じ。

※ビルドが終わったらエミュレーターにインストールするか聞かれるので「Y」を選択すればインストールできる。

📎

公式ドキュメント

Build APKs for Android Emulators and devices

Learn how to configure and install a .apk for Android Emulators and devices when using EAS Build.

https://docs.expo.dev

iOSシミュレーターにインストールする

✅ios.simulator: trueを指定すればOK。

eas.json

{
  "build": {
	  ...
	  
    "preview": {
      "ios": {
        "simulator": true    // iOSシミュレーター用のビルドにする
      }
    }
    
    ...
  }
}

でiOSシミュレーター用にビルドすればiOSシミュレーターにインストールできる。

（Expo Goから独立した環境で動作確認できる）

ios.simulator: trueを指定しない場合：
シミュレーター用のファイルが生成される。
ios.simulator: trueを指定した場合：
実機用のファイルが生成される。

事前に必要なもの

iOSシミュレーターで動作確認するには、Xcodeが必要。

📎

Xcodeのインストール手順

iOS Simulator

Learn how you can install the iOS Simulator on your Mac and use it to develop your app.

https://docs.expo.dev

【手順1】ビルド

✅eas buildコマンドでビルドする。

eas build -p ios --profile preview

【手順2】iOSシミュレーターにインストール

✅最後にiOSシミュレーターにアプリをインストールする。

※ビルドが終わったらシミュレーターにインストールするか聞かれるので「Y」を選択すればインストールできる。

💡

これでiOSシミュレーターにインストールが完了する！

【おまけ】ビルド結果の確認

✅ビルドが完了すると、［Expoの管理画面 ‐ Build］で成果物が確認できる。

→「iOSシミュレーターへのインストールに必要なtar.gzファイル」が生成されている。

📎

公式ドキュメント

Build for iOS Simulators

Learn how to configure and install build for iOS simulators when using EAS Build.

https://docs.expo.dev

環境変数を設定

✅env.EXPO_PUBLIC_〇〇で環境変数を設定できる。

（環境変数はEXPO_PUBLIC_をつけないとビルドで無視されてしまう）

環境変数を設定

eas.json

{
  "build": {
    "production": {
      // リリース版で使う環境変数
      "env": {
        "EXPO_PUBLIC_API_URL": "https://company.com/api"
      }
    },
    "preview": {
	    // プレビュー版で使う環境変数      
      "env": {
        "EXPO_PUBLIC_API_URL": "https://staging.company.com/api"
      }
    }
  }
}

環境変数を使う
任意のソースファイルからprocess.env.〇〇で呼び出せる。

例
```
const apiURL = process.env.EXPO_PUBLIC_API_URL;
```

📎

公式ドキュメント

Environment variables and secrets in EAS Build

Learn how to use environment variables and secrets in an EAS Build.

https://docs.expo.dev

他のビルド設定を継承する

✅extendsで他のビルド設定を継承できる。

{
  "build": {
    "production": {},

    "preview": {
	    "extends": "production",      // ✅"production"の設定を継承する
			...
    },

    "development": {
	    "extends": "production",      // ✅"production"の設定を継承する
	    ...
    },
  }
}

💡

この例では"production"を継承している。

（"production”の設定は空なので上記の例では特に意味はない）

✅クラウド上ではなく、ローカル（自分のPC）でビルドすることもできる。

（重要度は低めなので読み飛ばしてもOK）

用途

ローカルビルドはいつ使う？

「EAS Buildで起こったビルドの失敗」をデバッグしたいとき
EASビルドの無料枠（30回／月）を超えたとき

💡

基本はローカルビルドは使わずクラウドでビルドすればOK！

クラウドビルドをおすすめする理由

ビルドが早い
ビルドするための各種設定が不要

ローカルでビルドする方法

✅クラウドのビルドコマンドに、--localオプションをつけるとローカルでビルドできる。

# Androidの場合
eas build --platform android --local

# iOSの場合
eas build --platform ios --local

ローカルビルドの詳細

📎

公式ドキュメント

Run builds locally or on your own infrastructure

Learn how to use EAS Build locally on your machine or a custom infrastructure using the --local flag.

https://docs.expo.dev

ビルドとは、コードからスマホアプリを生成すること。
ビルドするにはEAS Buildを使う。
ビルド設定は主に開発用、プレビュー用、リリース用の3種類を使い分ける。
ただし開発用のビルドは必須ではない。
（基本はExpo Goで確認すればいいため）

また今回は紹介しなかったprebuildも存在するが、これはBare workflowで開発する場合に使う。

こちらは初心者のうちはあまり使わないので必要になってからまた調べるのがよさそう✨

【Expo】Expo GoビルドとEAS Build｜Hiroki Yoshii

そもそもReact Nativeを知らない自分が「Expoとはなんぞや」を理解するため、Expoの基本的な情報を整理しつついくつかのパターンのビルドを試してみた備忘録。アーキテクチャの整理 Expo アプリケーションの開発を迅速化する、React Nativeの上に構成されるプラットフォーム。マネージドフローと呼ばれる下記の開発手法を提供する。 Expo SDK 位置情報、プッシュ通知などのネイティブアクセスビルド＆デプロイサポート Expo Goを使用するホットリロード EASを使用するクラウドビルド OTA（Over the

https://note.com

React Native のアプリのビルド手順｜npaka

「React Native」のアプリのビルド手順をまとめました。・macOS 14.3.1 前回 1. EAS 1-1. EASの概要「EAS」(Expo Application Services) は、Expoプラットフォーム上で動作するアプリケーションの開発、ビルド、デプロイを支援する一連のクラウドサービスです。 Expo Application Services (EAS) Deeply integrated cloud services for Expo and React Native ap expo.dev 1-2. EAS

https://note.com