Typescript+Vite環境での.envの利用方法

Vite環境下で.env内の環境変数が読み出されないなということが起きたので覚書でまとめておきます。

Viteでの環境変数の書き方

Create React Appでは、環境変数を設定するためには、それらの名前が REACT_APP_
Vite環境下ではこれがVITE_に変わります。

- REACT_APP_API_KEY=APIKEY
+ VITE_API_KEY=APIKEY

そしてvite-env.d.tsファイルに（Typescript使用時）

/// <reference types="vite/client"/>
+ declare namespace NodeJS{
+    interface ProcessEnv{
+        VITE_API_KEY: string;
+    }
+}

を追加しておきます。TypeScriptでコーディングする場合は型を宣言することにより、IDEやエディターの補完機能やコードチェックを行えますので可能な限り行っておきましょう。

参考リンク