はじめに
supabaseのDB情報をViteで使用する際、環境変数設定方法について調べたことをまとめます。
実現したかったこと
supabaseのDB情報をViteで使用する。
解決方法
①dotenvとdotenv-expandをインストールする。
Vite は、環境ディレクトリーにある以下のファイルから追加の環境変数を読み込むために dotenv を利用します。
また、Vite は dotenv-expand を使って、設定不要で env ファイルに書かれた変数を展開できます。
npm init -y
npm i dotenv
npm i dotenv-expand
node_modules配下にインストールされていることを確認
①supabaseのドキュメントから、Initializingのソースをコピー
spabase.js
import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
②外部環境変数ファイル(.env.local)を作成
環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開されます。
例えば、以下の環境変数だとVITE_SOME_KEY だけが import.meta.env.VITE_SOME_KEY としてクライアントソースコードに公開され、DB_PASSWORD は公開されません。
.env
VITE_SOME_KEY=123
DB_PASSWORD=foobar
とのことなので、環境変数の最初にVITE_をつけました。
.env.local
VITE_NEXT_PUBLIC_SUPABASE_URL=hogehoge
VITE_NEXT_PUBLIC_SUPABASE_ANON_KEY=hogehoge
③環境変数ファイルを読み込むように①のソースを修正
Vite は特定の定数を特別な import.meta.env オブジェクトの下で公開します。
import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
export const supabase = createClient(
import.meta.env.VITE_NEXT_PUBLIC_SUPABASE_URL, import.meta.env.VITE_NEXT_PUBLIC_SUPABASE_ANON_KEY)
おわりに
ドキュメントを見つつ、試行錯誤してできたときの喜びは癖になりそう。
参考
環境変数とは、dotenv、dotenv-expandについて
こちらの記事を読みつつ試すだけで、環境変数の理解度がかなり上がったと感じています。
supabaseドキュメント
Viteドキュメント
supabaseの環境変数設定について具体的に実装されている動画です。