フロントエンド開発では、「開発環境」と「本番環境」で動作を切り替えたいケースがよくあります。
例えば、APIのエンドポイントを変えたり、ログ出力の有無を制御したり。
今回は、Viteを使っているプロジェクトで、cross-env を使って package.json のスクリプト実行時に環境変数を設定し、import.meta.env を使ってコード中で分岐する方法を紹介します。
お知らせ①
🌟無料＆登録不要でプラグインのお試しが可能！🌟
kintoneユーザーの皆さん！
エムザスのkintoneプラグインはもう試しましたか？🤔
エムザスでは以下のようなプラグインを開発しています！👇
デモ環境で、ほとんどの機能が今すぐお試しいただけます✨
さらに、お客様のドメインで無料で3ヶ月間、すべての機能を試すこともできます！🎉
それでは、本題に入ります！
1. cross-envで環境変数をセット
まずは cross-env をインストールしましょう。
npm install --save-dev cross-env次に、package.json のスクリプトに cross-env を組み込みます。
{
"scripts": {
"dev": "cross-env MODE=development vite",
"build": "cross-env MODE=production vite build",
"preview": "vite preview"
}
}このようにすると、npm run dev のときは MODE=development、npm run build のときは MODE=production がそれぞれ環境変数として渡されます。
2. Viteのimport.meta.envで環境に応じたコード分岐
Viteでは、.env ファイルやスクリプトで設定された環境変数を import.meta.env 経由で取得できます。また、dev / prdのモードに応じた.envファイルを自動で読み込んでくれます。
まず、それぞれのモード用の.env ファイルを用意しておきましょう。
# .env.development
VITE_API_URL=https://dev-api.example.com
# .env.production
VITE_API_URL=https://api.example.comViteでは、VITE_ というプレフィックスが付いた変数しか import.meta.env 経由で参照できないので注意してください。
次に、コード中で環境に応じて処理を分岐します。
const apiUrl = import.meta.env.VITE_API_URL;
if (import.meta.env.MODE === 'development') {
console.log('開発環境：モックAPIを使います');
} else {
console.log('本番環境：実際のAPIを使います');
}
fetch(`${apiUrl}/endpoint`)
.then((res) => res.json())
.then((data) => {
console.log(data);
});import.meta.env.MODE で、cross-env で渡した MODE の値が取得できます。これを使って、開発と本番で処理を切り替えることができます。
まとめ
今回は、Viteプロジェクトで「開発」と「本番」で挙動を切り替える方法をご紹介しました。
cross-envで実行時に環境変数を設定して.envファイルでAPIエンドポイントなどを切り替えてimport.meta.envでコード内の挙動を制御する
という流れでした。
Viteは設定がシンプルで柔軟なので、こういう切り替えもすごくやりやすいです。
環境ごとの設定をきちんと分けておくと、後からチームで開発したり、CI/CDパイプラインに乗せるときもスムーズになります。
「本番で間違ってモックAPIにアクセスしてた…！」なんて事故を防ぐためにも、最初にちゃんと環境を切り分けておくのは大事ですね。
ぜひ、自分のプロジェクトにも取り入れてみてください！