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

「React Native」のアプリのビルド手順をまとめました。

・macOS 14.3.1

前回

1. EAS

1-1. EASの概要

「EAS」(Expo Application Services) は、Expoプラットフォーム上で動作するアプリケーションの開発、ビルド、デプロイを支援する一連のクラウドサービスです。

Expo Application Services (EAS)

1-2. EASの主なサービス

主なサービスは、次のとおりです。

・EAS Build : iOS・Androidアプリのビルド
・EAS Submit : iOS・Androidアプリをストアに提出
・EAS Update : iOS・Androidアプリのバージョンアップ

1-3. ビルドの種類

「React Native」のビルドの種類は、次のとおりです。

・Expo Go のビルド (前回のビルド方法)
　・Expo Go アプリで実行
　・Metroがコードをバンドル
・EAS Build のクラウドビルド
　・iOS・Androidアプリをクラウドでビルドして実行
　・開発用アプリは、Metroがコードをバンドル
　・本番用アプリは、アプリがコードをバンドル
・EAS Build のローカルビルド
　・iOS・Androidアプリをローカルでビルドして実行
　・開発用アプリは、Metroがコードをバンドル
　・本番用アプリは、アプリがコードをバンドル
・prebuild
　・iOS・Androidのネイティブコードを生成してビルドして実行
　・iOSは、XcodeプロジェクトとiOS用ネイティブコードなど
　・Androidは、AndroidプロジェクトとAndroid用ネイティブコードなど
・Webビルド
　・Webブラウザで実行

2. EASプロジェクトの準備

前回作成した「AwesomeProject」をビルドするEASプロジェクトを作成します。

(1) 「eas-cli」のインストール。
「EAS CLI」は、Expoプロジェクトのビルドとデプロイを管理するためのコマンドラインツールです。

$ npm install -g eas-cli

(2) EASにログイン。
Expoアカウントのメールアドレスとパスワードを入力します。

$ eas login

✔ Email or username … <メールアドレス>
✔ Password … <パスワード>
Logged in

(3) EASプロジェクトの初期化
「EAS プロジェクトを自動的に作成するか」で「Y」、「どのプラットフォームを設定するか」で「All」を選択します。

$ eas build:configure

✔ Would you like to automatically create an EAS project for @npaka/awesomeproject? … yes
✔ Which platforms would you like to configure for EAS Build? › All

EASプロジェクトの主なコマンドは、次のとおりです。

・eas build : ビルド
・eas submit : App Storeへのアップロード

詳しくは、「EAS Build」のドキュメントを参照してください。

(4) ExpoサイトのProjectsでプロジェクトが作成できたことを確認。

3. EAS Build のクラウドビルド

「EAS Build」のクラウドビルドの手順は、次のとおりです。

3-1. クラウドビルドの料金

毎月30の中規模ビルド (最大 15 iOS) まで無料で利用できます。

・Androidメディア : ビルドごとに 1 ドル
・Android大 : ビルドごとに 2 ドル
・iOSメディア : ビルドごとに 2 ドル
・iOS大 : ビルドごとに 4 ドル

Expo Application Services (EAS) Pricing

3-2. クラウドビルドの準備

(1) 「expo」「expo-dev-client」のインストール。

$ npm install expo
$ npx expo install expo-dev-client

・expo : Expo SDK 全体を提供するパッケージ
・expo-dev-client : カスタム開発クライアントを作成するためのパッケージ

3-3. iOSアプリのクラウドビルド

(1) クラウドビルドの実行。
各種質問に答えるとビルド開始し、完了するとQRコードが表示されます。

$ eas build -p ios --profile development

✔ Apple ID: … <メールアドレス>
✔ Password: … ********
✔ How do you want to validate your account? … device / sms
✔ Please enter the 6 digit code … <コード>
✔ Generate a new Apple Distribution Certificate? … yes
✔ You don't have any registered devices yet. Would you like to register them now? … yes
✔ How would you like to register your devices? › Input - allows you to type in UDIDs (advanced option)
✔ UDID: … <UUID>
✔ Device name (optional): … <デバイス名>
✔ Device class (optional): › iPhone
✔ Is this what you want to register? … yes
✔ Do you want to register another device? … no
✔ Select devices for the ad hoc build: › <デバイス>

パラメータは、次のとおりです。

・-p : ios / android
・--profile : development / production

(2) デフォルトカメラでQRコードをスキャンして、アプリをインストール。

(3) Metroを起動してから、アプリを起動。

$ npx react-native start

3-4. Androidアプリのクラウドビルド

(1) クラウドビルドの実行。
各種質問に答えるとビルド開始し、完了するとQRコードが表示されます。

$ eas build -p android --profile development

✔ Generate a new Android Keystore? … yes

パラメータは、次のとおりです。

・-p : ios / android
・--profile : development / production
・--local : ローカルビルド

(2) デフォルトカメラでQRコードをスキャンして、ダウンロードページを開き、apkをダウンロードしてインストールを実行。

(3) Metroを起動してから、アプリを起動。

$ npx react-native start

4. EAS Build のローカルビルド

「EAS Build」のローカルビルドの手順は、次のとおりです。

4-1. ローカルビルドの準備

(1) 「expo」「expo-dev-client」「eas-cli-local-build-plugin」のインストール。

$ npm install expo
$ npx expo install expo-dev-client
$ npm install -g eas-cli-local-build-plugin

