JavaScript + React + Viteで.envファイルを参照する方法

はじめに

.envファイルで環境変数を設定する際、Viteでの方法が少し異なるそうなので記録します

問題

.envを読み込むには「dotenv」というライブラリを使います（Viteにはデフォルトで入っているようです）
その際、通常はprocess.env.を用いて参照するようです。

const env = process.env.TEST;

ですが、Vite環境下ではundefindとなってしまいます。

解決方法

Vite環境でEnvファイルを参照する際は、以下のルールがあるようです。

1. import.meta.env.を用いる
2. 定数名の頭にVITE_を付ける（例：VITE_URL）

  const env1 = import.meta.env.VITE_ANPANMAN; // .envファイルの値が取得できる
  const env2 = import.meta.env.CURRYPANMAN; // undifind

最後に

フロントの環境による細かい差もあるのだと実感しました、今後気を付けます。

参考サイト