supabase調査・お試し備忘録
tdtomatoSupabaseとは
Firestoreの代替を謳うBackend as a Service。両者の大きな違いはDB（Firestore: NoSQL, Supabase: RDB）。
無料で始められるプラットフォームサービスだが、オープンソースなので自前で各Supabaseサービスをホスティングすることも可能。Docker Imageが配布されている。
サービスの種類
| サービス | 説明 |
|---|---|
| Database | PostgreSQLデータベースサービス。ブラウザから閲覧・操作可能。 |
| Auth | 認証、認可。メアド・パスワード認証からGoogle, Appleなど各種プロバイダ、電話番号認証まで。 |
| Storage | ファイルストレージサービス。 |
| Edge Function | エッジサーバーでのコード実行サービス。 |
| Realtime | WebSocketによるリアルタイム通信サービス。 |
| AI & Vector | PostgreSQLおよびその拡張機能(pgvector)を使ったAIアプリ開発向けのサービス。 |
tdtomatoSupabase Database, Vercel Postgres, Neonの比較
3/15/2024時点
Cloudflare D1はβなので対象外
PlanetScalseは無料プラン廃止のため対象外
ソース
比較項目については見落としかなりありそう。
全般
| Supabase | Vercel | Neon | |
|---|---|---|---|
| 日本リージョン | O | x (最短シンガポール) | x (最短シンガポール) |
| RDB | PostgreSQL | PostgreSQL | PostgreSQL |
無料枠
| Supabase (FREE Plan) | Vercel (Hoby Plan) | Neon (Free Tier) | |
|---|---|---|---|
| 作成できるデータベースの数 | 2（プロジェクト数の制限が2） | 1つまで | 無制限 |
| 容量 | 500 MB | 256 MB | 500 MB |
| CPU時間 | - (記載なし) | 60時間 | 20時間 |
| 自動バックアップ | なし | - (記載なし) | 24時間 |
| 帯域幅 | 5 GB | - (記載なし) | - (記載なし) |
※Supabaseの無料枠のプロジェクトは1週間使われないと一時停止される。
有料枠（プロ）
| Supabase (Pro Plan) | Vercel (Pro Plan) | Neon (Launch) | |
|---|---|---|---|
| 金額 | $25.00 | $20.00 | $19.00 |
| 作成できるデータベースの数 | 制限なし | 1つ + データベース1つにつき$1.00 | 制限なし |
| 容量 | 8 GB + 1 GBあたり$0.125 | 512 MB + 1 GBあたり$0.12 | 10 GB |
| CPU時間 | - (記載なし) | 100時間 + 1CPU時間あたり$0.10 | 1200時間 + 1CPU時間あたり$0.04 |
| 自動バックアップ | 7日 | - (記載なし) | 7日 |
| 帯域幅 | 250 GB + 1GBあたり$0.09 | - (記載なし) | - (記載なし) |
Neonの場合、Branching機能を使用してバックアップを復元できる。
提供されいているサービス範囲が異なるので単純比較は難しいが、よっぽど小さいアプリケーションじゃないかぎりNeon か Supabaseを使ったほうがいい。
レイテンシを考えて日本リージョンのあるSupabaseが魅力的。
Neon vs Vercel 参考
Neon vs Supabase 参考
追記 Supabaseのコンピュート料金について
3/22/2024現在、料金は$25と表示されているが、
複数プロジェクトある場合、2つ目から$10加算されようだ。
料金について詳しくドキュメントをさらうと、プロプラン（$25）には1つのMicro Computeぶんの料金が含まれているが、それ以上のスペック・数を割り当てると追加で料金がかかるとある。
While you only pay for the $25 Pro plan once, launching additional projects at least incurs compute costs.
dev用に複数DBを用意しようと思ったら想定外にお金がかかりそうだった。
tdtomatoSupabaseお試し記録
データベースの作成
New Projectボタンからプロジェクトを作成すると、自動的にプロジェクト用のデータベースが一つ作成される。
画面からの操作
第一印象：画面めっちゃ見やすい
左メニューのTable Editorからクリック操作でテーブル作成可能。
SQL Editorもあるので楽ちん。
SQL EditorのQuickstartsに「Country」というDDLのサンプルがあるのでそちらを流し込んでみる。
クエリ履歴が残る。
ER図のビュワーがあり、構造を確認しやすい。
アーリーアクセスではあるが、Proプランではブランチング機能があるとのこと。PlanetScaleで提供されていたものとほぼ同じっぽい。
tdtomatoローカル開発環境の構築 w/ Next.js
Supabaseは本番環境と同じ環境をDockerを用いてローカルに構築できる。
公式が分かりやすいHow Toを作ってくれている。
supabase CLIのインストール
brew install supabase/tap/supabase
ログインしておく。
supabase login
Next.jsプロジェクトの初期化
Next.jsを使って連携を試してみる。
Next.jsプロジェクトを作成。
npx create-next-app@latest supabase-sample-app
supabaseの初期化
プロジェクトフォルダ内でsupabaseの初期化コマンドを実行。
supabase init
Generate VS Code settings for Deno? [y/N] と訊かれるのでNoと回答。
supabaseフォルダが作成される。初期状態ではconfig.tomlとseed.sqlが配置されている。
ローカル環境の立ち上げ
Dockerコンテナを立ち上げる。
supabase start
各ポート抜粋。
API URL: http://127.0.0.1:54321
GraphQL URL: http://127.0.0.1:54321/graphql/v1
DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
Studio URL: http://127.0.0.1:54323
Inbucket URL: http://127.0.0.1:54324
Supabase Studioは、Supabaseサービスと同じGUIを使って開発データを確認することができる。
さっそくhttp://127.0.0.1:54323にアクセスしてみる。テンションがぶち上がる。
ローカルでもCountryテーブルを作成しておく。
psqlコマンドで接続もできる。
psql 'postgresql://postgres:postgres@localhost:54322/postgres'
止めるときのコマンド。
supabase stop
Next.jsからsupabaseを利用する
supabase-jsのインストール
npm install @supabase/supabase-js
clientの作成
.env.localを作成する。
SUPABASE_URL（ローカルはhttp://127.0.0.1:54321）とSUPABASE_KEY（Dockerコンテナを立ち上げたときに表示されるanon key）。
クライアントサイドコンポーネントでも使う場合はNEXT_PUBLIC_の接頭辞をつける。
SUPABASE_URL=http://127.0.0.1:54321
SUPABASE_ANON_KEY=eyJhxxxxxx...
client.tsを作成する。
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = process.env.SUPABASE_URL || "";
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || "";
const client = createClient(supabaseUrl, supabaseAnonKey);
export default client;
データの取得
各種メソッドの詳細はドキュメント参照。
ページでcountriesテーブルからデータを取得し一覧表示してみる。
iimport client from "./client";
export default async function Home() {
const { data, error } = await client.from("countries").select("*");
console.log(data);
return (
<main>
{data?.map((country) => (
<div key={country.id}>
{country.id}:{country.name}
</div>
))}
</main>
);
}
tdtomato複数データベースを作成する
schemaのプルダウンメニューから、「Create a new schema」を選択して作成することができる。
Authサービスなどのデータもここから切り替えて確認できる。