Supabase連携の概要
UIとデータベースを一か所で設計
LovableのネイティブなSupabase連携により、フロントエンドのUIとバックエンドのデータベースの両方を、使いやすい単一のチャットインターフェースから管理できます。つまり、Lovableを離れることなく、アプリの画面をデザインし、クラウド上のPostgreSQLデータベースをセットアップできます。この統合されたアプローチにより、強力なアプリ開発が誰にとっても身近なものになります。技術に詳しくないユーザーはLovableのガイドに頼ることができ、経験豊富な開発者は必要に応じてSupabaseの高度な機能を活用できます。
セットアップ不要のプロダクション対応バックエンド
SupabaseはFirebaseに代わるオープンソースの選択肢であり、リアルタイム機能、ユーザー認証、ファイルストレージ、サーバーレス関数を備えたホスト型のPostgreSQLデータベースを提供します。SupabaseをLovableアプリに接続することで、定型コードを書いたりサーバーを手動で設定したりすることなく、本番環境にすぐ使えるバックエンドを即座に手に入れられます。Supabaseの直感的なWebダッシュボードによりデータやユーザーの管理が容易になり、堅牢なSQL基盤のおかげでPostgreSQLデータベースの持つ性能とスケーラビリティをそのまま活用できます。
LovableのSupabase連携を使う理由
Lovableなら、フロントエンドのデザインとバックエンドのセットアップに別々のツールを使い分ける必要はありません。LovableのAIと対話するだけで、UIを構築しながら、その基盤となるデータベースやサーバー機能を自動的に作成できます。これにより、開発が速くなり、統合に伴う面倒も減ります。たとえば、Lovableに「ユーザーフィードバックフォームを追加して、回答をデータベースに保存して」と指示すると、LovableはフォームのUIを生成し、フィードバックを保存するSupabaseのテーブルをまとめてセットアップします。このシームレスなエンドツーエンド生成こそがLovableならではの強みであり、初心者でも複雑なアプリを構築でき、上級ユーザーはより速く作業を進められます。
主な機能
Supabase連携で利用できるようになる機能をご紹介します
データベース（PostgreSQL）
完全なSQLサポートで、アプリのデータを保存・クエリできます。Lovableはプロンプトに基づいて、必要なテーブルとスキーマを自動的に生成できます。
ユーザー認証
ユーザーのサインアップ、ログイン、アクセス制御を安全に管理できます。Lovableなら、シンプルなプロンプトで構築済みの認証フロー（メール/パスワードなど）をアプリに追加できます。
ファイルストレージ
Supabase Storageを使って画像やその他のファイルをアップロードし、配信できます。ユーザーのプロフィール写真やアップロード、アプリで扱うあらゆる静的メディアに最適です。
リアルタイム更新
Supabaseはリアルタイムのデータ変更をアプリにストリーミングできます。これにより、ライブチャットやアクティビティフィード、すべてのユーザーに即座に反映される共同編集ダッシュボードなどの機能を実現できます。
エッジ関数（サーバーレス）
Supabaseのインフラ上で、カスタムのバックエンドロジック（JavaScript/TypeScript）を実行できます。Lovableは、メール送信や決済処理、外部APIとの連携といったタスクのために、これらの関数を作成してデプロイします。
よくある質問
Supabase連携は具体的に何をしてくれるのですか？
それにより、Lovableアプリに完全マネージドなバックエンドが備わります。Supabaseがなくても、LovableはUIを構築できますが、データを保存したり、ユーザーをすぐに管理したりする場所がありません。Supabaseを接続すると、Lovableはユーザーアカウントの作成（認証）、データベースでのデータの保存・取得、ファイルのアップロード、サーバーサイドコードの実行などをすべて自動的に行えます。基本的に、Supabaseがアプリの背後でデータベースとサーバーを提供し、Lovableがプロンプトを通じてそれを動かします。
LovableとSupabaseで別々のアカウントが必要ですか？
はい。LovableとSupabaseは別々のプラットフォームです。Lovableのアカウントに加えて、（データベースをホストするための）Supabaseのアカウントが必要になります。嬉しいことに、どちらにも無料プランがあるため、費用をかけずに始められます。ただし、後でより多くの利用量や機能のためにアップグレードする場合は、各サービスの請求をそれぞれ個別に管理することになる点にご注意ください。
LovableとSupabaseはどうやって接続するのですか？
Lovableエディターで、連携セクションに移動します。「Supabaseに接続」をクリックし、認証の手順に従ってください。必要に応じて、Lovable内で新しいSupabaseプロジェクトを作成します。Lovableが必要なデータベーススキーマを自動的に生成し、プロジェクトに接続します。
Supabaseに接続したLovableアプリを外部の自動化ツールと連携できますか？
もちろんです。Lovable + Supabaseを使うと、データはSupabaseのデータベースに保存され、Supabaseはテーブル用に自動生成されるRESTful API（およびクライアントライブラリ）も提供します。つまり、Zapier、Make.com、その他のサービスを使って、HTTPリクエスト経由でアプリのバックエンドデータをやり取りできます。たとえば、ZapierでアプリのあるSupabaseテーブルからレコードを取得したり追加したりできます。さらに、Supabase Edge Functions（Lovableが作成を支援できます）を使ってカスタムAPIエンドポイントを作成し、より複雑なワークフローをトリガーすることもできます。要するに、サードパーティの自動化サービスとの連携は可能です。ただし、SupabaseのAPIキーやウェブフックに関して少し設定が必要になる場合があります。
アプリが成長したときに、Supabaseはどのくらいスケールできますか？
SupabaseはPostgreSQL上に構築されており、大量のデータと高いトラフィックを処理できます。標準の状態でも、無料のデータベースは十分なワークロード（数百万行、複数の接続）に対応できます。ニーズの拡大に応じて、Supabaseのプランをアップグレードすれば、より多くのストレージ、スループット、機能を利用できます。多くの本番アプリが完全にSupabase上で稼働しているため、安心して利用できます。ただし、無料プランの利用上限（Supabaseのサイトに記載されています）に注意し、その上限に近づいたらスケールアップする計画を立てておきましょう。
チャットやライブフィードのようなリアルタイム機能をアプリに追加するにはどうすればいいですか？
Supabaseにはデータベースに対するリアルタイムサブスクリプションが組み込まれています。つまり、アプリは特定のテーブルへの変更（挿入、更新、削除）を監視し、即座に反応できます。これを活用するには、いつものようにLovableアプリの機能を設計します（たとえば、messagesテーブルにメッセージを書き込むチャットルームなど）。LovableはSupabaseのリアルタイム機能を理解しているため、そのテーブルの変更を購読するようフロントエンドを設定できます。実際には、たとえばチャットメッセージ用のテーブルを作成した後、Lovableに「チャットのリアルタイム更新を有効にして」と指示すれば、内部でSupabaseのリアルタイムAPIが使われます。これにより、ユーザーは更新しなくても新しいメッセージがライブで表示されるようになります。これは、ライブ更新が役立つあらゆるシナリオ（コメント、通知、ダッシュボードなど）で機能します。
Supabaseストレージでのファイルアップロードに制限はありますか？
無料プランでは、Supabaseは1ファイルあたりのアップロードサイズを50MBに制限しています。これは画像、音声、短い動画など、ほとんどのユースケースをカバーします。より大きなファイル（長尺の動画や大規模なデータセットなど）を扱う必要がある場合は、有料プランにアップグレードすると、より大きなファイルや再開可能なアップロードに対応できます。また、プロジェクトごとに全体のストレージ容量の上限（保存できる合計GB数など）があり、上位プランほど増える点にもご注意ください。
Supabaseで認証を設定するにはどうすればいいですか？
Lovableが自動的に認証をセットアップしますが、次の操作が必要になる場合があります。Supabaseダッシュボード > 認証 に移動します。メールでのサインイン／サインアップを有効にします。ローカルでのテストを簡単にするために、メール確認を無効にします。
1つのSupabaseデータベースを複数のLovableプロジェクトで使えますか？
はい、できます。Lovableで複数のフロントエンドアプリを作成し、それらすべてを同じSupabaseプロジェクトに接続する（つまり同じデータベースと認証を共有する）ことができます。これは高度な構成ですが可能です。たとえば、メインアプリと管理ダッシュボードを別々のLovableプロジェクトとして作り、1つの共通データベースを使うといった具合です。各プロジェクトでSupabaseを接続する際は、同じSupabaseプロジェクトを選択してください。なお、それらのアプリはすべて同じデータを読み書きするため、それを踏まえて設計しましょう。
稼働中のアプリに影響を与えずにデータベースの変更をテストしたい場合はどうすればよいですか？
現時点では、各Lovableプロジェクトは1つのSupabaseプロジェクトに接続され、Lovableには組み込みのステージングモードはありません。安全に実験できる環境がほしい場合、SupabaseにはBranchingという機能があり、データベースの一時的なコピー（gitのブランチのようなもの）を作成して変更をテストできます。テスト用に、データベースのブランチまたは複製に別のLovableプロジェクトを接続することも可能です。一般的に、本格的なプロジェクトでは、稼働中のアプリにスキーマ変更を加える際は注意が必要です。バックアップを作成するかブランチを使い、準備ができたら変更をマージするとよいでしょう。Lovableの連携機能は進化しているため、今後のアップデートでよりシームレスなステージングワークフローが導入されるかもしれません。
SupabaseやLovableはカスタムSQLやデータベースロジックの記述を手助けしてくれますか？
はい。Supabaseのウェブインターフェースには、自然言語からSQLクエリを生成できるAI SQLアシスタントが含まれています。複雑なクエリが必要な場合や、SQLを書くのが苦手な場合は、SupabaseのSQLエディターでこのツールを試すことができます。Lovable側では、通常SQLを手書きする必要はまったくありません。AIがスキーマの作成やクエリのほとんどを代わりに処理します。ただし、上級ユーザーでカスタムな処理を行いたい場合は、LovableのGitHub連携を使ってコードを確認・編集したり、必要に応じてデータベースで生のSQLを実行したりすることもできます。
Lovableアプリで決済を処理するにはどうすればよいですか？
決済は、Supabase Edge Functionsと組み合わせて使えるStripeなどの連携機能で処理されます。たとえば、Lovableに「チェックアウトボタンを追加して、Stripeで決済を処理して」と指示できます。するとLovableは、StripeのAPIと通信するEdge Function（シークレットとして保存したStripeのシークレットキーを使用）を作成し、取引の詳細をSupabaseデータベースに保存する場合もあります。UIにはチェックアウト／支払いボタンが追加されるよう更新されます。基本的に、Supabaseが決済を実装するための環境（Edge Functions、データベース）を提供し、Lovableがそのコードのひな形を作成してくれます。詳しくは、Stripeの設定について解説しているLovableのドキュメントの「Stripe & Payments」連携ガイドも参照してください。
