create-react-appで作成した環境に環境変数を設定

序章

Firebaseを使い、データベースに接続するReactアプリを作成にチャレンジした際、

firebase.js内の

const firebaseConfig = {

で設定する情報を環境変数から取得する記述方法に変更したかった。

作成するファイル

.envファイルをプロジェクトのルート直下に作成します。

.envの中に

REACT_APP_API_KEY=xxxxxx
REACT_APP_AUTH_DOMAIN=xxxxxx
REACT_APP_DATABASE_URL=xxxxxx

のような記述で設定したい環境変数を記載します。

ポイントは、「REACT_APP_」から開始する事。

REACT_APP_から開始されていない環境変数は無視されてしまうようです。

create-react-app.dev

変更後のfirebase.js

// Your web app's Firebase configuration

const firebaseConfig = {

apiKey: process.env.REACT_APP_FIREBASE_API_KEY,

authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,

projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,

storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,

messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,

appId: process.env.REACT_APP_FIREBASE_APP_ID,

};

process.env.****

という記述で、.envファイルに定義した環境変数と無事紐付けることに成功しました。