【React Native】ExpoアプリをiOSアプリ用にパッケージ化してipaを作成する手順

はじめに

React Nativeでスマートフォンアプリを開発するときは、Expoを利用すると、作成中のアプリを実機向けにパッケージ化し、iPhoneやAndroidの実機で簡単に確認できます。

Windows１１＋WSL上で作成したExpo/React Nativeアプリなら、WSLからEAS Buildへアップロードして、iOS用のipaをクラウドビルドできます。XCodeでローカルビルド環境を構築しなくても進められます。EAS Build自体がExpoのクラウド上でビルドする仕組みだからです。

今回は、iPhone実機に直接インストールできる「.ipa」を作る方法を中心に説明します。

全体の流れ

WSLのプロジェクトディレクトリで、次の順番で進めます。

Expoプロジェクト
   ↓
EAS CLIインストール
   ↓
Expoログイン
   ↓
eas build:configure
   ↓
iOS Bundle Identifier設定
   ↓
Apple Developerアカウント連携
   ↓
eas build --platform ios
   ↓
ExpoのMacサーバーでビルド
   ↓
.ipa生成
   ↓
TestFlight / App Store Connectへ提出

1.WSLでExpoプロジェクトへ移動

たとえばプロジェクトが

~/projects/my-app

なら、

cd ~/projects/my-app

確認します。

pwd

さらに、

ls

として、

app
package.json
node_modules
app.json

などが見えればOKです。

Expo Routerを使っている場合は、

app/
app/(tabs)/
app/_layout.tsx

などがある構成でも問題ありません。

2.Expoアプリが正常に動くことを確認

まず、

npx expo start

を実行します。

Expo Goから現在のアプリが正常に動いていることを確認してください。

ここでエラーが出ている状態のままEAS Buildへ進むより、まずExpo Go上で正常動作させておくのがおすすめです。

3. EAS CLIをインストール

WSLで、

npm install -g eas-cli

実行します。

確認します。

eas --version

例えば、

eas-cli/...

と表示されればOKです。

4. Expoアカウントへログイン

eas login

xpoアカウントの

Email or username
Password

を入力します。

ログイン確認は、

eas whoami

です。

自分のExpoユーザー名が表示されればOKです。

5.EAS Buildの初期設定

対象プロジェクトのディレクトリで、

eas build:configure

を実行します。

初回の場合、EAS用設定ファイル

eas.json

が作成されます。

例えば次のようになります。

{
  "cli": {
    "version": ">= 16.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {
    }
  }
}

細かい内容はEAS CLIのバージョンによって多少変わります。

6. app.jsonを確認する

iOSでは、Androidのpackageに相当するものとして

ios.bundleIdentifier

が重要です。

例えばapp.jsonを、

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "version": "1.0.0",

    "ios": {
      "bundleIdentifier": "com.absolutesolutions.myapp"
    },

    "android": {
      "package": "com.absolutesolutions.myapp"
    }
  }
}

のように設定します。

特に重要なのが、

"bundleIdentifier": "com.absolutesolutions.myapp"

です。

一般的には、

com.会社名.アプリ名

という形式にします。

例えば、

com.absolutesolutions.sampleapp

などです。

Bundle Identifierは慎重に決める

App Storeへ公開する予定なら、あとから気軽に変更するものではありません。

たとえば、

com.absolutesolutions.myapp

でApple側にアプリを登録したら、そのアプリはこのBundle Identifierを基準に管理されます。

7. Apple Developer Programが必要

ここがAndroidとの大きな違いです。

App Store / TestFlight向けにiOSアプリを作る場合は、

Apple Developer Program

への加入が必要です。

EAS BuildでiPhone実機向けビルドを作成する場合にも、署名に必要なApple Developer資格情報が必要になります。Expo公式でもこの点が前提条件として案内されています。

Macを持っている必要はありません。

今回の構成なら、

Windows 11
    ↓
WSL Ubuntu
    ↓
Expo
    ↓
EAS Build
    ↓
ExpoのMac
    ↓
iOSアプリ

となります。

8.最初はiOS Production Buildを作る

App Store / TestFlight用なら、WSLで、

eas build --platform ios

を実行します。

短縮すると、

eas build -p ios

でも構いません。

productionを明示するなら、

eas build --platform ios --profile production

です。

Expo公式でも、iOS本番ビルドでは

eas build --platform ios

を使用する手順になっています。

9. Appleアカウントへのログインを求められる

初回ビルドではEAS CLIからApple関連の質問が出てきます。

例えば、

Do you want to log in to your Apple account?

という質問です。

ここでは、

を選択します。

その後、

Apple ID:

が求められます。

Apple Developer Programに登録しているApple Accountを入力します。

10.証明書をEASに作ってもらう

iOSでは、

Distribution Certificate
Provisioning Profile

などが必要になります。

初回は、基本的にはEASに自動管理させて構いません。

例えば、

Generate a new Apple Distribution Certificate?

と出たら、

Yes

でよいでしょう。

さらに、

Generate a new Apple Provisioning Profile?

も、

Yes

で構いません。

Expo公式でもEAS CLIからAppleアカウントにログインし、Distribution CertificateとProvisioning Profileを準備する方法が案内されています。

11. ソースコードがEASへアップロードされる

設定が終わると、

Compressing project files
Uploading to EAS Build

などと表示されます。

その後、

Build details:
https://expo.dev/accounts/....

のようなURLが表示されます。

ここから先は、

WSLではなくExpoのMacサーバー

で処理されます。

したがって、

WindowsだからXcodeがない

という問題は発生しません。

12 . EAS上でiOSビルド

EAS側では概ね、

npm install
↓
Expo Prebuild
↓
CocoaPods
↓
Xcode
↓
Code Signing
↓
Archive
↓
IPA

という処理が行われます。

Expo公式の説明でも、ローカル側で準備した後、iOSビルド自体はEAS Buildのリモート環境で実行されます。

13. ビルド成功

成功すると、

Build finished

となります。

EAS Dashboardからビルド結果を確認できます。

iOSの場合、成果物は基本的に

.ipa

になります。

Androidでいう、

.apk
.aab

に相当するものです。

14. Production IPAは直接iPhoneヘインストールしない

ここは重要です。

Production Buildで作成した.ipaは、

iPhoneへ直接コピー
↓
インストール

というものではありません。

Production Buildは、

EAS Build
     ↓
IPA
     ↓
App Store Connect
     ↓
TestFlight
     ↓
iPhone

という形になります。

15. App Store Connectへアップロード

EAS Buildが成功したら、

eas submit --platform ios

を実行できます。

短縮すると、

eas submit -p ios

です。

すると、

Which build do you want to submit?

などと聞かれるので、直前のビルドを選びます。

このコマンド実行後、App Store Connectへ提出することができます。

16. TestFlightで確認

App Store Connectへアップロードできたら、

App Store Connect
↓
マイApp
↓
対象アプリ
↓
TestFlight

を開きます。

App側の処理が完了すると、TestFlightからiPhoneへインストールできます。

実際には、iPhoneからTestFlightアプリを開き、その中に今回アップロードした、アプリがあるので、実行することで、アプリを立ち上げることが可能になる。

さいごに

結論として、Windows＋WSLだけでもEASを利用すればiOSアプリのビルドからTestFlight/App Storeへの提出まで進めることが可能です。

Macの実機は必要ではないですが、iPhone実機向けの署名・App Store配布にはApp Developer Programへの承認が必要になってきます。