8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-24

本番、ステージング、開発環境などで設定を切り替えたいシーンは多くあると思います。
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,
    },
  };
};
8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?