Reactアプリの環境変数はどこで保持したらいいんだ？

ReactでAPIサーバーにアクセスするときに、APIサーバーのオリジンをソースに直書きしてはいけないな、と思って、環境変数として持つにはどうすればいいのだろう？という疑問があって調べてみました。以下が直す前。

sample.js

try {
      const { data } = await axios(
        `http://localhost:3000/path/to/src`,　// ← 直書きしてる
      )
      const hoge = data.hoge
      this.setState({ hoge })
    } catch (err) {
      console.log(err)
    }

結論

.envファイルをプロジェクトのルートディレクトリ直下に作るだけでOK。

Reactで環境変数を定義するときのお作法としてREACT_APP_という接頭辞を付ける必要があるみたいです。

.env

REACT_APP_ORIGIN=http://localhost:3000

process.env.REACT_APP_ORIGINでカスタム環境変数にアクセスできる！

sample.js

try {
      const { data } = await axios(
        `${process.env.REACT_APP_ORIGIN}/path/to/src`, // ← 置き換えた
      )
      const hoge = data.hoge
      this.setState({ hoge })
    } catch (err) {
      console.log(err)
    }

環境ごとに.envファイルを使い分けることもできるみたいです。開発環境用に.env.development、本番環境用に.env.productionというふうにファイルを分ければ良いようです。npmスクリプトコマンド（npm startとか）によって適用される優先順位が変化するようです。詳しくは以下のリンクを参考にしてください。

参考リンク

https://create-react-app.dev/docs/adding-custom-environment-variables/