Zenn
❄️

【React Native】Expoでの開発の流れ、ビルドについてまとめ

2024/12/15に公開
Android
iOS
React Native
Expo
build
tech

はじめに

最近、web開発からモバイル開発に移りました。
React NativeのExpoを用いて開発を行っているのですが、Web開発とは異なり、モバイルアプリでは「ビルド」の概念が重要で、ビルドのタイミング、複数のビルドの使い分けに混乱しました。
そこで、モバイル開発初心者の視点から、開発の流れやビルドが必要な場面、また複数のビルドの使い分けについてまとめてみました。

ビルドとは

そもそもモバイルアプリのビルドとは書いたコードを実際のアプリとして利用可能な形に変換する作業のことです。
ビルドには15分ほど（差あり）時間がかかり、最終的にインストール可能なアプリファイル（Androidの場合は.apkや.aab形式、iOSの場合は.ipa形式）を生成します。

Expo Goでの開発

開発中はコードを書きながらUIや機能を追加していきます。しかし、動作確認のたびに15分かかるビルドを毎回行うのは非効率です。そこでExpo Goというツールを使用します。Expo Goを使えば、QRコードを読み取るだけで、手元のスマートフォン上でアプリの動作確認ができます。
Expo Goはビルドとは異なり、開発中のコードをそのまま動作させるプレビュー用のツールです。
ビルドしなくて良いため、手軽に動作確認ができます。

https://expo.dev/go

いつビルドが必要か

Expo Goは開発中のコードをリアルタイムで動作させるプレビュー用ツールであり、完全な「アプリ化」には至っていません。そのため、アプリ化（ビルド）された本番環境に近い挙動を完全に再現することはできません。
したがって、以下のタイミングでビルドを行う必要があります。

  • 開発中、Expo Goで確認できない機能の動作確認をしたいとき（Development Build）
  • スマホにインストールして本番環境やストア向けの動作確認を行いたいとき（Preview Build）
  • 作ったアプリをアプリストアに公開したいとき（Production Build）

Expo Goとビルドをうまく使い分けて開発を進めることが重要です。

ビルドする （EAS Build)

EAS BuildとはExpo または React Native コードを簡単にビルドできる公式のサービスです。

ビルド手順

公式ドキュメント参照
https://docs.expo.dev/build/setup/

以下2点を事前に済ませておきます。

  • Expoプロジェクトの作成
  • Expo devのアカウント作成

Expoでの環境構築についてはこちらを参照してください。
https://zenn.dev/kiwichan101kg/articles/f136845f019844

Expo devのアカウント作成
https://expo.dev/accounts/kiwichan

  1. EAS CLIをインストールします。
$ npm install -g eas-cli
  1. Expoアカウントにログインします。
$ eas login

ユーザー名、パスワードを聞かれるので入力してログインします。

  1. ビルドの設定を行います。
$ eas build:configure

設定するプラットフォームについて聞かれるため答えます。（iOS or Android or All）
ビルドの設定ファイル（eas.json）が生成されます。eas.jsonについては下記で説明します。

  1. ビルドコマンドを実行します。
    以下2点を指定してビルドを実行します。ビルドの種類と条件については下記で説明します。
  • プラットフォーム（iOS or Android or All）を指定
  • プロファイル（development, staging, production など）を指定（指定しないと production ）

例：Android で development 用のビルドを行う場合

$ eas build --platform android --profile development

eas.jsonとは

ビルドするためにはeas.jsonが必要です。eas.jsonとは EAS Build のための設定ファイルです。
以下のような内容を設定します。

  • 各ビルドプロファイル（development, staging, production など）の設定
  • Android/iOSそれぞれのビルド設定
  • 環境変数や特定のビルドオプションを指定
{
  "cli": {
    "version": ">= 14.2.0",
    "appVersionSource": "remote"
  },
  "build": {
　　 // ① development用のビルド設定（Development Build）
    "development": {
      "developmentClient": true, 
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
　　　// ①' iOSシミュレーターでのdevelopment用のビルド設定（Development Build）
    "ios-simulator": {
      "extends": "development",
      "ios": {
        "simulator": true
      }
    },
　　 // ② staging用のビルド設定（Preview Build）
    "staging": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
　　 // ③ production用のビルド設定（Production Build）
    "production": {
      "autoIncrement": true
    }
  },
  "submit": {
    "production": {}
  }
}

build の下に任意の名前で複数のビルドプロファイル（デフォルトではdevelopment, preview, production）を設定することができます。
したがって、development, staging, production のようにプロファイルを分けて、環境ごとのビルドの設定ができます。

ビルド時は複数から特定のプロファイルを1つ選んでビルドします。
例：① development 用のビルドを行う場合

$ eas build --profile development

ビルド （EAS Build） の種類と条件

プラットフォームや用途に応じてビルドコマンドを実行します。また、無料でできるものと有料のものがあります。

プラットフォーム ビルド用途 ビルドコマンド 生成ファイル形式 条件 無料か
Android エミュレーター（Android Studio）検証 eas build --platform android --profile <プロファイル指定> .apk eas.jsonに"android": {"buildType": "apk" }を指定 ✅
デバイス検証 eas build --platform android --profile <プロファイル指定> .apk eas.jsonに"android": {"buildType": "apk" }を指定 ✅
アプリストア向け eas build --platform android --profile <プロファイル指定> .aab ※生成自体は無料だが、Google Playストアにアップロードして公開するためにはGoogle Play デベロッパー メンバーシップが必要 ✅※
iOS シミュレータ（Xcode）検証 eas build --platform ios --profile simulator --profile <プロファイル指定> .app eas.jsonに"ios": {"simulator": "true" }を指定 ✅
デバイス検証 eas build --platform ios --profile <プロファイル指定> .ipa Apple Developer Program のメンバーシップが必要
アプリストア向け eas build --platform ios --profile <プロファイル指定> .ipa Apple Developer Program のメンバーシップが必要

ビルドしたアプリを確認する（Android デバイスで確認する）

今回は無料でできるAndroidでビルドし、デバイスで確認する方法を紹介します。
上記表の通り、eas.jsonに"buildType": "apk"を指定し、ビルドコマンドを実行した後の手順です。

$ eas build --platform android --profile development

https://expo.dev/accounts/kiwichan

  1. expo dev の Dashboard の Recent activity でビルドが成功したことを確認します。

  1. ビルドの詳細を確認し、Installを押下して出てきたQRコードをAndroid のカメラで読み取ります。

  1. Android デバイスで再びInstallを押下し、ファイルをダウンロードし、アプリをインストールし、アプリを開くことができます。（指示が出てくる通りに進めます。）

Development Build は、eas.jsonに"developmentClient": trueを指定することで、アプリが開発サーバーと連携し、コードの変更をリアルタイムで反映できるようになります。

一度 Development Build をインストールした後、npm run startで開発サーバーを起動するとQRコードが表示されます。

このQRコードを実機で読み取ると、アプリがサーバーと接続され、コードを修正すると即座に反映されます。Development Build は、Expo Goでは確認できないカスタムネイティブモジュールや特定のネイティブ機能のテストも可能です。

まとめ

  • 開発中はExpo Goで手軽に動作確認
  • Expo Goで確認できないネイティブ機能はEAS Build の Develop Build を行って確認
  • アプリストア向けのテストやリリースを行うときにEAS Build の Preview Build や Production Build を行う
  • eas.jsonには複数プロファイル Develop Build、Preview Build、Production Build等の設定をする

このようにExpo Goとビルドを使い分けて開発を進めていきます。

Discussion