【環境構築】VSCodeで開発しているプロジェクトをSupabase CLIと絡めてみる

2025.09.25

Supabase(スパベース)とは

Supabaseは、オープンソースのFirebase代替として開発されたBaaS（Backend as a Service）プラットフォームです。

主な特徴

PostgreSQLベース

  • 本格的なリレーショナルデータベースを採用
  • SQLの豊富な機能を活用可能
  • ACID準拠で高い信頼性

提供する機能

  • リアルタイムデータベース
  • 認証・承認システム
  • RESTful API の自動生成
  • ファイルストレージ
  • Edge Functions（サーバーレス関数）

開発者体験

  • 直感的なダッシュボード
  • 自動生成されるAPI
  • リアルタイム機能
  • 豊富なクライアントライブラリ（JavaScript、Python、Dartなど）

Firebaseとの違い

Firebaseと比較すると、SupabaseはSQLデータベースを使用している点が大きな特徴です。これにより、複雑なクエリや既存のSQLスキルを活用できます。また、オープンソースなので自己ホスティングも可能です。

現在多くのWebアプリケーションやモバイルアプリの開発で採用されており、スタートアップから大企業まで幅広く利用されています。特にReact、Vue.js、Next.jsなどのモダンなフロントエンドフレームワークとの相性が良いことで知られています。

PC開発環境

CPU　：core-i5
RAM　：16GB
OS   ：Windows11

使用するもの

  • VSCode
  • Node.js
  • docker Desktop
  • Ubuntu
  • Supabase CLI
  • Gemini CLI（AI駆動開発をする場合のみ）

動作の流れ

Docker Desktopを起動。（常時起動）
↓
VSCodeを起動。
↓
WSLターミナルを開く。（Ubuntu環境に接続）
↓
supabase start コマンドを入力
↓
Node.js がSupabase CLIプログラムを実行
↓
Supabase CLIがDockerに指示を送る
↓
DockerがSupabaseコンテナ群を起動（PostgreSQL、認証サーバーなど）
↓
開発者がアプリケーションコードでSupabaseに接続

導入方法

1.Supabaseをダウンロード

最新版のSupabaseをGithabからダウンロードする。
ここから直接ダウンロードできます。

2.ファイルの配置

ダウンロードした「supabase_[バージョン]_linux_amd64.deb」を
開発予定のディレクトリに置く。

3.debファイルの解凍

↓WSLターミナルを開き、.debファイルを解凍する。

sudo dpkg -i supabase_[バージョン]_linux_amd64.deb

↓以下が表示されるので、パスワードを入力した後にEnterキーを押す。

[sudo] password for [ユーザー名]:

↓以下が表示されると、解凍完了。

Selecting previously unselected package supabase.
(Reading database ... 46675 files and directories currently installed.)
Preparing to unpack supabase_2.45.5_linux_amd64.deb ...
Unpacking supabase (2.45.5) ...
Setting up supabase (2.45.5) ...

3.バージョンの確認

↓以下コマンドで、バージョンを確認。

supabase -v

↓以下のように表示されれば、OK

2.45.5

4.Supabaseの初期化

↓以下コマンドで、Supabaseを初期化。

supabase init

↓以下が表示されたら、[N]+[Enter]。
下記は｢Denoを使用するためにVSCodeの設定をする？｣と聞かれています。

Generate VS Code settings for Deno? [y/N]

↓以下が表示されたら、[N]+[Enter]。
下記は｢Denoを使用するためにIntelliJ IDEAの設定をする？｣と聞かれています。

Generate IntelliJ Settings for Deno? [y/N]

↓以下が表示されたら、Supabaseの初期化が完了。

Finished supabase init.

4.Supabaseを起動

ここの工程で、Supabaseに関するイメージやらがインストールされるため、
PCスペックによりますが、5分～1時間程度構築に時間がかかります。

↓以下コマンドで、Supabaseを起動。

supabase start

↓以下が表示されたら、Supabaseが起動。

Starting database from backup…
17.6.1.005: Pulling from supabase/postgres
.
.
.
Started supabase local development setup.

0.1:54322/postgres
0.1:54322/postgres
Studio URL: http://127.0.0.1:54323
Mailpit URL: http://127.0.0.1:54324
Publishable key: sb_publishable_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Secret key: sb_secret_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
S3 Access Key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
S3 Secret Key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
S3 Region: local

ローカル開発環境の各サービス情報

API関連情報

API URL

  • SupabaseのREST APIエンドポイント
  • データベースの操作（CRUD）やRPC（関数呼び出し）に使用
  • 通常はhttp://localhost:54321

GraphQL URL

  • GraphQL APIエンドポイント
  • GraphQLクエリでデータを取得する際に使用
  • REST APIの代替として利用可能

ストレージ

S3 Storage URL

  • ファイルストレージ（画像、動画等）のエンドポイント
  • ファイルのアップロード・ダウンロードに使用
  • 通常はhttp://localhost:54321/storage/v1

データベース

Database URL

  • PostgreSQLデータベースへの直接接続URL
  • データベースクライアント（psql、pgAdmin等）での接続に使用
  • 形式: postgresql://postgres:postgres@localhost:54322/postgres

管理画面

Studio URL

  • Supabase管理ダッシュボードのURL
  • テーブル管理、SQL実行、認証設定等をブラウザで操作
  • 通常はhttp://localhost:54323

Mailpit URL

  • 開発用メールキャッチャーのURL
  • 認証メールやパスワードリセットメール等をテスト確認
  • 通常はhttp://localhost:54324

認証キー

Publishable key (anon key)

  • クライアントサイドで使用する公開キー
  • フロントエンドアプリケーションの初期化に使用
  • Row Level Security (RLS) の権限で制限される

Secret key (service_role key)

  • サーバーサイドで使用する秘密キー
  • 管理者権限でのデータベース操作が可能
  • セキュリティ上、クライアントサイドでは絶対に使用禁止

S3互換ストレージの認証情報

S3 Access Key / S3 Secret Key

  • S3互換APIでストレージにアクセスする際の認証情報
  • AWS SDKやS3互換ツールでの直接操作に使用

S3 Region

  • ストレージサービスのリージョン設定
  • ローカル環境では通常local

これで、SupabaseCLIの導入が完了です。

SupabaseCLIのよく使うコマンド一覧はこちらから。

コメント