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

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

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

0

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

yarn add react-native-config
cd ios
pod install

1

TARGETSを右クリック

Dupulicate -> Dupulicate Onlyをクリック

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

2

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

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

Dupulicateをクリック

名前を変えてclose

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

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

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

3

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

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

4

Edit schemeから左の Run を選択

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

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

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

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

5

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

シェルスクリプトの記述

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

6

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

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

7

Podfileを変える

before

after

8

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

ここまででiOSは

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

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

info.plistを共通化する

今のままだとそれぞれのtarget用にinfo.plistが作成されて、info.plistに変更を加える場合は環境分行う必要がある。これはめんどくさいので、TARGETSから複製したものを選び、Build Settings -> Packaging -> info.plist File を適切なパスに変更する。

例 inspectionEnv/info.plist

このパスは適用したいファイルを開き、右側の Location から確認できる。デフォルトは Relative to Group だったのでこの相対パスを使用した。

firbaseのgoogleログインを使用している場合は info.plist の URL Types に複数のカスタムURLスキームを登録する必要があるので注意。

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の追加