【Vite】.env環境変数ファイルをデプロイ環境ごとに設定する
はじめに
Viteを使用してReactアプリの開発をしていた時に、develop環境やstaging環境、local環境ごとに異なる環境変数を設定したいという場面がありました。
この際にVite標準機能である、dotenvを使用して、各環境で設定を変える方法を紹介します。
dotenvとは
dotenvは、環境変数を.envファイルから読み込むことができるNode.jsのライブラリです。
これにより、アプリケーションの設定値や秘密鍵などをコードから分離し、プロジェクトごとに異なる環境変数を簡単に管理できます。
Viteでは、デフォルトでdotenvがサポートされており、特別な設定やインストールは不要です。
.envファイルをプロジェクトのルートディレクトリに作成し、環境変数を定義するだけでViteが自動的に読み込んでくれます。
実現したいシナリオ
今回行いたいシナリオは、下記のような環境変数をデプロイ環境ごとに分けたいということです。
ただし、local環境はデプロイは行いません。
develop環境
VITE_APP_REDIRECT_URI="https://dev.test.jp"
npm run build:developでビルドしたい。
staging環境
VITE_APP_REDIRECT_URI="https://stg.test.jp"
npm run build:stagingでビルドしたい。
local環境（デプロイなし）
VITE_APP_REDIRECT_URI="http://localhost:5173"
npm run devでhttp://localhost:5173を表示したい。
Viteの環境変数についての仕様
まず、前提としてViteの.envの扱いとして、以下があります。
環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開されます
VITE_SOME_KEY=123
DB_PASSWORD=foobar
VITE_SOME_KEY だけが import.meta.env.VITE_SOME_KEY としてクライアントソースコードに公開され、DB_PASSWORD は公開されません。
.env ファイルの命名によって優先度が変わります
.env.local (常に読み込まれる、最優先)
.env.[mode].local
.env.[mode]
.env
特定のモードの env ファイル（例: .env.production）は、汎用の env ファイル（例: .env）よりも優先されます。
Vite は特定のモードの .env.[mode] ファイルに加えて、常に .env と .env.local を読み込みます。
実装
modeの切り替え
まず、package.jsonにmodeの指定をします。
Viteでは、--modeオプションで環境を切り替えることができます。
{
"scripts": {
"dev": "vite --mode person.local",
"build:develop": "tsc -b && vite build --mode develop",
"build:staging": "tsc -b && vite build --mode staging"
},
}
上記の設定により、npm run build:devlopおよびnpm run build:stagingでテスト環境／本番環境デプロイのためのビルドがそれぞれ選択されます。
選択された環境に応じて、Viteは適切な.envファイルを読み込み、環境変数が反映されます。
.envの命名
今回は以下のように命名しました。
local環境は.env.localの方がすっきりしますが、優先順位の関係でビルドしたときに.env.localの内容が優先的にビルドされてしまいます。
そのため、.env.person.local というより具体的な名前にしてあげることで回避できます。
| develop環境 | staging環境 | local環境 |
|---|---|---|
| .env.develop | .env.staging | .env.person.local |
おわりに
Viteでは、環境変数の管理が容易ですが、Viteならではの仕様もあるので、
ドキュメントなどを読みながら最適な設定を探すことで、効率的な開発が実現できます。
Discussion