ここでは、
- React Native の Android側で、
- flavorとbuildTypesを組み合わせて
- 以下の6要素を
- Application Id
- アプリ名
- Deep LinkのScheme名またはHost名
- FCM用のgoogle-services.json
- signingConfigs(keystoreやパスワードなど)
- JS側の諸々環境(APIのBaseUrlなど)
- develop/staging/production(かつそれぞれのdebug/release)毎に切り分けて
- Android Studio上で任意の環境でビルドする方法
について説明します。
なお、6. の JS側の諸々環境(APIのBaseUrlなど) では、js側で react-native-configを使うことを前提としています。
また、AndroidStudioとreact-native-configの環境は以下です。
Android Studio : 3.2.1
react-native-config : ^0.11.5,
追記
環境ごとのapk出力についてはReactNative(Android)でビルドバリアント毎にapk出力(署名つき)という記事もあるので興味がある方はご参照ください。
リリースビルドの時にbundleが更新されずコードの差分が反映されない事があったので、その対応も書いています。
Flavorの追加
Android Studioを見てみると、初期段階ではbuildTypesとして以下の２つが定義されています。
- debug
- release
####debug
文字通りデバッグ用で、アプリ実行中にHot ReloardやChromeのRemote Debuggerなどでデバッグができる。
####release
こちらも文字通り配布用。
社内テスト、UAT、本番配布などではこちらを使う。
####develop, staging, productionなどで切り替えたい
今回は、
- 社内テスト用かつdebug (develop x debug)
- 社内テスト用かつrelease (develop x release)
- UAT用かつdebug (staging x debug)
- UAT用かつrelease (staging x release)
- 本番用かつdebug (production x debug)
- 本番用かつrelease (production x release)
ということで6種類に切り分けます。
ここで使うのが、productFlavors(flavor)。
香りづけしましょうってことなのでしょうか。
今回の場合、 develop, staging, productionというのがそれぞれflavorです。
####productFlavorsの設定
- AndroidStudioの上部メニューからBuild/Edit Flavorsを選択。
- 左下の**+**を選択
- Nameのところに
developを入力 - 右下のOKを押して完了
- **2.**に戻って、stagingとproductionのflavorも同様に設定
はい、これでとりあえずFlavorの設定が完了しました。
この状態で、Android Studio上部メニューからBuild/Select Build Variantを選択すると、Build Variantとして
- developDebug
- developRelease
- stagingDebug
- stagingRelease
- productionDebug
- productionRelease
の6種類が選べると思います。
これで、任意のBuild Variantを選んでビルドすることができます。
ただ、このままではBuild Variantを変更しても、もちろん何も変わりません。
1.Application Idを切り分ける
お気づきかと思いますが、先ほどの productFlavorsの設定を進める過程で、Application Idを入力する項目があったと思います。ここに任意のIdを入力すれば、develop/staging/productionごとにApplication Idを切り替えることができます。
Android Manifest内で、FileProviderなどのようにapplication idを書く場合には、application idを直書きするのではなく、**${applicationId}**を使います。
android:authorities="${applicationId}.provider"
なお、同様にSigningConfigも指定できますが、git管理している場合、本番用のkeystoreのパスワードなどもリポジトリに上がってしまいます。今回は、それを避けるために後ほど紹介する方法で設定します。
####2.アプリ名を切り分ける
android/app/src配下に、以下のフォルダを作成します。
- develop
- staging
- production
さらに、それぞれにresフォルダとvaluesフォルダを親子関係になるように新規作成し、valuesの下にenvironment.xmlを作成します。
階層的には以下のようになります。(アルファベット順)
app
|_src
|_develop
|_res
|_values
|_environment.xml
|_main
|_production
|_res
|_values
|_environment.xml
|_staging
|_res
|_values
|_environment.xml
そして各environment.xmlは以下のようにします。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">hogeDev</string>
</resources>
hogeDevのところは、環境毎にhogeUat, hogeなどと任意に入力してください。
最後に、Manifestファイルで、以下のようにlabelを指定します。
<application
android:name=".MainApplication"
android:label="@string/app_name">
これで、アプリ名を変更できました。
####3.Deep LinkのScheme名またはHost名を切り替える
先のアプリ名の切り分け方と同じです。
environment.xmlで以下のように追加し、(nameも任意です)
<resources>
<string name="app_name">hoge</string>
//Android App Linksの例
<string name="app_links_host">hoge.com</string>
//Custom Url Schemeの例
<string name="custom_url_scheme">hoge</string>
</resources>
Manifestファイル内で以下のようにApp LinksやCustom Url Schemeを指定します。Deep Linkの設定の仕方自体はここでは説明しません。
//Custom Url Schemeの例
<data
android:scheme="@string/custom_url_scheme"
android:host="user" />
//Universal Linksの例
<data
android:host="@string/app_links_host"
android:scheme="https"/>
####4. FCM用のgoogle-services.json
以下のように、develop/staging/productionの各フォルダ内に各google-services.jsonを設置します。
app
|_src
|_develop
|_res
|_google-services.json
|_main
|_production
|_res
|_google-services.json
|_staging
|_res
|_google-services.json
参考： google-services.json for different productFlavors
5.signingConfigs(keystoreやパスワードなど)
まず、 android/keystoresに、各環境で使うkeystoreを配置します。
私の場合は今回はdevelopとstagingは同じものを使い、productionは別のものを使うので、全部で2つです。
android
|_app
|_keystores
|_develop.keystore
|_production.keystore
次に、android/app/にsigningConfigsフォルダ、そしてその下にdevelop.gradleとproduction.gradleを新規作成します。
android
|_app
|_signingConfigs
|_develop.gradle
|_production.gradle
|_keystores
|_develop.keystore
|_production.keystore
develop.gradle
signingConfigs {
develop {
keyAlias 'hoge'
keyPassword 'hogehoge'
storeFile file('../../keystores/develop.keystore')
storePassword 'hogehogehoge'
}
}
production.gradle
signingConfigs {
production {
keyAlias 'fuga'
keyPassword 'fugafuga'
storeFile file('../../keystores/production.keystore')
storePassword 'fugafugafuga'
}
}
そして、 android/app/signigConfig/production.gradle をgitignoreに追加して追跡しないようにします。
次に、app/build.gradleに以下のように記述します。
android{
...
apply from: 'signingConfigs/production.gradle', to: android
apply from: 'signingConfigs/develop.gradle', to: android
flavorDimensions "default"
productFlavors {
production {
applicationId 'hogeDev'
signingConfig signingConfigs.production
}
staging {
applicationId 'hogeUat'
signingConfig signingConfigs.develop
}
develop {
applicationId 'hoge'
signingConfig signingConfigs.develop
}
}
}
これで設定完了です。
共同で開発する人には、このproduction.gradleを渡して上記ディレクトリに置いてもらいます。(今回はdevelop用のkeystore情報はprivateリポジトリ内で管理しました)。
この辺りは、 今更ながらAndroid の keystore と 署名(signingConfigs) の管理・運用について考えてみたを参考させていただきました。
####6. JS側の諸々環境(APIのBaseUrlなど)
ここまではAndroidプロジェクト内での作業ですが、次はJS側の環境でも同様にdevelop/staging/productionで切り替える方法です。
前提として、react-native-configを使います。基本的な設定はREADMEで確認お願いします。
以後は、以下を満たしているものとします。
- react-native-configの設定を一通り終わり、js側にenv, env.staging, env.productionが設置されている
- Advanced Android SetupとDifferent environmentsに従ってbuild.gradleが設定されている
そして、このenvをflavorで切り替える方法を説明します。
と言っても簡単で、Different environmentsに従って
project.ext.envConfigFiles = [
debug: ".env.development",
release: ".env.production",
anothercustombuild: ".env",
]
となっている箇所を、
project.ext.envConfigFiles = [
develop: ".env.development",
staging: ".env.staging",
production: ".env.production",
anothercustombuild: ".env",
]
とするだけです！
これで、各Build Variantを指定してビルドした時に参照するenvは以下のようになります。
- developDebug => .env.development
- developRelease => .env.development
- stagingDebug => .env.staging
- stagingRelease => .env.staging
- productionDebug => .env.production
- productionRelease => .env.production
以上で全て設定し終わりました。