はじめに
ビルドする環境によって、設定する環境変数を変えたいというのはよくあることです。
本番環境がproduction、開発環境がdevelopmentと大まかには分かれていますが、他にもstagingであったり、他にもいろいろな環境があるかと思います。
Viteを使ってそれらすべての環境に別々の環境変数を設定する方法を紹介します。
設定方法
2ステップで簡単に対応できます。
.envファイルを用意する
設定したい環境に合わせた.envファイルを用意します。
ファイル名は以下のように設定します。
.env.環境名
例えば、production用であれば
.env.production
となります。
コマンド実行時にmodeを指定する
viteまたはvite buildのいずれにおいても、以下のオプションを設定します。
--mode 環境名
例えば、production用であれば
vite build --mode production
となります。
挙動を確認する
実際に環境別に設定した変数を使用するとどうなるのかを確認します。
3つの環境変数を用意しました。
「.env」、「.env.test」、「.env.development」です。
.env
VITE_URL=env_url
VITE_ENV=env
.env.test
VITE_URL=test_url
VITE_TEST=test
.env.development
VITE_DEV=development
また、環境変数は以下の通り利用します。
App.tsx
const App = () => {
return (
<>
<h3>VITE_URL : {import.meta.env.VITE_URL}</h3>
<h3>VITE_ENV : {import.meta.env.VITE_ENV}</h3>
<h3>VITE_TEST : {import.meta.env.VITE_TEST}</h3>
<h3>VITE_DEV : {import.meta.env.VITE_DEV}</h3>
</>
);
};
export default App;
以下のコマンドを実行します
npx vite --mode test
実行結果は次のようになります。
この実行結果から、以下のことがわかります。
-
.envファイルは常に読み込まれる
→VITE_ENVが読み込まれている -
.envと.env.環境名のファイルで変数が競合する場合、.env.環境名が優先される
→VITE_URLが競合している - 存在しない環境変数を指定してもエラーにならない
→.env.developmentは読み込まれないため、VITE_DEVは存在しないが、エラーになっていない
このように、全環境で共通して読み込みたい環境変数は.envに、個別に設定したい変数は環境ごとに設定することで、個別に柔軟な設定をすることができます。
まとめ
今回は環境ごとにViteで設定を用意する方法を確認しました。
Viteの環境変数にはもっと他にもルールが有るのですが、それはまた別の機会に紹介します。