ViteとReactを使用してSupabaseからレコードを取得する(準備編)

Supabaseからレコードを取得する

取得までの一連の流れは上記Docsに書いてあります。が

src/App.jsx

const supabase = createClient("https://<project>.supabase.co", "<your-anon-key>");

ここではSupaBaseクライアントを作成する際にプロジェクトのURLと匿名キーを渡しています。

環境変数の使用
匿名キーや他の機密情報は、環境変数などの安全な方法で設定し、クライアントサイドのコードでこれらの環境変数を参照するようにします。例えば、Viteの場合は.envファイルを使用して環境変数を管理し、import.meta.env経由でアクセスします。

環境変数を使用してSupabaseからレコードを取得する準備

.env

//必ずプロジェクトのルートフォルダに作成すること
VITE_SUPABASE_URL=https://<project>.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

App.jsx

//npm install @supabase/supabase-j を実行している前提
import { createClient } from '@supabase/supabase-js';

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

const supabase = createClient(supabaseUrl, supabaseAnonKey);

公開中のリモートリポジトリにpushする場合は、.gitignoreにenvを記述するのを忘れないようにしましょう。

.gitignore

# Environment variables
.env