環境変数を使用する-React

1. 環境変数ファイルの作成と配置

「.env」ファイルを作成し、Reactプロジェクトのルートディレクトリに配置する。
※「package.json」ファイルと同じ場所

.env

REACT_APP_API_HOST=https://api.example.com

2. 環境変数の使用

const login = () => {
  ...
  const url = process.env.REACT_APP_API_HOST + '/auth/';
  ...
};

その他

本番環境と開発環境で環境変数ファイルを分けたい場合は、本番環境用に「.env」ファイル、開発環境用に「.env.development」ファイルを作成する。
「npm run build」コマンドでビルドしたアプリは「.env」ファイルが適用され、「npm start」コマンドで起動した開発環境は「.env.development」ファイルが適用される。