Expo webで環境ごとに設定を切り替える

本番、ステージング、開発環境などで設定を切り替えたいシーンは多くあると思います。
Expoでアプリを作るときはrelease-channelを使っていたのですが、Webのときはどうすればいいのかな？と思い調べてみました。

Expo、特にExpo webを使ったときに、以下のようにして設定を切り替えました。

app.config.jsを使う

Expoの設定周りは通常app.jsonを使うと思います。
実はそれをapp.config.jsというファイルでさらに拡張できます。

app.config.jsはJSのファイルなので、内部で環境変数process.envを使えるのが特徴です。

今回はこれを利用します。

実装

ルートディレクトリにapp.config.jsを作ります。
環境変数process.env.MY_CUSTOM_ENVによって、本番/開発のapiKeyを切り替えています。

app.config.js

export default ({ config }) => {
  const apiKey =
    process.env.MY_CUSTOM_ENV === "production"
      ? "prod-api-key-xxxxxx"
      : "dev-api-key-oooooo";

  return {
    ...config,
    extra: {
      apiKey,
    },
  };
};

使う側の例です。
Constants.manifest.extra.apiKeyで取得できます。

import Constants from "expo-constants";

console.log(Constants.manifest.extra.apiKey);

切り替えの方法

例えばwebビルドの場合、以下のように環境変数を指定してexpoコマンドを叩くことで、先程のapp.config.jsの切り替えが有効になります。

# production用のAPI KEYを使うとき
MY_CUSTOM_ENV=production expo build:web

# 何も指定しなければdev用
expo build:web

同様に各種expoコマンドで切り替えが使えます。

# 開発サーバー起動
MY_CUSTOM_ENV=production expo start

# iosのリリースビルド
MY_CUSTOM_ENV=production expo build:ios

補足: release-channel

アプリの環境切り替えはrelease-channelを使うときが多いと思います。

例えば expo publish --release-channel production で本番にpublishするなど。

release-channelによる切り替えも考慮して、以下のようにしておくとより便利かもしれません。

app.config.js

export default ({ config }) => {
  const apiKey =
    process.env.MY_CUSTOM_ENV === "production"
    || Constants.manifest.releaseChannel === "production"
      ? "prod-api-key-xxxxxx"
      : "dev-api-key-oooooo";

  return {
    ...config,
    extra: {
      apiKey,
    },
  };
};