【React Native Expo】iOSアプリで使用する環境変数について

EXPOでのiOSアプリリリース前に以下の事象が発生。

• デバッグでは実機で正常に動作することは確認できている
• eas submitでTestFlightにアプリを提出した後、TestFlightからアプリを起動するとクラッシュする

つまり、開発環境での実機デバッグはうまくいくが、TestFlightでの実機テストはうまくいかない事象が発生していました。

原因

原因究明ができずサイトを漁っていたら以下の記事を発見し、助けられました。

• https://www.reddit.com/r/expo/comments/1q8b0fw/nightmare_with_env_variables_not_being_available/?tl=ja

原因は環境変数にありました。.envで環境変数を定義し、コード上で使用していたのですが、easではeas.jsonに環境変数を定義し、EXPOに環境変数を登録しないといけなかったみたいです。全く気づきませんでした。。。

解決策

準備

npx expo install expo-constants

手順

①eas.jsonに使用する環境変数を設定

※eas.jsonがない場合はeas build:configureコマンドを実行

【サンプル】eas.json

// eas.json
{
  ...,
  "build": { // ビルド用設
    "development": { // 開発中のローカルデバッグ
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "API_KEY": "...",
        "PROJECT_ID": "..."
      }
    },
    "preview": { // 内部テスト等（筆者は使用したことがありません）
      "env": {
        "API_KEY": "...",
        "PROJECT_ID": "..."
      }
    },
    "production": { // アプリストア公開
      "env": {
        "API_KEY": "...",
        "PROJECT_ID": "..."
      }
    }
  },
  ...,
}

②必要な環境変数を登録。

例えば、本番環境(production)において、キー名とその値をそれぞれAPI_KEY、1234567890ABCDEFGHIJKとした場合、以下のように実行する。

eas env:create --name API_KEY --value 1234567890ABCDEFGHIJK --environment production

環境変数が登録されたかどうかの確認はEXPOにアクセスし、ログインして確認する。

• https://expo.dev/

③expo-constantsなどを用いてソースコード上で適宜参照。

app.config.tsはapp.jsonと同じフォルダ（ディレクトリ）に作成する。

【環境変数の設定】app.config.ts

import type { ConfigContext } from '@expo/config'; // expo-constants

export default ({ config }: ConfigContext) => {
    config.extra = {
        ...config.extra,
        apiKey: process.env.API_KEY,
        projectId: process.env.PROJECT_ID,
    }
    return config;
}

【環境変数の取得例】

// インポート
import Constants from 'expo-constants';

// 取得
Constants.expoConfig?.extra?.apiKey,
Constants.expoConfig?.extra?.projectId,

【補足】④ローカル開発環境で.envを取得する

.envはapp.jsonファイルと同じフォルダに配置する。

# .env.localファイルを取得する
eas env:pull --environment development

公式

• https://docs.expo.dev/eas/environment-variables/