Open1
docker compose x Vite - Vue x .env
オクト個人開発にて、docker composeとVite VueとRailsを使って、開発を行っている。
そのとき、.envに記載した環境変数を使いたくて、調べたことをまとめるためのメモ。
一言で言うと、import.meta.env.VITE_HOGEで環境変数にアクセスする。その際、環境変数にはVITE_というプレフィックスが必要だ。
まずは、docker-compose.ymlと.envをいじる。
.env
HOGE=hoge
docker-compose.yml
[...]
environment:
VITE_HOGE: $HOGE
[...]
クライアント側ではこうだ。
console.log(import.meta.env.VITE_HOGE);
環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開されます。