Reactで開発時と本番時で設定を変える
最終更新日:2023-04-30
    
    create-react-app
 で作ったReactアプリは、 .env
 ファイルで環境変数を取り込むことができます。これを使って開発時( npm start
 )と本番時( npm run build
 )で設定を変えたりできます。
.envファイルを作る
プロジェクトのルートに .env.development
 と .env.production
 を作ります。変数名は REACT_APP_
 プレフィックスが必要なので注意しましょう(公式ドキュメント)
# development
REACT_APP_BASE_URL="http://localhost:9000"
# production 
REACT_APP_BASE_URL="https://api.example.com"
アプリ内で参照する
process.env.変数名
 で参照できます。
<a
  className="App-link"
  href="https://reactjs.org"
  target="_blank"
  rel="noopener noreferrer"
>
  Learn React {process.env.REACT_APP_BASE_URL}
</a>
    
