【2024年版】Viteプロジェクトの環境変数設定

JavaScript

<script>” title=”<script>

<script>

モダンなフロントエンド開発において、環境変数の適切な管理は開発効率とセキュリティの両面で重要な要素となっています。特にViteを使用したプロジェクトでは、開発環境（development）、検証環境（staging）、本番環境（production）など、複数の環境に応じて適切な設定を切り替える必要があるかと思います。

今回はあるViteプロジェクトで環境変数を設定することがあったので、その過程で学んだことを備忘録として残していきます。

Viteにおける環境変数の扱い方

Viteでは、プロジェクトルートに配置した.envファイルから環境変数を自動的に読み込みます。これらの環境変数はimport.meta.envを通じてアプリケーション内でアクセスできます。

重要なポイントとして、セキュリティ上の理由から、ViteはVITE_というプレフィックスが付いた環境変数のみをクライアントサイドで使用できるようになっています。

// 使用可能な例
VITE_API_URL=https://api.example.com

// 使用不可能な例
API_SECRET=secret_password

ビルトイン環境変数の基本

Viteには、最初から利用できる環境変数（ビルトイン環境変数）が用意されています。これらの変数は、import.meta.envオブジェクトを通じてアクセスでき、アプリケーションのビルド時に自動的に適切な値に置き換えられます。

モード判定（MODE）

import.meta.env.MODE

アプリケーションが現在どのモードで動作しているかを示します。

開発時: 'development'

本番時: 'production'

ベースURL（BASE_URL）

import.meta.env.BASE_URL

アプリケーションが提供されているベースとなるURLを示します。これはViteの設定ファイル（vite.config.js）のbaseオプションによって設定できます。

// 使い方例）
const apiUrl = `${import.meta.env.BASE_URL}api/v1`;

公式サイト：baseオプションについて

本番環境の判定（PROD）

import.meta.env.PROD

アプリケーションが本番環境で動作しているかどうかを示すブール値です。

本番環境: true

それ以外: false

// 使い方例）
if (import.meta.env.PROD) {
  // エラートラッキングの初期化など
  initializeErrorTracking();
}

開発環境の判定（DEV）

import.meta.env.DEV

アプリケーションが開発環境で動作しているかどうかを示すブール値です。

開発環境: true

それ以外: false

SSRの判定（SSR）

import.meta.env.SSR

アプリケーションがサーバーサイドで実行されているかどうかを示すブール値です。

環境変数ファイル（.env）の命名規則

Viteは以下の優先順位で環境変数ファイルを読み込みます。

.env                # 全ての場合に読み込まれる
.env.local          # 全ての場合に読み込まれ、gitには無視される
.env.[mode]         # 指定されたモードでのみ読み込まれる（development/production等）
.env.[mode].local   # 指定されたモードでのみ読み込まれ、gitには無視される

  • .env: すべての環境で共通して使用する値
  • .env.development: 開発環境固有の設定
  • .env.production: 本番環境固有の設定
  • .env.local: ローカル開発時のみ使用する設定（Gitにコミットしない）

モード（mode）設定について

Viteにおける「モード」とは、アプリケーションの実行環境を区別するための仕組みです。この設定により、同じコードベースで異なる環境向けの設定を切り替えることができます。

デフォルトの動作

Viteには2つの基本的なモードが用意されています。

# 開発モード
npm run dev  # development モード

# 本番モード
npm run build  # production モード

npm run dev をしたときは、デフォルトでdevelopモードになっています。

環境変数ファイルとモードの関係

それぞれのモードに対応する環境変数ファイルが読み込まれます。

vite-project/
├── .env                # 共通の設定
├── .env.development    # 開発モード用（npm run dev）
└── .env.production     # 本番モード用（npm run build）

カスタムモードの作成

例えばプロジェクトでステージング環境が必要な場合、カスタムモードを作成できます。

１、対応する環境変数ファイル（今回は.env.stagingファイル）を作成

# .env.staging
VITE_APP_TITLE=My App (Staging)
VITE_API_URL=https://staging-api.example.com

２、クライアント側で実装

const App = () => {
  return (
    <div>
      <h1>{import.meta.env.VITE_APP_TITLE}</h1>
      <p>API URL: {import.meta.env.VITE_API_URL}</p>
    </div>
  );
};

３、package.jsonの設定

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:staging": "vite build --mode staging",
    "preview": "vite preview"
  }
}

最後に

Viteの環境変数とモードの機能を適切に活用することで、より堅牢で保守性の高いアプリケーション開発が可能になります。特に大規模なチーム開発や、複数の環境を扱うプロジェクトでは、これらの機能の重要性が際立ちます。

ぜひ、この記事を参考に、プロジェクトに適した環境設定を設定してみてください。

参考資料：Vite公式ドキュメント