Viteでの.envファイルから環境変数を読み込む方法

問題点

Viteプロジェクトで.envファイルに定義した環境変数がimport.meta.envでアクセスできない場合があります。具体的には、.envファイルに以下のように変数を定義しても：

TEST_VAR=123F

import.meta.env.TEST_VARを参照するとundefinedが返ってきます。

解決方法

基本的な解決策：VITE_プレフィックスの使用

Viteはセキュリティ上の理由から、クライアントサイドコードでアクセス可能な環境変数にはVITE_プレフィックスを要求します。

重要

.envファイルの環境変数はVITE_で始まる必要があります

正しい設定例：

VITE_TEST_VAR=123F

アクセス方法：

// クライアントサイドコードでの使用方法
const testValue = import.meta.env.VITE_TEST_VAR;
console.log(testValue); // "123F" と表示される

サーバーサイドでの環境変数の使用

vite.config.jsなどサーバーサイドで環境変数を使用する場合、loadEnv関数を利用します：

import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {
  // 環境変数を読み込み
  const env = loadEnv(mode, process.cwd());
  
  return defineConfig({
    // 設定オプション
    define: {
      __API_URL__: JSON.stringify(env.VITE_API_URL)
    }
  });
};

カスタムプレフィックスの設定

vite.config.jsで環境変数のプレフィックスを変更することも可能です：

export default defineConfig({
  envPrefix: 'MY_APP_', // カスタムプレフィックス
  // 他の設定...
});

注意

空の文字列''をプレフィックスに設定すると、すべての環境変数がクライアントに公開されるため、セキュリティリスクがあります。Viteはこれを検出するとエラーをスローします。

開発時の注意点

1. ファイルの配置: .envファイルはプロジェクトのルートディレクトリに配置してください
2. サーバーの再起動: 環境変数を変更した後は開発サーバーを再起動してください
3. モード別の環境ファイル:
   • .env - 全環境で使用
   • .env.development - 開発環境のみ
   • .env.production - 本番環境のみ

高度な使用方法

既存の環境変数の参照

.envファイル内でシステムの環境変数を参照することも可能です：

# システムの環境変数を参照
VITE_API_URL=${EXISTING_API_URL}

# デフォルト値の設定
VITE_API_URL=${EXISTING_API_URL:-https://default-api.example.com}

すべての環境変数を読み込む方法

どうしてもVITE_プレフィックスなしですべての環境変数にアクセスする必要がある場合：

import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {
  // 第三引数を空文字にするとすべての環境変数を読み込み
  const env = loadEnv(mode, process.cwd(), '');
  
  return defineConfig({
    define: {
      'process.env': Object.keys(env).reduce((acc, key) => {
        acc[key] = JSON.stringify(env[key]);
        return acc;
      }, {})
    }
  });
};

警告

この方法はセキュリティリスクがあるため、慎重に使用してください。機密情報がクライアントに公開される可能性があります。

トラブルシューティング

環境変数が正しく読み込まれない場合、以下の点を確認してください：

1. .envファイルがプロジェクトルートにあるか
2. 変数名にVITE_プレフィックスが付いているか
3. 開発サーバーを再起動したか
4. ファイル名が正しいか（.env、.env.development、.env.production）

まとめ

Viteで環境変数を適切に使用するには：

• クライアントサイドでアクセスする変数にはVITE_プレフィックスを使用
• サーバーサイドではloadEnv関数を利用
• セキュリティを考慮し、不必要に環境変数を公開しない
• 環境変数変更後は開発サーバーを再起動

これでViteプロジェクトで環境変数を安全かつ効果的に使用できるようになります。