create-react-appで作ったFirebaseアプリでプロジェクトをかんたんに切り替えたい

前回書いたとおり、いろいろ使えるようになってきたFirebaseですが、「わかってりゃ時間つぶさないよねー」的なコード断片なんかはまだ足りてないなーと思ってます。
今回はFirebaseプロジェクトの切り替えです。

概要

• Firebaseを利用するSPAでプロジェクトをかんたんに切り替えたい
  • Firebaseプロジェクトは、Firebaseの各機能を利用する場合の「単位」
  • このプロジェクトごとに、APIキーなどの「公開可能な埋め込み情報」は変わる
  • テスト環境、開発環境、QA環境、本番環境、…でプロジェクトはふつう別にするでしょうよ(^^ゞ
  • なので、これらをかんたんに切り替えられると便利
• 要は、「プロジェクト名を与えたら、それに紐付いたAPIキーなどの値が自動的にロードされる」ようにした

レギュレーション

• Firebaseプロジェクト作成済み
• create-react-app で作るSPA
• JS / JSX
• npm / firebase-tools / cross-env

解

コード

.env

REACT_APP_TEST_API_KEY=<api key>
REACT_APP_TEST_AUTH_DOMAIN=<domain>
REACT_APP_TEST_DATABASE_URL=<firebaseio domain>
REACT_APP_TEST_PROJECT_ID=<project id>
REACT_APP_TEST_STORAGE_BUCKET=<firestore>
REACT_APP_TEST_MESSAGING_SENDER_ID=<sender id>
REACT_APP_TEST_APP_ID=<app id>
REACT_APP_DEV_API_KEY=<api key>
REACT_APP_DEV_AUTH_DOMAIN=<domain>
REACT_APP_DEV_DATABASE_URL=<firebaseio domain>
REACT_APP_DEV_PROJECT_ID=<project id>
REACT_APP_DEV_STORAGE_BUCKET=<firestore>
REACT_APP_DEV_MESSAGING_SENDER_ID=<sender id>
REACT_APP_DEV_APP_ID=<app id>
REACT_APP_PROJECT=$PROJECT

env.js

export default function env(key) {
  return process.env['REACT_APP_' + process.env.REACT_APP_PROJECT.toUpperCase() + '_' + key];
}

index.js

import firebase from 'firebase/app';
import env from './utilities/env';

firebase.initializeApp({
  apiKey: env('API_KEY'),
  authDomain: env('AUTH_DOMAIN'),
  databaseURL: env('DATABASE_URL'),
  projectId: env('PROJECT_ID'),
  storageBucket: env('STORAGE_BUCKET'),
  messagingSenderId: env('MESSAGING_SENDER_ID'),
  appId: env('APP_ID')
});

実行

ローカル実行

cross-env PROJECT=test npm start

ビルド

cross-env PROJECT=test npm run build

次回予告

このように作ってみたとはいえ、そもそもコマンドラインレベルでは「今のプロジェクト」が firebase コマンドで設定されているはず。そこから読み出せばさらなる自動化が可能になるはずです。