ExpoでReact Native開発をするときの環境変数の設定の仕方。
環境別の変数の設定
自分は以下のようにして出し分けた。
const ENVs = { dev: { // 開発環境の変数 environment: "dev", baseApiUrl: "http://localhost:3000", }, staging: { // ステージング環境の変数 environment: "staging", baseApiUrl: "https://api.staging.com", }, production: { // 本番環境の変数 environment: "production", baseApiUrl: "https://api.production.com", }, }; function getEnvVars() { const options = Constants.manifest.packagerOpts; const channel = Constants.manifest.releaseChannel; const isDev = options != null ? options.dev : true; if (isDev) { return ENVs.dev; } else { if (channel === "production") { return ENVs.production; } else { return ENVs.staging; } } } export const ENV = getEnvVars();
この変数を以下のような要領で使える。
import { ENV } from "src/environments"; const baseApiUrl = ENV.baseApiUrl; ...
TypeScriptでやっている場合、全ての環境のObjectの型が同じならちゃんと補完も効くので便利。
補足
Expoでのいろんな変数が入っている箇所
Constants
からExpoに関する様々な変数が取得できる。
https://docs.expo.io/versions/latest/sdk/constants/
使っている変数
Constants.manifest.packagerOpts.dev
以下のトグルのオンオフで値が変わる値。開発ビルドであるかが取れる。
自分の場合は、
true
のときはローカルのサーバーfalse
のときはステージングのサーバー
に繋ぐようにするなどすると開発中も便利かもしれない。
実機で動作確認をする際、頑張って自分のマシンのサーバーにつなげるようにすると大変なので どこかにデプロイしたステージングサーバーにつなげると誰でも好きな端末で見れるようになるので嬉しい。
Constants.manifest.releaseChannel
ビルド時の設定するリリースチャンネルが取れる。 以下のようにコマンドを打つ時に指定することで出し分けられるオプションだが、この値を見て変数も出し分けるようにすると便利。
expo build:ios --release-channel=production
expo publish --release-channel=staging
上記では、プロダクションビルドでかつリリースチャンネルがproduction
のもののみ本番用の変数を使うようになっている。
豆知識
Constants.manifest
にはapp.json
の値が一通り入っているので、その他出し分けに使いたい値があればこのあたりから探すと良さそう。