【React.js】Create-react-appで環境変数の切り替えを行う方法

本日はCreate-react-appを使ってプロジェクトを作成した際に、開発環境と本番環境で環境変数の切り替えを行う方法をご紹介します。

create-react-appやreactについての基本的な説明は今回は省きます。

開発環境と本番環境で環境変数を切り替えるには...

「react 環境変数 切り替え」などで検索すると、firebaseやwebpackなどモジュールの設定を行わないといけない記事が多く出てきます。

場合によっては、yarn ejectなど使ってwebpack.config.jsなど編集する必要があると思います。

しかし、単純に開発環境と本番環境で環境変数を切り替えたいだけであれば、ファイルを作成するだけで可能です。

ここまでたどり着くのにかなり時間を費やしました...

具体的には、下記の2つのファイルをプロジェクトの一番上の階層(package.jsonなどがある階層)に作成します。

環境 環境変数のファイル
開発環境 .env.development
本番環境 .env.production

create-react-appはデフォルトでdotenvに対応しているため、.envファイルを自動で読み込んでくれます。
さらにwebpackのconfigファイルには.env.developmentと.env.productionが使用できるように設定がなされています。

それぞれの環境変数のファイルとコマンドの関係は以下通りです。

コマンド 読み込まれる環境変数のファイル
yarn start(npm start) .env.development
yarn build(npm build) .env.production

環境変数の書き方・使い方

環境変数の書き方

.envファイル(.env.developmentや.env.production)には以下のように環境変数を設定します。
create-react-appでは必ず先頭に「REACT_APP_」をつけて下さい。

# コメントは#を使って記述できます。

REACT_APP_BACKEND="http://my-api.com"
REACT_APP_BACKEND_USER="root"

環境変数の使い方

reactのcomponentなどのjsファイルでは、以下のように環境変数を使用できます。
「process.env.」に続けて設定した環境変数を記述します。

console.log(process.env.REACT_APP_SECRET_CODE + '/endpoint');