はじめに
こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
React + Vite 環境で開発していると、API の URL などを環境によって使い分けたい場面があると思います
そんなときに使うのが**環境変数（Environment Variables）**です。
ただ、Vite には**環境変数名は VITE_ で始めないとフロントエンドから参照できない」**というルールがあります。
この記事では、その設定方法と注意点をまとめます。
1. 環境変数ファイルの作成
Vite ではプロジェクトのルートに .env ファイルを作成します。
例えば API のベース URL を環境変数で管理する場合は、以下のように書きます。
# .env
VITE_API_BASE_URL=https://example.com/api
⚠
VITE_を付けないと、Vite はその変数をクライアント側で使えるようにしてくれません。
2. React コンポーネントでの読み込み方法
.env に書いた変数は、import.meta.env を使って読み込みます。
// src/App.tsx
function App() {
console.log(import.meta.env.VITE_API_BASE_URL);
return <div>API Base URL: {import.meta.env.VITE_API_BASE_URL}</div>;
}
export default App;
3. 複数環境の使い分け
開発環境と本番環境で API の URL を切り替えるには、以下のようにファイルを分けます。
.env.development
.env.production
例：
# .env.development
VITE_API_BASE_URL=http://localhost:3000
# .env.production
VITE_API_BASE_URL=https://example.com/api
Vite は npm run dev 実行時は .env.development を、npm run build 実行時は .env.production を自動で読み込みます。
4. よくある間違い
❌ VITE_ を付けない
API_BASE_URL=https://example.com/api # 間違い！
こうするとフロントエンド側からアクセスできず、undefined になります。
❌ .env の場所が間違っている
.env は必ずプロジェクトルート（package.json と同じ階層）に置きます。
5. まとめ
- Vite では環境変数は
.envファイルで管理 - フロントから参照する環境変数は必ず
VITE_で始める -
import.meta.envで参照 - 開発/本番で変数を分けるなら
.env.developmentと.env.productionを使う
このルールを守れば、React + Vite 環境で安全かつ柔軟に設定を管理できます。