何について？
viteのenvについて、ちょっとつまずいたので備忘録として書きます。
Viteとは
簡単に言うとfront develoment用のbuild toolという認識でいます。
何がすごい
自分自身、どちらかというとbackend側のエンジニアなのであまり詳しいことは言えませんが、とにかくbuildが早いという特徴があるらしいです。
こちらのブログが参考になりました。https://devlog.neton.co.jp/develop/react/vite-turbopack/
なぜ使った？
MERN stackを作ってみたくて、MongoDBのtutorialを参考にしましたが、そこで使ってました。
https://www.mongodb.com/languages/mern-stack-tutorial
前提として
開発をしてると、環境変数というのはどうしても避けられないものだと思います。
production, development, test、それぞれの環境用の変数を開発中にどれだけ気にせず作業できるかが開発の効率にもつながり、違う環境の値を使ってしまうミスも防げます。
何にハマった？
環境変数の読み込み方に少しつまづきました。
Naming Rule
ViteではREACTのように編集名の頭にVITEをつけないと無視されます。
ビルトインされた環境名もすでに存在します。
(Env Variables)https://vitejs.dev/guide/env-and-mode#env-variables
読み込み方法
REACTではprocess.env.{VITE_環境変数}で読み込めますが、Viteの場合はBuild時に書き込まれるので、import.meta.env.{VITE_環境変数}を使います。
.envの種類
.env
.env.local
.env.[mode] // modeとはprduction, development, staging, testingなどです。*localもmodeの一つ？
vite command
vite build -> production用コマンドで
vite (--open) -> development用コマンドで オプション--openをつけるとbrowserを開けてくれます。
.env.[mode]は.envよりも優先度が高いです。
例えば、vite --openの時はvite.localがあった場合、そちらの方を優先につかいます。
同様に、vite buildの時はvite.productionが優先的に使われます。
ちなみにvite --open時に.env.local, .env.development, .env.staging, .env.testingがあった場合、何も指定しなければ.env.developmentが使われました。