個人開発において Supabase は非常に強力な選択肢です。
認証・DB・Storage・API が一体化されており、初期構築の手間を大きく削減できます。
さらに Supabase には Local Development 機能が用意されており、
クラウドに依存せず、完全にローカル環境だけで Supabase を動かすことができます。
本シリーズでは、この Supabase Local Development を使って Web アプリを構築していきます。
第1回となるこの記事では、ローカル環境に Supabase を立ち上げるところまでを扱います。
公式ドキュメントはこちらです。
https://supabase.com/docs/guides/local-development
以降は、基本的にこのドキュメントに沿って進めます。
Supabase CLI のインストール
まずは Supabase CLI を開発用依存としてインストールします。
npm install supabase --save-dev
Supabase プロジェクトの初期化
次に、Supabase 用の設定ファイル群を生成します。
npx supabase init
Supabase Local Development の起動
以下のコマンドで Supabase をローカル起動します。
npx supabase startすると、次のようなエラーが出ました。
failed to inspect service: error during connect:
Docker Desktop is a prerequisite for local development.エラー内容の通り、Supabase Local Development には Docker Desktop が必須です。
Docker Desktop のインストール
Docker Desktop をインストールします。
インストール後、Docker Desktop を起動します。
再度 Supabase を起動する
Docker Desktop 起動後、あらためて以下を実行します。
npx supabase startすると、Supabase の各コンテナが起動し、以下の情報が表示されます。
npx supabase start
[+] Pulling 13/13
✔ studio Skipped - Image is already present locally 0.0s
✔ pgmeta Skipped - Image is already present locally 0.0s
✔ gateway Skipped - Image is already present locally 0.0s
✔ edgeRuntime Skipped - Image is already present locally 0.0s
✔ vector Skipped - Image is already present locally 0.0s
✔ db Skipped - Image is already present locally 0.0s
✔ api Skipped - Image is already present locally 0.0s
✔ analytics Skipped - Image is already present locally 0.0s
✔ auth Skipped - Image is already present locally 0.0s
✔ mailpit Skipped - Image is already present locally 0.0s
✔ realtime Skipped - Image is already present locally 0.0s
✔ storage Skipped - Image is already present locally 0.0s
✔ imgProxy Skipped - Image is already present locally 0.0s
Starting database from backup...
Starting containers...
WARNING: Analytics on Windows requires Docker daemon exposed on tcp://localhost:2375.
See https://supabase.com/docs/guides/local-development/cli/getting-started?queryGroups=platform&platform=windows#running-supabase-locally for more details.
Waiting for health checks...
Started supabase local development setup.
╭─────────────────── ╮
│ 🔧 Development Tools │
├──── ┬──────────────┤
│ Studio │ http://127.0.0.1:54323 │
│ Mailpit │ http://127.0.0.1:54324 │
│ MCP │ http://127.0.0.1:54321/mcp │
╰──── ┴──────────────╯
╭─────────────────────────── ╮
│ 🌐 APIs │
├────────┬────────────────── ┤
│ Project URL │ http://127.0.0.1:54321 │
│ REST │ http://127.0.0.1:54321/rest/v1 │
│ GraphQL │ http://127.0.0.1:54321/graphql/v1 │
│ Edge Functions │ http://127.0.0.1:54321/functions/v1 │
╰────────┴────────────────── ╯
╭────────────────────────────────╮
│ ⛁ Database │
├── ┬──────────────────────────── ┤
│ URL │ postgresql://postgres:postgres@127.0.0.1:54322/postgres │
╰── ┴──────────────────────────── ╯
╭─────────────────────────────── ╮
│ 🔑 Authentication Keys │
├────── ┬────────────────────────┤
│ Publishable │ 割愛します │
│ Secret │ 割愛します │
╰────── ┴────────────────────────╯
╭────────────────────────────────────────╮
│ 📦 Storage (S3) │
├──────┬─────────────────────────────────┤
│ URL │ http://127.0.0.1:54321/storage/v1/s3 │
│ Access Key │ 割愛します │
│ Secret Key │ 割愛します│
│ Region │ local │
╰──────┴─────────────────────────────────╯
開発用ツール
Studio
Supabase の ダッシュボードをローカル環境に再現したもの。
テーブル作成、データ確認、認証ユーザー管理、SQL 実行などが GUI で行える。
👉 ここが Supabase Local Development の肝
本番の Supabase 管理画面とほぼ同じ操作感で、完全にローカルで検証できる。
Mailpit
👉 Supabase Auth が送信する 認証メール（確認・リセットなど）をローカルで受信・確認するためのツール。
https://supabase.com/docs/guides/local-development/cli/testing-and-linting#testing-auth-emails
MCP
👉 モデルコンテキストプロトコル（MCP）は、大規模言語モデル（LLM）をSupabaseなどのプラットフォームに接続するための標準規格です。接続すると、AIアシスタントがユーザーに代わってSupabaseプロジェクトと対話し、クエリを実行できるようになります。
https://supabase.com/docs/guides/getting-started/mcp
API
Project URL
👉 Supabase プロジェクトの ベース URL。
REST
http://127.0.0.1:54321/rest/v1
👉 Supabaseはデータベーススキーマから直接APIを自動生成するため、ブラウザから直接RESTfulインターフェースを介してデータベースに接続できます
https://supabase.com/docs/guides/api
GraphQL
http://127.0.0.1:54321/graphql/v1
Supabase が提供する GraphQL API エンドポイント。
👉 Supabase GraphQL APIは、pg_graphqlを使用してデータベースのスキーマから自動的に反映されます。以下をサポートします。
- 基本的なCRUD操作（作成/読み取り/更新/削除）
- テーブル、ビュー、マテリアライズドビュー、外部テーブルのサポート
- テーブル/ビュー間の任意の深い関係
- ユーザー定義の計算フィールド
- Postgres のセキュリティ モデル – 行レベル セキュリティ、ロール、権限付与を含む
すべてのリクエストは 1 回のラウンドトリップで解決されるため、応答時間が短縮され、スループットが高くなります。
https://supabase.com/docs/guides/graphql
Database
PostgreSQL 接続情報
postgresql://postgres:postgres@127.0.0.1:54322/postgresSupabase が内部で使用している PostgreSQL への直接接続情報。
👉
- A5M2
- pgAdmin
などのツールから 直接 DB に接続して開発・検証が可能
以下はA5M2から接続。
https://supabase.com/docs/guides/database/overview
Authentication Keys
Publishable Key / Secret Key
Local 環境用の 認証キーが自動発行される。
- Publishable Key
→ フロントエンドから使用 - Secret Key
→ サーバーサイド専用（流出厳禁）
👉 本番環境と同じ認証構成を ローカルで完全再現できる
Next.js + Supabase テンプレートで Web アプリを作成
次に Web アプリを作成します。
mkdir web
cd web
npx create-next-app -e with-supabase .Supabase 公式の Next.js テンプレートを使用します。
依存関係をインストールします。
npm install環境変数の設定
.env.example をコピーします。
cp .env.example .env.local.env.local を以下のように編集します。
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=<supabase start 時に表示された anon key>開発サーバー起動
npm run devこれで、Supabase（Local）と接続された Next.js アプリが起動します。
Git 管理
https://github.com/xpendev/budget-planner
本記事で解説しているコードは、タグ「v0.1.0」で再現できます。
https://github.com/xpendev/budget-planner/releases/tag/v0.1.0
ディレクトリ構成
node_modules/
supabase/ ← Supabase Local Development 用
web/ ← Web アプリ（Next.js）
.gitignore
package.json
package-lock.jsonまとめ
- Supabase は 完全にローカル環境だけで動かせる
- Docker Desktop は必須
- 認証・DB・API を含む環境が数コマンドで構築できる
次回は、この環境を前提に なんらかのアプリを作成してみようと思います。
コメント