【Expo/EAS Build】環境変数が反映されない？ローカルと本番（aab/ipa）で綺麗に切り替える最適解

Androidアプリ

はじめに

Expoでアプリを開発している際、ローカル環境（npx expo start）と、ストア提出用の本番環境（eas buildで生成するaabやipaファイル）で、APIの接続先や広告IDなどの環境変数を完全に切り分けたいケースは多いと思います。

しかし、「.env に書いた値がEAS Buildで反映されない」「本番用のビルドなのに開発用のデータを見てしまう」といったトラブルに遭遇したことはないでしょうか？

本記事では、Expo公式推奨の EXPO_PUBLIC_ プレフィックスと eas.json を活用し、ローカル開発とストア公開用ビルドで確実に環境変数を切り分ける方法を徹底解説します。

1. なぜ環境変数の切り分けが必要なのか？

ローカル開発環境と本番環境（ストア配布用）では、以下のように扱うデータやエンドポイントが異なります。

  • APIの接続先（URL）: 開発用サーバー（ローカルホストやステージング） vs 本番用サーバー
  • 広告ID（AdMobなど）: テスト用広告ID vs 本番用広告ID
  • 各種トークン・キー: 開発用テストキー vs 本番用トークン

これらが混ざってしまうと、テストデータが本番環境に流れ込んだり、最悪の場合、広告のアカウントがBANされるリスクもあります。そのため、ビルド時に「確実に」切り替わる仕組みが必要です。

2. 実装手順①：TypeScript側での環境変数受け取り

まずは、コード側で環境変数を受け取る共通ファイル（env.ts など）を作成します。 Expo（SDK 49以降）では、環境変数の頭に EXPO_PUBLIC_ をつけることで、特別な設定なしでJavaScript側に値が埋め込まれます。

TypeScript

// env.ts

const dev = {
  appId: process.env.EXPO_PUBLIC_APP_ID || "ca-app-pub-3940256099942544~3347511713", // テスト用ID
  apiUrl: process.env.EXPO_PUBLIC_API_URL || "https://dev-api.example.com",
};

const prod = {
  appId: process.env.EXPO_PUBLIC_APP_ID || "ca-app-pub-3940256099942544~3347511713", // 本番用ID
  apiUrl: process.env.EXPO_PUBLIC_API_URL || "https://prod-api.example.com",
};

export const getEnv = () => {
  // NODE_ENVの値によってオブジェクトを切り替える
  if (process.env.NODE_ENV === "production") {
    return prod;
  }
  return dev;
};

3. 実装手順②：ローカル開発用の設定（.env）

ローカルのシミュレータや実機で npx expo start をする際は、プロジェクトのルートディレクトリに .env ファイルを作成して管理します。

⚠️ 注意: .env ファイルには秘匿情報が含まれることがあるため、必ず .gitignore に追加してGitの管理外にしてください。

Ini, TOML

# .env
EXPO_PUBLIC_APP_ID=ca-app-pub-3940256099942544~3347511713
EXPO_PUBLIC_API_URL=https://dev-api.example.com

※ npx expo start を実行すると、自動的に NODE_ENV=development として扱われ、上記の設定が読み込まれます。

4. 実装手順③：EAS Build（aab生成用）の設定（eas.json）

ここが一番のポイントです。EAS Build（クラウド）でビルドする際、Git管理外にした .env は送信されません。そのため、eas.json の env フィールドに変数を明示する必要があります。

また、eas build --profile production を実行しただけでは、内部の NODE_ENV が自動で production にならないケースがあるため、NODE_ENV も明示的に指定するのが確実です。

JSON

{
  "cli": {
    "version": ">= 9.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "NODE_ENV": "development",
        "EXPO_PUBLIC_API_URL": "https://dev-api.example.com"
      }
    },
    "production": {
      "env": {
        "NODE_ENV": "production", 
        "EXPO_PUBLIC_APP_ID": "本番用のGoogle AdMob等のID",
        "EXPO_PUBLIC_API_URL": "https://prod-api.example.com"
      }
    }
  }
}

💡 セキュリティに関する重要なヒント

もし公開リポジトリ（GitHubのパブリック等）で開発しており、eas.json に本番用の秘匿キーを書き込みたくない場合は、Expoのウェブダッシュボード（Project settings ＞ Environment variables）から環境変数を登録するか、eas env:create コマンドを使用してください。

5. 動作確認：aabファイルをビルドして検証

設定が完了したら、以下のコマンドでGoogle Playストア提出用のaabファイル（Android App Bundle）をビルドします。

Bash

eas build --profile production --platform android

ビルドされたアプリでは、eas.json の production プロファイルに書いた環境変数（NODE_ENV="production" および本番用URLなど）が正しく読み込まれ、完全に本番モードとして動作させることができます。

まとめ

Expoにおける環境変数管理の鉄則は以下の通りです。

  1. コード内では process.env.EXPO_PUBLIC_XXXX で受け取る
  2. ローカル開発は .env ファイルで制御する（Gitには入れない）
  3. EAS Build（aab/ipa作成）時は、eas.json の env に NODE_ENV: "production" と本番用の値を明示する

この切り分けを行っておけば、「事故」を防ぎながら安全かつスムーズにアプリをアップデートしていくことができます。ぜひ試してみてください！

コメント

タイトルとURLをコピーしました