logo

コミュニティ

icon

Supabase

オープンソースの Firebase 代替。エンタープライズグレードのオープンソースツールを使用して Firebase の機能を構築しています。

template cover
展開済み2083 回
発行者zeaburZeabur
作成日2024-04-03
サービス
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
service icon
タグ
CMSDatabaseToolAPI

Supabase のデプロイ

Supabase は Firebase の人気なオープンソース代替です。Postgres データベース、認証、API、ファイルストレージなどのツール一式を提供し、堅牢なバックエンド基盤になります。

Zeabur はこの複雑なスタックのデプロイを簡素化します。Zeabur なら、Kong Gateway、Authentication、PostgreSQL を含むフル機能の Supabase インスタンスを、手動設定なしでワンクリックで立ち上げられます。

このチュートリアルで学べること

このチュートリアルでは、次の内容を案内します：

  1. Zeabur Marketplace から Supabase のサービススタックをデプロイする
  2. Kong Gateway 経由で Supabase Dashboard にアクセスする
  3. API キーを取得し、アプリケーションを接続する

⚠️ 重要な制限事項:

UI の Logs は利用不可: Supabase Studio の "Logs" 機能は動作しません（Vector サービスがないため）。各サービスのログは Zeabur ダッシュボードから確認してください。 MCP は非搭載: AI Model Context Protocol サーバーはこのテンプレートに含まれていません。

フェーズ 1: サービスのデプロイ

ステップ 1: Supabase サービスを作成する

Zeabur はテンプレートマーケットプレイスからの「ワンクリックデプロイ」を提供します。

オプション 1: Project ページから Supabase インスタンスを作成する

  1. Zeabur Dashboard にログインします。
  2. "Add Service" ボタンをクリックします。
  3. "Template"（Marketplace）を選択します。
  4. Supabase を検索します。
  5. Supabase テンプレートを選択します。PostgreSQL、minio、Kong などのサービスが直ちにデプロイされます。

ステップ 2: Supabase Dashboard にアクセスする（Kong Gateway）

単体の DB と違い、Zeabur 上の Supabase は Kong Gateway を使ってアクセスを管理します。UI にログインするために認証情報を取得する必要があります。

  1. プロジェクト内の Kong サービスパネルに移動します。
  2. ここで Supabase Username と Supabase Password を確認できます。
  3. Kong サービスパネルのサイドにある Domains を開き、表示される URL をクリックします。
  4. 手順 2 の認証情報で Supabase Dashboard にログインします。

kong.png

フェーズ 2: インスタンスの保護（重要）

⚠️ 警告: このテンプレートはデモ用のデフォルト API キーでデプロイされます。本番利用前に必ず新しいキーを生成してください。デフォルトキーが知られていると、誰でもあなたの DB にアクセスできてしまいます。

ステップ 1: 新しいキーを生成する

  1. Supabase JWT Generator にアクセスします。
  2. カスタム JWT_SECRET を作成し、ツールで次を生成します：
    • anon キー
    • service_role キー

ステップ 2: Kong の環境変数を更新する

  1. Zeabur の Kong サービスに戻ります。
  2. Variables タブを開きます。
  3. 次の値を新しいキーに更新します：
    • JWT_SECRET: カスタムの secret
    • ANON_KEY: 新しい anon キー
    • SERVICE_ROLE_KEY: 新しい service_role キー

ステップ 3: サービスを再起動する

セキュリティ変更を反映するために、スタック全体を再起動します：

  1. Project Settings → General に移動します。
  2. Batch Actions までスクロールします。
  3. Restart All をクリックします。

フェーズ 3: 設定（Auth とメール）

デフォルトでは、Supabase はメール（マジックリンク、パスワードリセットなど）を送信できません。SMTP プロバイダの設定が必要です。Resend を推奨しますが、任意の SMTP プロバイダが利用できます。

ステップ 1: SMTP（メール）を設定する

  1. Zeabur プロジェクトの Auth サービスに移動します。
  2. Variables タブを開き、次を追加します：
    • GOTRUE_SMTP_HOST: smtp.resend.com（または利用するプロバイダ）
    • GOTRUE_SMTP_PORT: 587
    • GOTRUE_SMTP_USER: resend（またはユーザー名）
    • GOTRUE_SMTP_PASS: re_123...（API Key）
    • GOTRUE_SMTP_ADMIN_EMAIL: [email protected]
    • GOTRUE_SITE_URL: https://your-project-domain.zeabur.app（ユーザーのリダイレクト先）
  3. 変更を反映するため Auth サービスを再起動 します。

ステップ 2: OAuth（Google/Apple）を設定する - 任意

