経緯

開発環境にてフロント ↔︎ バックエンドで通信する時、localhostを直接書いていました。

本番環境に反映するため毎回書き換えるのは馬鹿らしいので、開発環境・本番環境でURLを簡単に切り替えられるようにしました。

設定するときに若干詰まったので、備忘録として残します。

環境

まずは.envを作成して環境変数を定義します。
Reactを使用しているので以下のように設定しました。

.env

REACT_API_BASE_URL=http://localhost // 開発環境

.envの準備ができたので、コンテナを起動してうまく値を取得できているか確認。

console.log( process.env.REACT_API_BASE_URL);

// -> undefined

undefinedが出力されてしまいました…

少し調べてみると、Viteを使用しているため、環境変数の定義が間違えていることがわかりました。

.env

REACT_API_BASE_URL=http://localhost // これはこの環境では間違い

VITE_API_BASE_URL=http://localhost // こちらが正しい

環境変数を修正して、再度ログ出力をしてみると

console.log(import.meta.env.REACT_API_BASE_URL);

// -> http://localhost

欲しい値が取得できました。

あとは同じように本番環境用の環境変数を定義したファイルを準備して、コンテナ起動時にオーバーライドさせれば、環境を切り替えることができるようになります。

以上です。