Expo XDEでAndroidアプリをビルドしてAPKファイルを作成する

はじめに

前回Expo XDEを使ってReact Nativeのサンプルアプリを作成しました。

今回は実際にスタンドアロンのAndroidアプリとしてGooglePlayストアにリリースするためにAPKファイルを作成する手順について説明します。

基本的には公式ドキュメントの手順に沿っています。

元記事

動作環境

• mac Sierra Version 10.12.5
• Expo XDE Version 2.19.3
• Expo v19.0.0
• exp 43.0.0

expコマンドラインツールをインストール

Expo.ioではexpというツールが提供されていて、コマンドラインからビルド実行が出来ます。

ローカル環境にexpコマンドラインツールがインストールされていなければ、npm install -g expでインストールしてください。

初めて実行する場合は、exp loginでコマンドラインからexpにログインしてください。

app.jsonを設定

expでのビルド実行にはapp.jsonファイルが必要です。app.jsonファイルはアプリの構成情報を管理します。
アプリ名、バージョン、アイコンパスなどを設定します。

{
  "expo": {
   "name": "Your App Name",
   "icon": "./path/to/your/app-icon.png",
   "version": "1.0.0",
   "slug": "your-app-slug",
   "sdkVersion": "17.0.0",
   "ios": {
     "bundleIdentifier": "com.yourcompany.yourappname"
   },
   "android": {
     "package": "com.yourcompany.yourappname"
   }
  }
}

android.packageにはGoogle Playストア用の一意になるドメインを逆にして設定します。
必ず独自の名前を設定するように注意してください。

その他の詳細設定は公式ドキュメントを参照してください。

Configuration with app.json

ビルド実行

expコマンドラインツールからプロジェクトのビルドを実行します。

以下のコマンドでapkファイルが作成されます。

$ exp build:android

キーストアをExpoで生成するか自前のを使うか聞かれますが、初回ビルドならExpoで生成したもので大丈夫です。

[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Checking if current build exists...

[exp] No currently active or previous builds for this project.


? Would you like to upload a keystore or have us generate one for you?
If you don't know what this means, let us handle it! :)

  1) Let Expo handle the process!
  2) I want to upload my own keystore!
  Answer: 1

ビルドが開始されるので、完了するまで待ちます。

結構時間がかかります。

  [exp] Starting build process...
  [exp] Unable to find an existing exp instance for this directory, starting a new one...
  [exp] Starting React Native packager...
  [exp] Scanning 737 folders for symlinks in /path/to/your/app/node_modules (10ms)
  [exp] Loading dependency graph.
  [exp] Running packager on port 19003.
  [exp] Publishing...
  [exp] Building iOS bundle
  [exp] Dependency graph loaded.
  [exp] Finished building JavaScript bundle in 72695ms.
  [exp] Building Android bundle
  [exp] Finished building JavaScript bundle in 53646ms.
  [exp] Analyzing assets
  [exp] Finished building JavaScript bundle in 11920ms.
  [exp] Finished building JavaScript bundle in 10486ms.
  [exp] Uploading assets
  [exp] No assets changed, skipped.
  [exp] Uploading JavaScript bundles
  [exp] Published
  [exp] Your URL is

  https://exp.host/@companyname/appname

  [exp] Building...
  [exp] Build started, it may take a few minutes to complete.
  [exp] Build ID: XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  [exp] Run `exp build:status` to monitor it.

Expoサーバ上でビルドが実行されるので、ビルドが完了したかどうかは以下のコマンドで確認することが出来ます。

$ exp build:status
[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Checking if current build exists...

[exp] ============
[exp] Build Status
[exp] ============

[exp] Android: Build in progress...

ビルドが完了すると、APKファイルのダウンロードURLが発行されるので、リンク先からダウンロードします。(任意のブラウザからURLを入れるとダウンロード出来ます)

[exp] ============
[exp] Build Status
[exp] ============

[exp] Android:
[exp] APK: https://exp-shell-app-assets.s3-us-west-1.amazonaws.com/android%2F%40companyname%2Fappname-00000000-1111-aaaa-bbbb-222222222222-signed.apk

APKファイルの作成まで完了しました。

実際にGoogle Play Storeへリリースする場合は、Google Developer Accountを作成して、アプリの申請を行ってください。

Google Developer Accountの作成はGoogle Play Consoleから、アプリの申請はGoogle Play Developer Consoleから出来ます。