Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

問題

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_ENVREACT_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")

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away