【rsbuild】deploy 環境ごとに異なる .env を利用したい
nbstsh
rsbuild はデフォで dotenv をサポートしているので、.env, .env.development, .env.production 等利用できる。しかし、これらは local 開発という意味での "development" とそれに対する本番環境という意味での "production" を意味するのであって、development/staging/production と複数の deploy 先を用意して運用する際の "development" "production" の意味合いとは異なる。
development/staging/production 環境それぞれで異なる環境変数を指定する方法考える。
nbstshenv directory
env directory 使えそう。
By default, the .env file is located in the root directory of the project. You can specify the env directory by using the --env-dir <dir> option in the CLI.
--env-dir option で .env files が存在する directory を指定できる。これを利用して、各種環境ごとの directory に .env files おけばよさげ。
nbstsh環境ごとの env directory を作成して対応
directory と .env 用意
project root に development/staging/production 環境ごとの direcotry を用意し、.env を配置する。
config/development/.envconfig/staging/.envconfig/production/.env
config
├── development
├── production
└── staging
PUBLIC_APP_ENV=development
PUBLIC_APP_ENV=staging
PUBLIC_APP_ENV=production
--env-dir を指定して実行
rsbuild cli 実行時に、--env-dir で対象の環境の directory を指定すればOK。
rsbuild dev --env-dir config/development --open
import './App.css';
const App = () => {
return (
<div className="content">
<h1>Rsbuild with React</h1>
<h2>App Env: {process.env.PUBLIC_APP_ENV}</h2>
<p>Start building amazing things with Rsbuild.</p>
</div>
);
};
export default App;
nbstshlocal 開発時の環境変数
project root に .env.local を作成し、--env-dir を指定しなければ良い
PUBLIC_APP_ENV=local
rsbuild dev --open
nbstsh課題感
- 各環境で共通な環境変数を各環境ごとの .env に記載しなければならない
- cli option での環境管理がわかりにくいかも
- できればコードで管理したい
- 複数の .env を指定できない
nbstshenv mode
env mode を使えば、.env.dev, .env.staging, .env.prod のような指定が可能だった。
cli 実行時に --env-mode option で指定可能。どんな値でもOK。
.env.foo を project root に用意した状態で、以下を実行すると、.env と .env.foo が読み込まれる。
rsbuild dev --open --env-mode foo
--env-mode では複数指定はできない
--env-mode option で指定できる mode は1種類のみ。
NG
そのため、以下のように複数指定しても .env.foo, .env.bar 両方読み込まれるわけではない。
rsbuild dev --open --env-mode foo --env-mode bar
この場合、最後の指定した "bar" が env mode として利用され、.env.bar のみ読み込まれる。
OK
複数読み込みしたいなら loadEnv() を利用すれば可能。
import { defineConfig, loadEnv } from '@rsbuild/core';
//...
loadEnv({
mode: 'foo',
});
loadEnv({
mode: 'bar',
});
export default defineConfig({
//...
最終的な構成
以下の .env files を用意し、deploy 先の環境は env mode で切り替えて管理
- .env
- .env.development
- .env.development.local
- .env.[mode]
local 開発時
--env-mode は何も指定しないで実行し、 .env, .env.development, .env.development.local を読み込ませる。
rsbuild dev --open
deploy 時
--env-mode で mode を指定し、.env と .env.[mode] を読み込んだ状態で build する。
rsbuild build --env-mode dev