create-react-appを使用時の、Firebaseのdevelopment/test/production環境切り替え #Firebase

問題

Firebase Webさん、チュートリアルに従って作ってるとローカルで動かしてるアプリとデプロイされたアプリが同じデータベース見てたりして大変なのでなんとかしたい。

create-react-app & Firebase 環境でdev/test/prodを切り替えたいけど、どうしていいかわかんないとき読んで。さらりと書いてるが俺は試行錯誤で6時間ハマった。

要点

create-react-appは、

npm start時: NODE_ENV=development
npm test時: NODE_ENV=test
npm run build時: NODE_ENV=production

というように、NODE_ENVを設定してくれてます。

さらに、REACT_APP_で始まる環境変数を自動で読んでくれます。

NODE_ENVもREACT_APP_も、process.envでアクセスできます。

また、dotenvにも対応しており、.envファイルに設定した環境変数を読み込んでくれます。

ドキュメントはここら辺:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

あと、Firebaseはデフォルトで設定が露出しても大丈夫なようにできてるんで安心してください。

コード

Firebase のウェブコンソール上でdev/test/prodプロジェクトは作って置いてください。

Nodeでfirebaseパッケージをインストール:

npm install -S firebase

環境変数をまとめておく（空の部分とか適切に書いてください）:

.env

# development
REACT_APP_FB_DEV_API_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
REACT_APP_FB_DEV_AUTH_DOMAIN="{project-name}.firebaseapp.com"
REACT_APP_FB_DEV_DATABASE_URL="https://{project-name}.firebaseio.com"
REACT_APP_FB_DEV_STORAGE_BUCKET="{project-name}.appspot.com"
REACT_APP_FB_DEV_MESSAGING_SENDER_ID="000000000000"

# test
REACT_APP_FB_TEST_API_KEY=
REACT_APP_FB_TEST_AUTH_DOMAIN=
REACT_APP_FB_TEST_DATABASE_URL=
REACT_APP_FB_TEST_STORAGE_BUCKET=
REACT_APP_FB_TEST_MESSAGING_SENDER_ID=

# production
REACT_APP_FB_PROD_API_KEY=
REACT_APP_FB_PROD_AUTH_DOMAIN=
REACT_APP_FB_PROD_DATABASE_URL=
REACT_APP_FB_PROD_STORAGE_BUCKET=
REACT_APP_FB_PROD_MESSAGING_SENDER_ID=

設定読み込み:

src/config.js

const Config = () => {
  if (process.env.NODE_ENV === 'development') {
    return {
      firebase: {
        apiKey: process.env.REACT_APP_FB_DEV_API_KEY,
        authDomain: process.env.REACT_APP_FB_DEV_AUTH_DOMAIN,
        databaseURL: process.env.REACT_APP_FB_DEV_DATABASE_URL,
        storageBucket: process.env.REACT_APP_FB_DEV_STORAGE_BUCKET,
        messagingSender_Id: process.env.REACT_APP_FB_DEV_MESSAGING_SENDER_ID
      }
    }
  } else if (process.env.NODE_ENV === 'test') {
    return {
      firebase: {
        apiKey: process.env.REACT_APP_FB_TEST_API_KEY,
        authDomain: process.env.REACT_APP_FB_TEST_AUTH_DOMAIN,
        databaseURL: process.env.REACT_APP_FB_TEST_DATABASE_URL,
        storageBucket: process.env.REACT_APP_FB_TEST_STORAGE_BUCKET,
        messagingSender_Id: process.env.REACT_APP_FB_TEST_MESSAGING_SENDER_ID
      }
    }
  } else if (process.env.NODE_ENV === 'production') {
    return {
      firebase: {
        apiKey: process.env.REACT_APP_FB_PROD_API_KEY,
        authDomain: process.env.REACT_APP_FB_PROD_AUTH_DOMAIN,
        databaseURL: process.env.REACT_APP_FB_PROD_DATABASE_URL,
        storageBucket: process.env.REACT_APP_FB_PROD_STORAGE_BUCKET,
        messagingSender_Id: process.env.REACT_APP_FB_PROD_MESSAGING_SENDER_ID
      }
    }
  }
  return {}
}

export const firebaseConfig = Config().firebase

なんか別の設定加えたい時は適宜付け加えてください。

Firebaseイニシャライズ:

src/firebase.js

import firebase from 'firebase'
import { firebaseConfig } from './config'

export const firebaseApp = firebase.initializeApp(firebaseConfig)
export const firebaseDB = firebaseApp.database()

あとは、

import { firebaseDB } from './firebase'

const todosRef = firebaseDB.ref("todos")

などとして使用できます。おしまい。