・expo : Expo SDK 全体を提供するパッケージ
・expo-dev-client : カスタム開発クライアントを作成するためのパッケージ
・eas-cli-local-build-plugin : ローカル環境でExpoプロジェクトのビルドを可能にするプラグイン

(2) 「fastlane」のインストール。
macOSの場合はbrewでインストールします。

$ brew install fastlane

4-2. iOSアプリのローカルビルド

(1) ローカルビルドの実行。
各種質問に答えるとビルド開始し、完了するとipaが生成されます。

$ eas build -p ios --profile development --local

パラメータは、次のとおりです。

・-p : ios / android
・--profile : development / production
・--local : ローカルビルド

iOSアプリのビルド時には、証明書関連のエラーがよく発生します。

(2) iOSにipaをインストール。
「Apple Configurator」などでインストールします。

4-3. Androidアプリのローカルビルド

(1) ローカルビルドの実行。
各種質問に答えるとビルド開始し、完了するとapkが生成されます。

$ eas build -p android --profile development --local

パラメータは、次のとおりです。

・-p : ios / android
・--profile : development / production

(2) Androidにapkをインストール。

$ adb install XXXX.apk

【おまけ】 doctor

「doctor」は、Expoプロジェクト内の依存関係の問題を診断するツールです。

$ npx expo-doctor

Learn more: https://expo.fyi/root-expo-object
✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✖ Check for common project setup issues
✖ Check for issues with metro config
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check native tooling versions
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that native modules use compatible support package versions for installed Expo SDK
✖ Check that packages match versions required by installed Expo SDK

修正例は、次のとおりです。

・Root-level "expo" object found. Ignoring extra keys in Expo config: "name", "displayName"
(Expo 構成の余分なキーを無視する: "name"、"displayName")
nameはexpo下に移動し、displayNameは削除。

・Outdated dependencies (古い依存関係)
「npx expo install --check」で依存関係を確認して更新。

・Multiple package manager lock files (yarn.lock, package-lock.json)
(複数のパッケージマネージャのlockファイル)
package-lock.json または yarn.lock を削除。

・Custom metro.config.js that does not extend @expo/metro-config
(@expo/metro-config を拡張しないカスタムmetro.config.js)
metro.config.jsを以下のように編集。

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

module.exports = {
  ...defaultConfig,
  // ここにカスタム設定を追加
};

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

【おまけ】 iOSアプリのビルド時のエラー対応

iOSアプリのビルド時には、証明書関連のエラーがよく発生します。

エラーログの確認

(1) キャッシュ削除をオフにしてからビルド

$ export EAS_LOCAL_BUILD_SKIP_CLEANUP=1
$ eas build -p ios --profile development --local

(2) ビルド完了時にキャッシュのパスが出力される。

/var/folders/7d/lrm7kd194kbcvdx6zpl9zcmr0000gn/T/eas-build-local-nodejs/50c66fa9-dd56-4742-b18e-f7541d240807

(3) キャッシュ内のlogs/app-app.log でエラーを確認。

error: Provisioning profile "*[expo] com.xxxxxx. yyy AppStore 2024-01-18T17:02:50.071Z" doesn't include signing certificate "Apple Distribution: xxxxxx (xxxxxxx)". (in target 'xxxx' from project 'xxx')

MacのProvisioning Profileの更新

(1) 「~/Library/MobileDevice/Provisioning Profiles/」内のProvisioning Profileを削除

(2) Xcodeのメニュー「Xcode → Settings」の「Accounts」の「Download Manual Profiles」で最新のProfileをダウンロード。

ExpoのProvisioning Profileの更新

(1) 「Apple Developer Program」から「Certificate」(cer)と「Provisioning Profile」(mobileprovision)を取得。

(2) 「Certificate」(cer)をダブルクリックしてキーチェーンに追加し、「右クリック→書き出す」で「Certificate」(p12)に変換。

(3) Expoのサイトでログイン。

(4) Projectsのプロジェクトを選択。

(5) Project settingsのcredentialsでiOSを選択。

(6) CertificateとProvisioning Profileをアップロードして更新。

【おまけ】 iOSアプリのTestFlight

iOSアプリのTestFlightの手順は、次のとおりです。

(1) workspaceを開いてアイコンを設定。

(2) 本番用 (production) でビルド。

$ eas build -p ios --profile production

(3) 「App Store Connect」 で新規アプリを追加。
アプリビルド時に指定した「Bundle Identifier」を指定します。

(4) 「Transporter」をMacにインストールして起動して、検証およびデリバリ。

(5) 「App Store Connect」 のアプリの「TestFlight」で、テストグループを作成して、テスターを追加し、アプリを配信開始。

(6) テスターは「TestFlight」を端末にインストール後、テスト開始メールから起動。

【おまけ】 aacのapk変換

Androidの本番用ビルドでaacが生成されますが、そのままではAndroid端末にインストールできないため、apk変換が必要です。

(1) Androidで本番用ビルド。
aacファイル (build-XXXX.aab) が生成されます。

$ eas build -p android --profile production --local

(2) 「bundletool」(bundletool-all-1.16.0.jar)をダウンロード。

(3) 「build-apks」の生成。

$ java -jar bundletool-all-1.16.0.jar build-apks --bundle=build-XXXX.aab --output=output.apks --mode=universal

(4) 「build-apks」の解凍。
「universal.apk」を取得できます。

unzip output.apks -d extracted_apks

(5) apkのインストール。

adb install ./extracted_apks/universal.apk

次回

OpenAI GPT-4V／ChatGPT／GPTs 人工知能プログラミング実践入門 | 株式会社ボーンデジタル