create-react-appで環境変数の設定

前提

create-react-appには、dotenvというパッケージが既に入っている。

環境変数の設定

.envファイルを作成して環境変数を書く。ただ命名ルールがありREACT_APP_から始める必要がある。

例

const apiURL = process.env.REACT_APP_API_URL

環境変数の読み込み方

Typescriptの場合、config.tsを作成して一括で環境変数を管理するのが良さそう。

type _Config = {
  apiUrl: string;
}

const Config: _Config = {
  apiUrl: process.env.REACT_APP_API_URL || ""
}

export default Config

読み込み例

import Config from "./config";
import axios from 'axios';

axios.get(Config.apiUrl).then(function (response) {
  console.log(response);
})

参考
https://sumii.io/posts/create-react-app-env-setup/
https://create-react-app.dev/docs/adding-custom-environment-variables/