spice picks

エンジニアをしているspiceが色々書きます

Expo CLIとEAS Buildを使う時の環境変数の設定

JavaScript Technology

Expo CLIでローカルの開発、EAS Buildでアプリのビルドを作成、という具合でアプリの開発をしているのですが、 環境変数の扱い方に戸惑い時間を溶かしました。

迷ったところと最終的な設定方法をご紹介します。

なお、Expo v49以降を前提とします。

Environment variables and secrets in EAS Build - Expo Documentation

Expo CLI使用時の環境変数

ドキュメントはこちら Environment variables in Expo - Expo Documentation

Expo v49からは.env*ファイルが自動で使われます。

アプリ内で参照するためには、各変数がEXPO_PUBLIC_から始まる必要があります。

例

EXPO_PUBLIC_API_URL=https://staging.example.com
--> アプリ内で参照可能🙆‍♂️

SOME_KEY=foobar
--> アプリ内で参照不可🙅‍♂️

環境ごとに使用するファイルを変えたい場合は、standard .env files に従ってファイルを作成し、expo実行時のNODE_ENVを変更すればOKです。

例

NODE_ENV=production expo start
---> .env.production.local や.env.production が使われる

NODE_ENV=development expo start
---> .env.development.local や.env.development が使われる

EAS build時の環境変数

ドキュメントはこちら Environment variables and secrets in EAS Build - Expo Documentation

Because your EAS Build job runs on a remote server, these .env files might not be available.

とある通り、expo実行時に使える.envファイルは使用できない！😡

ということで、EAS buildでの環境変数の設定はeas.jsonに記述します。

dev,prod向けで環境変数を変えたい場合は、eas.jsonのビルドの種類ごとに設定する必要があります。

例

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "EXPO_PUBLIC_AD_ID": "ad_id_dev",
        "EXPO_PUBLIC_API_URL": "https://staging.example.com",
        "APP_VARIANT": "development"
      }
    },
    "production": {
      "autoIncrement": true,
      "env": {
        "EXPO_PUBLIC_AD_ID": "ad_id",
        "EXPO_PUBLIC_API_URL": "https://example.com",
        "APP_VARIANT": "production"
      }
    }
  }
}

また、eas.json内で定義した環境変数はExpoの設定ファイル(app.config.js/ts)で参照ができます。

設定ファイル内ではEXPO_PUBLIC_から始まらない環境変数も使えるので、設定ファイルだけで使いたい環境変数はEXPO_PUBLIC_をつけない名前にするのがわかりやすくて良さそうです。

自分はeas.jsonで設定したAPP_VARIANTをapp.config.ts内で参照してアプリ名などを出し分けることにしました。

import { ExpoConfig, ConfigContext } from 'expo/config';

const IS_PROD = process.env.APP_VARIANT === 'production';

export default ({ config }: ConfigContext): Partial<ExpoConfig> => {
  return {
    ...config,
    name: IS_PROD ? 'アプリ名' : '[dev]Listen',
    ios: {
      ...config.ios,
      googleServicesFile: IS_PROD ? './GoogleService-Info.plist' : './GoogleService-Info-Dev.plist',
      bundleIdentifier: IS_PROD ? 'com.spicex.Listen' : 'com.spicex.Listen.dev',
    },
    android: {
      ...config.android,
      googleServicesFile: IS_PROD ? './google-services.json' : './google-services-dev.json',
      package: IS_PROD ? 'com.spicex.Listen' : 'com.spicex.Listen.dev',
    },
  };
};

はまったポイント

環境変数を設定するためにExpo用の設定とEAS Build用の設定がそれぞれ必要で、 同じ値を.env.*系ファイルとeas.jsonの2箇所に書かなければならないのが盲点でした。

さらに開発開始当初はプロジェクトのレポジトリに.envがあり、EAS Buildのローカルビルドではそこで設定した環境変数を参照できてしまったため、production向けビルドを行ってもdev環境に向いてしまう問題がおこり時間を溶かしました。

最終的には、

といった具合で同じ値を2箇所に書いて無事に開発を進めています。

同じ値を複数箇所に書くのはちょっと違和感あるんですが、まあ大きな問題は起こらない・・・はず。

この記事は React Native Advent Calendar 2023 10日目の記事でした！

qiita.com