現代の Web 開発では、API キー、データベース認証情報、さまざまな環境のさまざまな構成などの機密データを管理することが不可欠です。これらの変数をコードに直接保存すると、セキュリティ リスクが生じ、展開が複雑になる可能性があります。最新のフロントエンド ビルド ツールである Vite は、.env ファイルを通じて環境変数を管理する簡単な方法を提供します。

.env ファイルとは何ですか?

.env ファイルは、環境固有の変数を定義するために使用される単純な構成ファイルです。これらの変数は、ソース コードから切り離されたまま、アプリケーション内でアクセスできます。これにより、機密データをハードコーディングすることなく、開発、ステージング、実稼働などのさまざまな環境を簡単に管理できるようになります。

Vite の環境変数:

Vite には環境変数のサポートが組み込まれており、現在の環境に基づいてさまざまな値を簡単に挿入できます。 Vite が環境変数を処理する方法は次のとおりです:

グローバル変数: Vite はビルド時に環境変数を挿入します。
接頭辞付き変数: セキュリティ上の理由から、VITE_ という接頭辞が付いた変数のみがクライアント側の JavaScript コードに公開されます。この方法で接頭辞が付けられていない変数はブラウザでアクセスできません。

Vite 環境変数の例:

VITE_API_URL=https://api.example.com

Vite での .env ファイルのセットアップ
Vite は複数の .env ファイルをサポートしているため、特定の環境の環境変数を定義できます。一般的なセットアップは次のとおりです:

.env: すべての環境で共有される環境変数のデフォルト ファイル。
.env.development: 開発環境に固有の変数。
.env.production: 運用環境に固有の変数。

.env ファイルの例:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

.env.development ファイルの例:

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

.env.production ファイルの例:

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

Vite での環境変数へのアクセス

Vite プロジェクト内の環境変数にアクセスするには、import.meta.env オブジェクトを使用します。

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite は、現在の環境に基づいてビルド プロセス中に import.meta.env 値を自動的に置き換えます。

複数の環境の管理:

Vite の .env ファイルは、開発、ステージング、運用などのさまざまな環境に合わせてカスタマイズできます。現在の環境に応じて、Vite は適切な .env ファイルをロードします:

vite を実行すると、.env.development ファイルがロードされます。
vite build を実行すると、.env.production ファイルがロードされます。
特定の環境で実行:

vite --mode staging

デバッグ環境変数:

環境変数が期待どおりに機能しないという問題が発生している場合は、次の点を確認してください:

• 変数プレフィックス: Vite はこのプレフィックスのない変数を無視するため、すべてのクライアント側変数に VITE_ プレフィックスが付いていることを確認してください。
• Env ロード順序: .env および環境固有のファイルがプロジェクト ルートにあり、正しい名前が付けられていることを確認してください。
• ビルド プロセスの確認: console.log(import.meta.env) を使用して、開発中に利用可能なすべての環境変数を確認します。

結論：：

Vite には .env ファイルを介した環境変数のサポートが組み込まれているため、さまざまな環境にわたる構成を簡単に管理できます。