react router(v7) のビルド時に環境を分ける

react routerのビルド時に躓いて大分時間食ったのでメモ

TL;DR

• .envに記述したVITE_prefixの環境変数はビルド時にjsへ展開される
• .env.[mode]を作成することで環境ごとに埋め込む値を変えられる
• modeを切り替えたい時はnpm run build -- --mode <mode>とすることで切り替えられる

経緯

Docker composeで動かしてるReact Routerに対してPlaywright(on Docker)のE2Eテストをちょっと書いていたところ、どういうことかブラウザからアクセスした時とPlaywrightから動かしたときに同じ設定で動作しないことが分かった。
apiの名前で動かしているサービスに対して、Playwright上ではhttp://api:<port>で動作するのに、ブラウザからだとhttp://localhost:<port>じゃないと動かない。そして逆も動かない。¹
散々試して、いっそのこと環境分けちゃえということで環境をわけようとしたところ、今度はnpm run buildが何度やってもproduction modeになる、とひたすら時間を食ってしまった。

viteと.env

viteは.envを食う。
ただし、モードを切り替えることで動的に読み込む.envを切り替えられる。

.env                # 全ての場合に読み込まれる
.env.local          # 全ての場合に読み込まれ、gitには無視される
.env.[mode]         # 指定されたモードでのみ読み込まれる
.env.[mode].local   # 指定されたモードでのみ読み込まれ、gitには無視される

react-router buildにおけるモードの切り替え

create-react-routerするとデフォルトで吐かれるpackage.jsonはこんな感じ。

で、このreact-router buildはデフォルトでproduction modeになっている。

これに何とかして引数を渡せればいい。というわけで下記のコマンドを発見すると後は楽勝。

npm run build -- --help

下記のコマンドでモードをdevelopmentに切り替えられることが分かる。

npm run build -- --mode development

---

1. ここ分かる人が居たらコメント下さい。本当は揃えたいんです。 ↩