メインコンテンツにスキップ

Supabase 接続ガイド

Supabase を利用すると、開発経験がなくても簡単に Web サイトにバックエンドを構築できます。

Rosalia avatar
対応者:Rosalia
今週アップデートされました

概要

Supabase はオープンソースのバックエンド プラットフォームで、データの永続保存やバックエンド機能を提供します。MGX と Supabase を接続することで、ブラウザのメモリにのみ保存され、リフレッシュや閉じると失われるデータ問題を解決できます。統合により、MGX で作成した Web サイトを永続的ストレージと高度な機能を備えた本格的なアプリケーションに変換できます。

主な利点(開発経験不要以外の3つのメリット)

  • クイックセットアップ:数分でバックエンドを起動し、開発を加速。

  • 高いスケーラビリティ:ユーザー増加に対応し、制限なくプロジェクトを拡張可能。

  • 高コストパフォーマンス:小規模プロジェクトやスタートアップに最適な無料プランあり。

MGX と Supabase の接続方法

  1. 統合の開始

    • MGX プロジェクトのチャット画面を開きます。

    • 右上の Supabase タブから Connect Supabase ボタンをクリック。

    • 画面の案内に従って接続を開始。

  2. 認証とプロジェクト設定

    • ポップアップが表示され、Supabase アカウントへのログインを求められます。

    • ドロップダウンから組織を選択。

    • Authorize MGX をクリックしてアカウントを認証(数秒で完了、手動設定不要)。

    • 既存プロジェクトを選ぶか +Add New One で新規作成。

  3. 自動設定

    • MGX がデータベース構造・テーブル・セキュリティ設定を自動取得。

    • 「Supabase Connected」と表示されたら接続完了です。

ユーザー認証

Supabase Auth を使えば、アプリへの認証機能を簡単に追加できます。MGX は以下2種類をサポート:

  1. メール+パスワード

  2. Google ソーシャルログイン

メール+パスワード

  • 有効な Supabase アカウントを認証済みに。

  • チャットで「認証を追加」と入力。

  • Supabase Auth に接続されたログイン/登録ページが自動生成。

  • MGX 画面または Supabase ダッシュボード(Authentication → Users)でテストユーザーを作成。

Google ログイン

  • Supabase ダッシュボード → Authentication → Sign In/Up で Google を有効化。

  • Google Cloud Console で新規プロジェクトを作成し、OAuth 資格情報を取得。

  • チャットで「Google 認証を追加」と入力。

  • ログインページで動作をテストし、リダイレクトが正しく行われるか確認。

データ保存と同期

  • 保存したいデータをチャットで指示(例:「新しい旅行記録をデータベースに保存してください」)。

  • MGX が自動的に必要なデータベース構造を設定。

  • アプリでデータを追加して更新し、Supabase 上で同期を確認。

  • Supabase Table Editor で変更したデータもリアルタイムで MGX アプリに反映。

Edge Functions

Supabase Edge Functions はユーザーに近いサーバーノードで動作するサーバーレスのバックエンド機能です。

典型的な利用例:

  • 登録後に自動でウェルカムメール送信

  • フォーム送信時に AI API を呼び出し内容を解析

  • 決済時に Stripe など外部決済ゲートウェイを統合

  • 定期通知(メール/プッシュ)を自動送信

MGX は API キー管理を安全に実施:Add API Key ボタンからキーを入力すると Supabase に暗号化保存され、実行時に安全に注入されます。

バックエンド関数の追加とデプロイ

  1. チャットに要件を入力(例:「食品写真をアップロードするとカロリーを推定する Gemini API を呼び出す Web ページを生成して」)。

  2. 生成されたコード後に Add API Key でキーを入力。

  3. View in Edge Function をクリックして Supabase Edge Function ページでデプロイ。

よくある質問(FAQ)

  • MGX アプリに Supabase 機能を追加するには?

    右上の認証ボタンで Supabase を承認 → プロジェクト選択 → チャットで要件を共有。

  • Supabase はソーシャルログインをサポートしますか?

    はい。メール+パスワード、ワンタイムパスワード、Google/Twitter/GitHub、電話番号、SAML SSO、匿名ログインなど。

  • アプリごとに Supabase プロジェクトを作成する必要がありますか?

    必要に応じて既存プロジェクトを選択または新規作成。1つのチャットは1プロジェクトに接続可能。

  • Remix 後も接続は維持されますか?

    Remix 後は接続が切断され、再認証が必要です。他ユーザーが App World で共有した Supabase 接続アプリは Remix 不可。

  • 複数の MGX プロジェクトで1つの Supabase データベースを使用できますか?

    可能ですが、接続と設定を慎重に管理してください。

  • 組織リストにプロジェクトが表示されないのはなぜ?

    無料プランでは7日間アクティビティがないプロジェクトは自動停止されます。MGX の Organizations で Inactive フィルターを選択して確認してください。

  • 「The organization has been bound by another user」と表示された場合

    Supabase は1組織1 MGX アカウントの OAuth バインドを要求します。Supabase Dashboard → Settings → API → OAuth Apps で既存の MGX OAuth 許可を削除し、自分のアカウントで再接続してください。

こちらの回答で解決しましたか?