はじめに
Supabase、盛り上がっているので使ってみたい、という方も多いと思いますが、使い始める前に知っておくと便利な情報があります。この記事では、個人的に「事前に知っておきたかった」と思う概念や大まかな流れをまとめました。
注意点
- この記事の内容は執筆時点（2024年8月）のものです。supabaseは頻繁にアップデートされるため、将来的に一部の情報が古くなる可能性があります
- チュートリアルではなく、使い始める前の概念理解に重点を置いています
- モバイルアプリ開発にも参考になる部分があるかもしれませんが、筆者が取り組んでいるWEBアプリ開発なので、焦点はWEBアプリ開発に当たっています
- 筆者も体系的に学んだわけではなく、独学・独断の内容をまとめたもののため、supabaseのベストプラクティスと異なる可能性があります
- もしお気づきの点があればコメント等でご指摘いただけると幸いです
環境
- OS: macOS Sonoma 14.5
- supabase CLI: 1.191.3
supabaseとは？
supabaseはFirebaseの代替を謳っているBaaS（Backend as a Service）の一種です。データベースや認証などの機能がAPIやインフラとともに提供されているもの、と理解して大きな相違はないと思います。
特にフロントエンドメインで開発をしたい時に、バックエンドを別に用意することなく、ライブラリを通じてAPIをコールするだけで、データベースや認証機構を持ったWEBアプリケーションを開発できるのが大きな魅力です。
※詳細はこちらの記事が参考になります。
supabaseの基本的な使い方：大きな流れ
supabaseを使ったアプリケーション開発の大まかな流れは以下の通りです：
- Dockerでローカルに開発用環境を立ち上げる
- 開発環境で立ち上がったサーバーに向けてフロントエンドの開発をする
- ローカルの設定内容を本番（supabaseによりホスティングされているもの）に反映する
- 開発したフロントエンドを何らかのホスティングサービスにリリースする
- 本番のフロントエンドのAPIの向き先を本番のsupabaseに向ける
各ステップの概要と参考資料を以下に記載します。
1. Dockerでローカルに開発用環境を立ち上げる
Supabase CLIというコマンドラインツールを利用して立ち上げることができます。
詳細→ Local Development | Supabase Docs
2. 開発環境で立ち上がったサーバーに向けてフロントエンドの開発をする
JavaScript/TypeScriptを使用する場合は、supabaseの公式ライブラリを利用します。
その他の言語のライブラリも、リンク先のReferenceメニューから確認することができます。
開発環境のsupabaseの設定は、supabase/config.tomlで行います。
3. ローカルの設定内容を本番に反映する
データベースのマイグレーションを反映するには、supabase db pushで反映されます。
開発環境の設定config.tomlの内容は、本番のWEB UIで手動で反映する必要があります。（例：認証設定、リダイレクトURL、メール文面など）
※config.tomlの内容を本番環境に一括で反映する方法は見つかりませんでした。
4. フロントエンドのホスティング
お好みのサービス（Cloudflare Pages、Vercel、Netlifyなど）を使用してフロントエンドをホスティングします。
5. 本番環境のAPI設定
フロントエンドのホスティングサービスの環境変数で、本番supabaseのAPI URLとanon keyを設定します。これらの情報は本番のダッシュボード（WEB UI）で取得できます。
開発環境と本番環境の対応関係
| 項目 | 開発環境 | 本番環境 |
|---|---|---|
| ダッシュボードURL | http://localhost:54323 |
https://supabase.com/dashboard/ |
| 設定方法 | ファイルsupabase/config.tomlを編集 |
ダッシュボードで設定 |
| API URL・key取得 | コマンドsupabase statusで表示 |
ダッシュボードで確認 |
| メール送信 |
http://localhost:54324 で確認 |
実際に送信（通数制限あり） |
データベースを使う上での注意点
supabaseでは、anon key（匿名キー）を使用してデータベースに接続します。このキーはフロントエンドに露出させる想定のものですが、そのまま使用すると全てのデータベース操作が可能になってしまいます。
そこで重要になるのが (RLS)Row Level Securityの設定です。
RLS（Row Level Security）とは？
RLSを使うと、行単位でCRUD権限を設定できます。例えば：
- ユーザーは自分のデータのみ閲覧・更新可能
- 投稿者は自分の投稿を閲覧・更新可能、他のユーザーは閲覧のみ可能
など、細かい制御が可能になります。
参考：Row Level Security | Supabase Docs
マイグレーションファイルによるデータベースの変更
supabaseではダッシュボードのWEB UI上でポチポチすることでも、ダッシュボード上のSQL EditorでSQLを流すことでもテーブルの追加や変更ができますが、ローカルの開発環境を利用してちゃんと開発するならば、マイグレーションファイルを利用するのが良いと思います。
マイグレーションの基本的な流れは以下の通りです。
- ローカルでマイグレーション作成
- ローカルでマイグレーションファイルの編集
- ローカルにマイグレーションを適用して開発
a. （必要に応じて）マイグレーションファイルの修正 - 本番にマイグレーションを適用
- 本番にリリース
それぞれのコマンドは以下です。
-
マイグレーションファイルの作成
supabase migration new [マイグレーションの名前] -
マイグレーションファイルの編集
ファイル名:
supabase/migration/[タイムスタンプ]_[マイグレーションの名前].sqlを編集 -
ローカルへのマイグレーション適用
supabase migration up -
本番へのマイグレーション適用
supabase db push
本番環境のマイグレーションを取り消したい場合はsupabase migration repairコマンドを使用します。
ローカルのマイグレーションを取り消す明確な方法は見つかりませんでしたが、マイグレーションファイルを削除してsupabase db resetを実行するのが一般的なようです（ただし、格納済みのデータは消えるので注意が必要です）。
開発環境でのメールを確認する方法
開発環境でsupabaseから送信されたメールは、http://localhost:54324にアクセスすることで確認できます。これはInbucketというツールを使用しており、Rails開発におけるMailCatcherやletter_openerのような役割を果たします。
おわりに
私が個人的にsupabaseを触る前に知っておきたかった概要をまとめました。特に、ローカルでDockerを使って開発環境を立ち上げられることは、（私の探し方がまずかったかもですが）たどり着くまでに時間がかかり、混乱していました。
多くのハンズオン的な入門記事では、直接本番環境でテーブル作成から始めることが多いですが、公式ドキュメントを見ても、ローカル開発環境の利用を推奨しているようです。
最後に宣伝
supabaseを利用して開発した個人開発のWEBアプリ、『いまゲーム』を運営していますので、よろしければ覗いてみてください。
supabaseのデータベースと認証機能を利用しています。
「ゲームの『いま』と思い出、ゆるくメモ」をコンセプトに、自分が最近プレイしているゲームを画像付きで簡単に共有できるWEBアプリです。登録不要で、一度共有するくらいなら5分で利用できるので、気軽に利用してください。
匿名でフィードバックを送ることもできます。使っていただいたり、フィードバックをいただけたら泣いて喜びます。
使用技術等詳細は以下記事に記載しています。
良ければX(Twitter)もフォローしてもらえると嬉しいです。