create-react-appで環境変数を設定したり切り替えたりする方法

create-react-app とは

Reactのプロジェクトを誰でも簡単に立ち上げることができるCLIツールです。
必要最小限のjsxの雛形やLint、開発環境の立ち上げやビルド、Typescriptの対応など、様々な恩恵を与えてくれます。
https://github.com/facebook/create-react-app

環境変数を設定する

create-react-appで立ち上げたプロジェクトには、環境変数を設定するのに必要なdotenvというパッケージが予めインストールされているので、設定は.envを作成して環境変数を書くだけです。

ただ、環境変数の命名にはルールがあり、頭に必ずREACT_APPと付ける必要があります。

例:.env

REACT_APP_API_URL=https://hogehoge.hoge

これでプロジェクト内で環境変数を使用することができます。

const apiURL = process.env.REACT_APP_API_URL

fetch(`${apiURL}/api/v1/list`)

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

開発環境と本番環境で環境変数の値を切り替えたい場合は、.envを開発用(.env.development)と本番用(.env.production)に分けることができます。

例:.env.development

REACT_APP_API_URL=https://development.api.jp
例:.env.production

REACT_APP_API_URL=https://production.api.jp

こうすることで開発時ビルドとプロダクションビルド時に以下のようなコードがあった場合に、
APIのURLを切り替えることができます。

const apiURL = process.env.REACT_APP_API_URL

fetch(`${apiURL}/api/v1/list`)

おわり。