[React] 環境によってAPIのベースエンドポイントを切り替える
やりたいこと
環境によって別のAPIのベースエンドポイントを使いたい、がソースコードは何も変えずに環境変数により切り替えたい
例えば、
開発環境 (DEV) : http://localhost:8000
本番環境 (PROD): http://xxxx
などのように開発環境ではlocalhostへ、本番環境では実際にバックエンドをデプロイしているサーバーへ、アクセスを切り替えたいとします。
どうやるか
Reactでは、REACT_APP_から始まる環境変数を定義し、読み込むことができます。（前提として今回はcreate-react-appでプロジェクトを作成しています）
下記の手順で環境ごとに異なるエンドポイントを設定できます。
- プロジェクトのルートに、環境ごとに分けた .env ファイルを作成
- ソースコード内で定義した環境変数を読み込み
環境変数を .env ファイルに定義
まず、2つのファイルを作成します。
- 1つ目は開発環境用
.env.development - 2つ目は本番環境用
.env.production
ファイル名は必ずこの通りにする必要があります。なぜならこのファイル名の .env ファイルをReact側で勝手に環境ごとに切り分けて読み込んでくれるからです。
公式ドキュメントには他にもいろいろ定義できるファイルが記載されてあるので興味があれば読んでみてください。
Ref: https://create-react-app.dev/docs/adding-custom-environment-variables/
このそれぞれの .env ファイルの中に、実際にその環境で使用したいエンドポイントを定義しましょう。ここで大切なのは定義する変数名はREACT_APP_から始まる名前にすることです。
// .env.development
REACT_APP_BASE_URL="http://localhost:8000"
// .env.production
REACT_APP_BASE_URL="http://xxxx"
こうすることで、開発環境では.env.developmentの中身が、本番環境では.env.productionの中身が読み込まれます。
開発環境とは、npm startでローカルで開発をする場合、本番環境とはnpm run buildでのビルドの場合を指します。
定義した環境変数を読み込む
定義した変数はソースコードからこのように読み込むことが可能です。
process.env.REACT_APP_XXX
今回の例ではこうなりますね。
const baseURL = process.env.REACT_APP_BASE_URL;
例えば、axiosのインスタンスを下記のように、環境変数を用いて生成することができます。
import axios from "axios";
const apiAxios = axios.create({
baseURL: `${process.env.REACT_APP_BASE_URL}/api/`,
});
export default apiAxios;
このように環境変数にベースのURLを管理することで、将来URLを変更したい場合があってもソースコード内ではどこも修正する必要がないのでメンテナンスが簡単になり効率的ですね。
Viteの場合
ちなみに上記までの説明はcreate-react-appで作成したReactプロジェクトについてです。
最近はViteが主流となってきており、Viteで作成したプロジェクトでは若干異なる部分が出てきます。
プレフィックスや読み込み方法が異なるのでぜひこちらも参考にしてください。
- REACT_APP_...
+ VITE_...
- process.env...
+ import.meta.env...
Discussion