Google ログインを有効にするには、Auth サービスに次を追加します：

  • GOTRUE_EXTERNAL_GOOGLE_ENABLED: true
  • GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: your-google-client-id
  • GOTRUE_EXTERNAL_GOOGLE_SECRET: your-google-secret
  • GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: https://your-project.zeabur.app/auth/v1/callback

注意: your-project.zeabur.app は実際のドメインに置き換えてください。

ステップ 3: メール機能をテストする（手動）

サービス再起動後、ターミナルから signup を手動で叩いて検証します：

curl -X POST "https://your-project.zeabur.app/auth/v1/signup" \
  -H "Content-Type: application/json" \
  -H "apikey: YOUR_ANON_KEY" \
  -d '{
    "email": "[email protected]",
    "password": "yourpassword"
  }'

期待される結果:

  • 200 OK の JSON レスポンスが返る
  • [email protected] に確認メールが届く（迷惑メールも確認）

メールのトラブルシューティング

  • Redirect URI Mismatch: GOTRUE_SITE_URL が実際のデプロイ済みドメインと完全一致しているか確認してください。
  • SPF/DKIM: カスタムドメインを使う場合、SMTP プロバイダの要件に合わせて DNS レコードを設定し、拒否を防いでください。
  • Delivery: 初期のメールは迷惑メールに入りやすいので、ドメインのウォームアップや「迷惑メールではない」設定をしてください。

フェーズ 4: Supabase に接続する

前提: API キーを取得する

重要: Supabase Studio のダッシュボードからキーをコピーしないでください。古いデフォルトキーが表示される場合があります。

  1. Zeabur の Kong サービス → Variables を開きます。
  2. ANON_KEY とドメイン URL をコピーします。

オプション 1: フロントエンド / アプリを接続する

用途: Lovable プロジェクトや通常の Web アプリ接続向け。

フロントエンドから Supabase バックエンドへ接続できるよう、コードベースに環境変数を設定します。

  1. プロジェクトルートの .env を作成または開きます。

  2. 前提手順で取得した値を追加します：

    VITE_SUPABASE_URL=[your-project-url]
VITE_SUPABASE_ANON_KEY=[your-anon-key]

オプション 2: DB スキーマを同期する（CLI）

用途: ローカルの DB 変更を本番インスタンスへ反映したい開発者向け。

接続文字列を使ってローカルの DB スキーマを Supabase に push できます。

  1. 接続文字列を取得: Zeabur ダッシュボードで Supabase スタック内の PostgreSQL サービスパネルを開きます。

  2. コピー: PostgreSQL の接続文字列をコピーします。

    PostgreSQL Connection String

  3. 実行: ターミナルで次を実行します（Supabase CLI が必要です）：

    supabase db push --db-url "[your-supabase-postgresql-connection-string]" --debug

フェーズ 4.5: アプリを接続する（サービス間）

Supabase と同じ Zeabur 上にアプリをデプロイする場合、デプロイ環境に認証情報を注入する必要があります。

手動で設定する方法

  1. Zeabur の App Service 設定を開きます。
  2. Configurable ボタンをクリック（または Variables タブを開く）します。
  3. 次の変数を追加します：
    • VITE_SUPABASE_URL: Project URL を貼り付ける
    • VITE_SUPABASE_ANON_KEY: anon 公開キーを貼り付ける

ヒント: .env のような認証情報ファイルは .gitignore に含めて、秘密情報の漏洩を防いでください。

フェーズ 5: 高度な設定（任意）

高度な機能を有効にするには、各サービスに次の変数を追加します。

1. 高度な Auth Hooks（Auth サービス）

特定イベントで Postgres 関数をトリガーするために、Auth サービスに次を追加します：

  • Custom Access Token Hook:
    • GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_ENABLED=true
    • GOTRUE_HOOK_CUSTOM_ACCESS_TOKEN_URI=pg-functions://postgres/public/custom_access_token_hook
  • MFA Verification Hook:
    • GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_ENABLED=true
    • GOTRUE_HOOK_MFA_VERIFICATION_ATTEMPT_URI=pg-functions://postgres/public/mfa_verification_attempt
  • Password Verification Hook:
    • GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_ENABLED=true
    • GOTRUE_HOOK_PASSWORD_VERIFICATION_ATTEMPT_URI=pg-functions://postgres/public/password_verification_attempt

2. Studio AI アシスタント（Studio サービス）

ダッシュボードの AI SQL アシスタントを有効にするには、Studio サービスに次を追加します：

  • OPENAI_API_KEY=your-openai-api-key

3. セキュリティ調整（Auth サービス）

  • GOTRUE_EXTERNAL_SKIP_NONCE_CHECK=true（モバイルの Google Sign In に有用）
  • GOTRUE_MAILER_SECURE_EMAIL_CHANGE_ENABLED=true（メールアドレス変更時に検証を強制）