vite React プロジェクトで .env に書いた環境変数を使うメモ
環境変数は VITE_ prefix を使う
VITE_ から始まる変数名でないと vite アプリからアクセスできない
環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開されます。
cf. 環境変数とモード | Vite
.env
DB_PASSWORD=foobar VITE_SOME_KEY=123
アプリからは import.meta.env.変数名 でアクセスする
const key = import.meta.env.VITE_SOME_KEY; // => '123' const dbPassword = import.meta.env.DB_PASSWORD; // => undefined
VITE_ prefix の無い変数は undefined になる
VITE は dotenv とか入れなくても環境変数が読み込める仕組みが用意されていました。
create_react_app との違いはこんな感じ
| 環境 | 環境変数の prefix | アプリでの読み込み方法 |
|---|---|---|
| create_react_app | REACT_APP_ |
process.env.REACT_APP_変数名 |
| vite | VITE_ |
import.meta.env.VITE_変数名 |
[参考]
