環境
- create-react-app 3.4.0
- gh-pages 2.2.0
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ファイルに環境変数が埋め込まれるようになります。