Firebaseで運用するReactアプリケーションに環境変数を適用する方法

ReactとFirebaseを使っていて、firebaseを初期化する際に使うapi_key等を.envで管理したくなったのでメモ。 reactのプロジェクトはcreate-react-appではなく、webpack.config.jsを設定して作ったもの。

firebaseの初期化をする際にこんな風に初期化処理を書くと思う。

  const config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

けど、github等で管理したい時にはこういう値はenvで管理したい。以下の記事を参考にして、.envから値を参照することに成功した。

hinoshita.hatenadiary.com

dotenvを入れる

yarn add dotenv

webpack.config.js

const webpack = require('webpack');
require('dotenv').config();

const defineEnv = new webpack.DefinePlugin({
  'process.env': {
    'API_KEY': JSON.stringify(process.env.API_KEY),
    'AUTH_DOMAIN': JSON.stringify(process.env.AUTH_DOMAIN),
    'DATABASE_URL': JSON.stringify(process.env.DATABASE_URL),
    'PROJECT_ID': JSON.stringify(process.env.PROJECT_ID),
    'STORAGE_BUCKET': JSON.stringify(process.env.STORAGE_BUCKET),
    'MESSAGING_SENDER_ID': JSON.stringify(process.env.MESSAGING_SENDER_ID),
  }

これで、jsではprocess.env.〇〇で参照できるようになる。.envファイルを作成してprocess.env.〇〇でその環境変数を参照。

firebaseの初期化処理を書き換える

.envで管理しているものに書き換えます。.envに必要なものを書いたら、それをjs側で呼び出します。

const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DATABASE_URL,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
};

export default firebaseConfig;

これをfirebase.initizalizeApp()の引数にします。

import firebaseConfig from './firebase/config';


//firebaseセットアップ
firebase.initializeApp(firebaseConfig);

これでfirebaseの初期化処理が完了です。

Firebaseで設定した環境変数を使う場合

本番環境ではfirebaseを使っているからfirebaseの環境変数を適用したい。firebaseでどう環境変数を設定するかというとまあ公式を見よう。

firebase.google.com

設定した環境変数をプログラムの中で使いたい時にはこんな書き方をするらしい。

const functions = require('firebase-functions');
const request = require('request-promise');

exports.userCreated = functions.database.ref('/users/{id}').onWrite(event => {
  let email = event.data.child('email').val();

  return request({
    url: 'https://someservice.com/api/some/call',
    headers: {
      'X-Client-ID': functions.config().someservice.id,
      'Authorization': `Bearer ${functions.config().someservice.key}`
    },
    body: {email: email}
  });
});

firebase-functionsっていうのを入れて。functions.config().〇〇.〇〇のように書く。ローカルでenv使う時と同じようにprocess.envじゃ取れないのね。。。