【ReactNative+Expo】Firebaseで検証環境を設定する方法

2023年12月22日

Firebaseプロジェクトに検証環境を設定する方法をご紹介します。私の環境は、React Native + ExpoでFirebaseはFirebase JSを使っています。

ステップ1: 新しいFirebaseプロジェクトの作成
ステップ2: 検証用Firebaseの設定
ステップ３: Webプロジェクトの作成
ステップ４: 設定ファイルの分離
ステップ5: アプリの設定
まとめ

ステップ1: 新しいFirebaseプロジェクトの作成

まず、Firebaseコンソールで新しいプロジェクトを作成します。これが検証環境になります。

ステップ2: 検証用Firebaseの設定

検証プロジェクトで、必要なFirebaseサービス（Firestore、Authenticationなど）を設定します。これは本番環境を見ながら全く同じものにしましょう。

ステップ３: Webプロジェクトの作成

プロジェクトの設定→アプリを追加でWebを選択します

ステップ４: 設定ファイルの分離

検証と本番環境用のFirebase設定を別々に管理します。以下はその例です（セキュリティ上の理由で一部情報は伏せてあります）：

javascript

export const firebaseConfig = __DEV__
  ? {
      // 検証環境の設定（ここの値はステップ３で作成したものをそのまま貼り付ける）
      apiKey: 'XXX,
      authDomain: 'XXX',
      projectId: 'XXX',
      storageBucket: 'XXX',
      messagingSenderId: 'XXX',
      appId: 'XXX',
      measurementId: 'XXX',
    }
  : {
      // 本番環境の設定
      apiKey: 'XXX,
      authDomain: 'XXX',
      projectId: 'XXX',
      storageBucket: 'XXX',
      messagingSenderId: 'XXX',
      appId: 'XXX',
      measurementId: 'XXX',
    };

ステップ5: アプリの設定

Firebaseをアプリに統合し、適切な環境設定を使用します。以下は設定の例です：

javascript

import { getApp, getApps, initializeApp } from 'firebase/app';
// ...(その他のFirebaseサービスのインポート)

let app;
if (getApps().length === 0) {
  app = initializeApp(firebaseConfig);
} else {
  app = getApp();
}

// ...(Firebaseサービスの初期化)