アンドロイドビルドやテスト

2020-12-16 hit count image

リアクトネイティブ(React Native)で開発したプロジェクトをアンドロイド(Android)用でビルドしてデバイスでテストしてみましょう。

概要

今まで開発したリアクトネイティブ(React Native)をアンドロイド(Android)用でビルドしてデバイスへ上げてテストする方法を紹介します。ここにはMac(マック)でアンドロイド(Android)署名キー(Signing Key)を生成してビルドする要諦です。このブログはリアクトネイティブ(React Native)公式サイトを参考しましたので詳しく内容は公式サイトを参考してください。

このブログはシリーズです。下記のブログも確認してください。

アンドロイド署名キー生成

Macでターミナルプログラムを開いてリアクトネイティブ(React Native)プロジェクトフォルダのandroid/appフォルダへ移動します。

cd [your path]/android/app

下記のコマンドでアンドロイド(Android)用署名キー(Signing Key)を発行します。

# keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

keytool -genkey -v -keystore [key-name].keystore -alias [key alias] -keyalg RSA -keysize 2048 -validity 10000

Enter keystore password:
Re-enter new password:
What is your first and last name?
  [Unknown]:
What is the name of your organizational unit?
  [Unknown]:
What is the name of your organization?
  [Unknown]:
What is the name of your City or Locality?
  [Unknown]:
What is the name of your State or Province?
  [Unknown]:
What is the two-letter country code for this unit?
  [Unknown]:
Is CN=*****, OU=Unknown, O=Unknown, L=*****, ST=*****, C=***** correct?
  [no]:

Enter key password for <my-key-alias>
    (RETURN if same as keystore password):

全てを入力したらリアクトネイティブ(React Native)プロジェクトフォルダ下あるandroid/appフォルダへmy-release-key.keystoreファイルが生成されたことが確認できます。

署名キー設定

署名キー(Signing Key)が生成されたらgradleへキーを設定する必要があります。android/gradle.propertiesファイルを開いて下記のコードを追加します。

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

下のコードをandroid/app/build.gradleファイルへ追加します。

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

ビルド

リアクトネイティブ(React Native)があるプロジェクトフォルダのandroidフォルダへ移動した後、下のコマンドでビルドします。

./gradlew assembleRelease

ビルドされたファイルは下記のパスが生成されます

android/app/build/outputs/apk/release/app-release.apk

私たちはこの部分で下記のようなエラーが発生しました。

...
Execution failed for task ':app:lintVitalRelease'.
> Lint found fatal errors while assembling a release target.
...

いい方法ではないですが、私たちはandroid/app/build.gradleファイルへ下の内容を追加したこの部分を解決しました。

...
android {
  ...
  lintOptions {
      checkReleaseBuilds false
      // Or, if you prefer, you can continue to check for errors in release builds,
      // but continue the build even when errors are found:
      abortOnError false
  }
  ...
}
...

ビルドされたファイルテスト

アンドロイドデバイス(Android Device)でインストールされた既存のアプリを削除して下記のコマンドでビルドファイルのテストを進んでください。

react-native run-android --variant=release

エラー対応

公式サイトの内容を見て上記のように進めましたが私たちは実際下のコマンドでビルドする時と

./gradlew assembleRelease

下のコマンドで直接デバイスでテストする時、

react-native run-android --variant=release

下記のようなエラーが発生しました。

java.lang.RuntimeException: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.

解決する方法で下のコマンドを先実行してindex.android.bundleを生成した後

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle

ビルドをしたり

# cd android
./gradlew assembleRelease

直接デバイスでテストしたりしました。

react-native run-android --variant=release

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts