ReactNativeで環境ごとにデータを変更したりGoogleService-infoを切り替えたりできるようにする

ReactNativeでdev, stg, prod毎に環境変数valueやFirebaseを使用するために使うGoogleService-infoを簡単に切り替えられるようにしたかった。

今回は環境変数の管理はreact-native-configを使用する。

元々iOSのみのつもりだったためandroidは後付け

0

react-native-configのセットアップ

yarn add react-native-config
cd ios
pod install

1

TARGETSを右クリック

Dupulicate -> Dupulicate Onlyをクリック

f:id:ri99:20211119195308p:plain

f:id:ri99:20211120171108p:plain

~ copyという名前ができるのでそれを ~ -Devなどにする。

f:id:ri99:20211120171223p:plain

2

上にあるschemeの設定から Manage Schemes を選択

f:id:ri99:20211119200126p:plain

デフォルトのスキームを選択して、左下の設定アイコンをクリック

Dupulicateをクリック

f:id:ri99:20211119200312p:plain

名前を変えてclose

f:id:ri99:20211119200440p:plain

最終的にDev用、Stg用を作成

(画像ではついてないがSharedにチェック入れる)

f:id:ri99:20211119200502p:plain

もう一度確認してみると作成したSchemeが表示される。(copyのものはチェック外した)

f:id:ri99:20211119200818p:plain

3

schemeを選択して Edit scheme をクリック

選択したschemeに対応するTargetsを1つ選択(画面下の+, -で追加したり削除できる)

f:id:ri99:20211119202155p:plain

4

Edit schemeから左の Run を選択

Executableで 「プロジェクト名.app」を選択

(デバッグに関する設定なのでいらないかも)

追記: 必要。あと選択肢には全てのターゲットが出てきてどれか選ぶことができるが、それぞれの環境のもの(devならdev)選ばないとエラーになる。

古いXcodeが対応していない新しいバージョンのiOSに対してアプリをRunさせる方法 - Qiita

f:id:ri99:20211119204634p:plain

5

BuildのPre-actionsから New Run Sctipt Actionをクリック

f:id:ri99:20211120162732p:plain

シェルスクリプトの記述

cpコマンドで対応するenv.をenvにコピー

f:id:ri99:20211120162845p:plain

6

プロジェクト内にそれぞれの環境用のディレクトリを作成

f:id:ri99:20211119212820p:plain

その中にinfo.plistを入れていくが、それぞれに対応するtargetsにチェックマークをつける

f:id:ri99:20211119213245p:plain

7

Podfileを変える

before

f:id:ri99:20211119220357p:plain

after

f:id:ri99:20211120122830p:plain

8

環境変数用ファイルの作成

f:id:ri99:20211120163500p:plain

ここまででiOS

npx react-native run-ios --scheme InspectionEnv-Stg

だったりXcodeからスキーマ変更してビルドすると.env.devや.env.stgの内容がreact-native-configで使用でき、GoogleService-infoも対応したものが使用される。

androidのセットアップ

// flavorによるenvの指定
project.ext.envConfigFiles = [
    Development: ".env.dev",
    Production: ".env.prod",
    Staging: ".env.stg"
]

// react-native-configをセットアップ
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" 

defaultConfig {
        applicationId "com.inspectionenv"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        flavorDimensions "default" // ここ追加
    }

// flavorsの追加
productFlavors {
        Development {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.inspectionenv.dev"
            targetSdkVersion rootProject.ext.targetSdkVersion
        }
        Staging {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.inspectionEnv.stg"
            targetSdkVersion rootProject.ext.targetSdkVersion
        }
        Production {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.inspectionEnv"
            targetSdkVersion rootProject.ext.targetSdkVersion
        }
    }

google-servicesの追加

f:id:ri99:20211121181627p:plain

これでandroid

npx react-native run-android --variant "productFlavour""BuildType"
(ex; DevelopmentDebug)

で起動するとその環境にあったenvとgoogle-servicesが適用される。

注意点はFirebaseのパッケージ名とproductFlavorsのappliactionIdを同じにしないとエラー出る。ここではDevelopmentが使用するFirebaseのandroidのパッケージ名がcom.inspectionenvとかになってるとうまく動かない。

参考にさせていただいた記事

Manage multiple firebase projects in React Native | by KPITENG | Medium

ReactNativeで環境ごとのビルド設定を整える(iOS編)

Manage Multiple Target Variant With React Native Apps

ReactNativeのAndroid側でFlavorで環境を切り分ける - Qiita