Supabaseを利用するにはまず「クライアントの初期設定」を行う必要があります
これにより、SupabaseのAPIを使ってデータベースの操作や認証機能を利用できるようになります。この記事はVite環境でSupabaseを使ってDB設計する基礎的な内容について触れます
クライアントとは何か
クライアントとは、SupabaseのAPIとアプリをつなぐための「窓口」となるもの
例えば、データベースにアクセスしたり、認証機能を利用したりするためにはクライアントを通じてAPIを呼び出す必要があります。
なぜクライアント設定が必要なのか
Supabaseは、API経由でデータベースや認証、ストレージといった機能を提供しています。このAPIとアプリをつなぐための「窓口」がクライアントです。クライアント設定をすることで、以下のようなことが可能になります
- データベースのデータを取得・追加・更新
- ユーザー認証（サインアップ、ログインなど）
- ストレージの利用（画像やファイルの保存）
例えばReactアプリからデータを取得したり、ユーザーを認証するにはこのクライアントが必須となります
クライアントの設定手順
1. ライブラリをインストール
Supabaseを使うための公式ライブラリ @supabase/supabase-js をインストールします。
npm install @supabase/supabase-js
2. クライアント設定ファイルを作成
プロジェクト内にクライアントを設定するためのファイルを作成します。
- プロジェクトの
srcフォルダ内にsupabaseClient.jsを作成。 - 以下のコードを記述します：
import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
export const supabase = createClient(
import.meta.env.VITE_SUPABASE_URL,
import.meta.env.VITE_SUPABASE_ANON_KEY
);
-
supabaseUrlとsupabaseKeyの取得方法:- Supabaseダッシュボードにログイン。
- 「Settings > API」にアクセスし、Project URL と anon key をコピーします。
.envでシークレット情報を管理
APIキーや機密情報を環境変数で管理することで、コード内に直接書かずに安全に取り扱うことができます。
1. .envファイルを作成
プロジェクトのルートディレクトリに .env ファイルを作成し、以下のように記述します。
私はここで間違って階層をsrcファイル内に設置してしまい、エラーになりましたので気をつけてください。
VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-anon-key
2. .gitignoreに追加
.env ファイルはバージョン管理に含めないように .gitignore に追加します。
.env
これにより、誤ってAPIキーを公開リポジトリにアップロードするリスクを防げます。
またsupabaseのRLSが有効だと認証なしでは Supabaseのデータを取得できないので、エラーが起きた場合そこも確認が必要です。
これでSupabaseクライアントの初期設定が完了です！