Supabaseセットアップ完全ガイド – 初心者が躓いたポイントと解決法

こんにちは！プログラミング学習中のゆうちです。
少しブログ更新の間隔があいてしまいました。

しかし、気を取り直して更新していきたいです！

今回は、Supabaseのセットアップで私が実際に躓いたポイントと、その解決方法をまとめてみました。同じような初心者の方の参考になれば嬉しいです。

Supabaseって何？

まず簡単に説明すると、SupabaseはFirebaseの代替として注目されているBaaS（Backend as a Service）です。データベース、認証、ストレージなどの機能を簡単に使えるようにしてくれるサービスです。

セットアップの流れ

1. Supabaseアカウントの作成

まずはSupabase公式サイトにアクセスして、アカウントを作成します。GitHubアカウントがあれば、それでログインできるので楽ちんです。

2. 新しいプロジェクトの作成

ログイン後、「New Project」ボタンをクリックして、以下の情報を入力します：

• プロジェクト名: 好きな名前
• データベースパスワード: 強力なパスワードを設定
• リージョン: 日本に近い「Northeast Asia (Tokyo)」がおすすめ

3. 環境変数の設定（ここで躓きました！）

プロジェクトが作成されたら、APIキーを取得して環境変数に設定する必要があります。

APIキーの取得方法：

1. プロジェクトダッシュボードの左メニューから「Settings」をクリック
2. 「API」タブを選択
3. 以下の2つをメモ：
   • Project URL
   • anon public key

環境変数の設定：

プロジェクトのルートディレクトリに.env.localファイルを作成します：

bash

# .env.localファイル
NEXT_PUBLIC_SUPABASE_URL=あなたのproject_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=あなたのanon_key

私はここで「.env」ファイルと「.env.local」ファイルの違いがわからず混乱しました。Next.jsの場合は.env.localを使うのが正解です！

4. Supabaseクライアントの設定

次に、Supabaseクライアントを初期化するファイルを作成します：

javascript

// lib/supabaseClient.js
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

5. データベースのセットアップ（schema.sqlファイルが見つからない問題）

ここでまた躓きました。READMEには「supabase/schema.sqlファイルを実行して」と書いてありましたが、そんなファイルが見つからない！

解決方法：

実は、このファイルは自分で作成する必要がある場合が多いようです。以下の手順で作成しました：

1. プロジェクトルートにsupabaseフォルダを作成
2. その中にschema.sqlファイルを作成
3. 必要なテーブル定義を記述

例えば、TODOアプリの場合：

sql

-- TODOテーブルの作成
create table if not exists todos (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users(id),
  task text not null,
  is_complete boolean default false,
  created_at timestamp with time zone default timezone('utc'::text, now())
);

-- Row Level Security (RLS) を有効化
alter table todos enable row level security;

-- ユーザーは自分のTODOのみ操作可能
create policy "Users can manage own todos" on todos
  for all using (auth.uid() = user_id);

6. SQLの実行

作成したSQLファイルの内容を実行する方法は2つあります：

方法1: Supabaseダッシュボードから

1. SQL Editorタブを開く
2. SQLをコピー＆ペースト
3. Runボタンをクリック

方法2: Supabase CLIを使う

bash

supabase db push

私は最初、ダッシュボードから実行する方法を使いました。視覚的にわかりやすくて安心感がありました。

まとめ

Supabaseのセットアップは、最初は難しく感じるかもしれませんが、一つずつ手順を踏んでいけば必ずできます。私も何度もエラーと格闘しながら、なんとかセットアップできました。

今後は、実際にSupabaseを使ってCRUD操作を実装する方法について学んでみようと思います。

皆さんもSupabaseにチャレンジしてみてはいかがでしょうか？わからないことがあれば、コメントいただけたら嬉しいです。一緒に学んでいきましょう⭐

ゆうち

AI駆動開発プログラマー

４０代防大卒自衛官です。「人生を自分でコントロールできるようにする」ことがビジョン。独学でプログラミングを勉強し、自衛隊を退職して起業を目指す。初心者から起業するまでのリアルな日常を発信します。