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

はじめに
全体の流れ
1.WSLでプロジェクトへ移動
2.Expoアプリが正常に動くことを確認
3. EAS CLIをインストール
4.Expoアカウントへログイン
5.app.jsonを確認する
6.EAS Buildを設定
7.eas.jsonを確認する
8.まずAPKを作る
9.APKビルドを実行
10.EASへファイルがアップロードされる
11.EASのクラウド側でビルド
12.APKをAndroidスマホヘ入れる
13.Google Playへ出す場合AAB
APKとAABの違い
今回おすすめするeas.json
最短手順だけまとめると

はじめに

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

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

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

WindowsのWSLで起動したExpoアプリをiPhone実機で確認する手順は、こちらの記事で解説しています。

全体の流れ

WSL
 ↓
React Native / Expoプロジェクト
 ↓
EAS CLIをインストール
 ↓
Expoアカウントへログイン
 ↓
EAS Build設定
 ↓
eas.json設定
 ↓
EASへソースコード送信
 ↓
ExpoクラウドでAndroidビルド
 ↓
.apk を取得

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

WSLを起動して、React Nativeプロジェクトへ移動します。

cd ~/projects/my-app

対象プロジェクトで、

ls

を実行して、

app
assets
package.json
node_modules

などが存在することを確認します。

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

EAS Buildする前に、一度Expoで正常に動くか確認しておくことをお勧めします。

npx expo start

Expo GoアプリからQRコードを読み取って、アプリが正常に起動することを確認します。

3. EAS CLIをインストール

npm install -g eas-cli

を実行します。

インストール状況を確認

eas --version

例えば、

eas-cli/23.x.x

のように表示されればOKです。

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

EAS Buildを使うにはExpoアカウントが必要です。

eas login

を実行します。

すると、

Email or username
Password

などを聞かれます。

Expoアカウントを入力してください。

ログイン確認

eas whoami

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

5.app.jsonを確認する

例えば現在、

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

のようになっているとします。

Androidアプリとしてビルドする場合は、「android.package」を設定しておくことをおすすめします。

例えば、

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

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

という形です。

android.packageとは

Androidアプリを一意に識別するIDです。

例えば、

com.example.myapp

です。

Google Playへ公開する場合、このPackage Nameは重要になります。

基本的には、

com.会社名.アプリ名

の形にしておけば分かりやすいです。

6.EAS Buildを設定

プロジェクトルートで、

eas build:configure

を実行します。

Expo公式でもEAS Buildの初期設定コマンドとしてこちらが案内されています。

途中で、

Which platforms would you like to configure for EAS Build?

のように聞かれる場合があります。

今回はAndroidなので、

Android

を選択します。

設定が終わると、プロジェクト直下に

eas.json

が作成されます。

つまり、

my-app
├── app
├── assets
├── app.json
├── eas.json
├── package.json
└── ...

となります。

7.eas.jsonを確認する

標準では概ね次のような構成になります。

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

これは現在のExpo公式ドキュメントでも示されている基本構成です。

ここで重要なのが、

development
preview
production

です。

用途によって使い分けます。

profile	用途
development	開発用
preview	社内テスト・実機確認
production	Google Play公開用

8.まずAPKを作る

今回まずおすすめなのはこちらです。

Androidスマホへ直接インストールできるAPKを作る。

eas.jsonを次のようにします。

{
  "build": {
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },

    "production": {}
  }
}

ポイントはこちらです。

"android": {
  "buildType": "apk"
}

これを指定すると .apk が生成されます。

EASのデフォルトAndroidビルド形式は .aab なので、直接Android端末へインストールしたい場合はAPKを明示的に指定します。Expo公式でも android.buildType: "apk" がAPK生成方法として案内されています。

9.APKビルドを実行

WSLから

eas build --platform android --profile preview

を実行します。

短縮すると、

eas build -p android --profile preview

でも構いません。

初回は、いくつか質問されます。

例えばAndroid署名用のKeystoreについて、

Generate a new Android Keystore?

と聞かれる場合があります。

Yes

とすることで、EASに署名情報を管理してもらえます。

10.EASへファイルがアップロードされる

コマンドを実行すると、

Compressing project files
uploading to EAS Build

などと表示されます。

つまりWSL上のソースコードが、

WSL
↓
Expo EAS
↓
Androidビルドサーバ

ヘアップロードされます。

そのため、Windows側にAndroid SDKやGradleなどを完全に準備しなくてもEASクラウドでビルドできます。

11.EASのクラウド側でビルド

アップロード後、

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

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

ブラウザで開くと、

Queued
↓
Build in progress
↓
Finished

という状態を確認できます。

正常終了すれば、

Build finished

となります。

12.APKをAndroidスマホヘ入れる

完成したBuildページからAPKを取得できます。

AndroidスマホでそのAPKを開き、

この提供元のアプリを許可

などを設定するとインストールできます。

これは通常のAndroid APKなので、Expo Goは不要です。

つまり、

Expo Go
   ↓
不要

MyApp.apk
   ↓
Androidへ直接インストール

となります。

13.Google Playへ出す場合AAB

Google Playへ公開するときはAPKではなく、基本的に

.aab

を作ります。

現在のEAS BuildではAndroid productionビルドのデフォルトがAABです。

eas.json

{
  "build": {
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },

    "production": {}
  }
}

そして、

eas build --platform android --profile production

を実行します。

すると、

MyApp.aab

相当のAndroid App Bundleが生成されます。

APKとAABの違い

ここは押さえておくと分かりやすいです。

  Android Build
                     │
            ┌────────┴────────┐
            │                 │
           APK               AAB
            │                 │
     直接インストール       Google Play
            │                 │
       動作確認用            公開用

形式	APK	AAB
拡張子	`.apk`	`.aab`
Androidへ直接インストール	○	×
テスト配布	○	△
Google Play公開	基本×	○
EAS標準production	×	○

Expo公式も、AABはGoogle Play向け、実機やエミュレーターへ直接インストールするならAPK、と区別しています。

今回おすすめするeas.json

今後Google Play公開まで考えるなら、最初から次の構成にしておくと便利です。

{
  "build": {

    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },

    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },

    "production": {}
  }
}

こうすると、

実機確認

eas build -p android --profile preview

↓

APK

Google Play公開

eas build -p android --profile production

↓

AAB

という非常にわかりやすい運用になります。

最短手順だけまとめると

すでにExpoアプリが完成しているなら、実際にはこれだけです。

cd ~/projects/my-app

npm install -g eas-cli

eas login

eas whoami

eas build:configure

eas.json

{
  "build": {
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "production": {}
  }
}

APK作成

eas build -p android --profile preview

Google Play用AAB

eas build -p android --profile production

これで 「WSLで開発 → EASクラウドビルド → APKで実機確認 → AABでGoogle Play公開」 という流れを作れます。