環境

create-react-appでの環境変数について

ReactやNodeなどで環境変数を使いたい場合には、dotenvをインストールする必要がありますが、create-react-appを使用した場合だと、デフォルトでdotenvが組み込まれています。

このため、追加のインストールをせずとも環境変数が設定できます。
ただし、create-react-appの場合はREACT_APP_から始まる変数名をつけなくてはなりません。
.envファイルの例は以下のようになります。

.env

REACT_APP_API_KEY="YOURKEY"

環境変数にアクセスするには次のようになります。

App.js

render () {
  return (
    <div>
      {process.env.REACT_APP_API_KEY}
    </div>
  )
}

環境変数の読み込みにはいくつかモードがあり、
ローカル実行時には、.env.development、
テスト実行時には、.env.test、
ビルド時には、.env.production
というふうになっています。

このため.envしか用意せず、ビルドを行い、デプロイをすると、環境変数が読み込まれない場合があります。

この解決法として、.envファイルを複数モード用に分ける方法があります。
私は以下のように分けました。

.env.development

REACT_APP_API_KEY="YOURKEY"

.env.production

REACT_APP_API_KEY="YOURKEY"

このように分けることで、npm run buildやgh-pages -d buildを行った際に、生成したjsファイルに環境変数が埋め込まれるようになります。