環境変数

16.2.1. ファイル構造

プロジェクトルート/
├── .env                  # 全環境共通
├── .env.development      # 開発環境 (yarn dev)
├── .env.production       # プロダクション環境 (yarn build)
└── .env.local            # ローカルオーバーライド (Git未追跡)

---

16.2.2. 変数ネーミング

• クライアントからアクセス可能な変数は必ず**VITE_**プレフィックスを使用します。
• VITE_プレフィックスがない変数はクライアントバンドルに含まれません。

# .env.development
VITE_API_BASE_URL=http://localhost:8080/api
VITE_APP_TITLE=Flowin (開発)

# .env.production
VITE_API_BASE_URL=https://api.flowin.tienipia.com
VITE_APP_TITLE=Flowin

---

16.2.3. 型定義

環境変数の型を宣言します。

// src/env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_APP_TITLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

---

16.2.4. 使用方法

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL

注意

環境変数に機密情報（APIキー、シークレット）を含めないでください。クライアントバンドルにそのまま公開されます。

---

16.2.5. 環境別設定の優先順位

Viteは以下の優先順位で環境変数をロードします。

優先順位	ファイル	説明
1（高）	.env.{mode}.local	モード別ローカルオーバーライド
2	.env.{mode}	モード別設定
3	.env.local	ローカルオーバーライド
4（低）	.env	共通デフォルト値

• .env.localおよび.env.*.localファイルは.gitignoreに含めなければなりません。