Vite + Supabase プロジェクトで .env を引き継ぐ方法

はじめに

新しい Vite プロジェクト（例: type-class1）を作ったとき、
以前のプロジェクト（例: react1）で設定していた Supabase の環境変数 を再利用したい場面がありました。そこで、以前設定したSupabase の環境変数 を再利用する方法についてまとめます。

問題

解決方法

1.react1 で .env を探す

まずは古いプロジェクトに .env があるか確認します。

ls -a ~/workspace/react1

結果に .env があれば OK。
ただし .env はフォルダではなくファイルなので、cd .env では入れません。

2. 中身を確認する

以下のコマンドで内容を確認します。

cat ~/workspace/react1/.env

出力例

VITE_SUPABASE_URL=https://abcd1234.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...

3. supabaseClient.js の確認

supabaseClient.js では .env の値を読み込む形になっているはずです。

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

これで新しいプロジェクトでも Supabase が利用可能になります

2. 中身を確認する

以下のコマンドで内容を確認します。

cat ~/workspace/react1/.env

出力例

VITE_SUPABASE_URL=https://abcd1234.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...

---

おわりに

cat や nano で中身を確認

新しいプロジェクトにコピーすればすぐ再利用できる

supabaseClient.js は import.meta.env を使って値を取得する