前提

この記事では以下を前提としています。

• Supabase アカウントを作成済みであること
• Supabase CLI をインストール済みであること
• この記事では Edge Function で Resend を使ったメール送信を例にしますが、ここだけ他の処理に置き換えも同様の手順で実行できます。

この記事のゴール

この記事では、Supabase 内のusersテーブルに新しいレコードが追加された時に、その新しく追加されたレコードのemailカラムの値を使ってメールを送信できるようにします。
自分のサービスに新しいユーザーが新規登録された時に、そのユーザーにメールを自動送信するイメージです。 そのために Supabase の Edge Function を Webhook を利用します。 なお、この記事では Resend を使ったメール送信処理を例にしていますが、Supabase Edge Function でできることは Resend を使ったメール送信処理に限らず、自由な処理を実行できます。

作業の流れ

• Supabase のusersテーブルのレコードを受け取って、そのレコードのemailカラムの値を使ってメールを送信するための Edge Function を作成する
• Supabase Webhook でusersテーブルに新しいレコードが追加された時に、作成した Supabase Edge Function を実行するように設定する。

Supabase Edge Function を作成する

Webhook で実行するための Supabase Edge Function を作成します。
ここでは、Resend というメール配信サービスを使ってメールを送信する Edge Function としてresendという名前で作成します。

$ supabase functions new resend
Created new Function at supabase/functions/resend

usersテーブルからのレコードを受け取って、そのレコードに含まれるnameカラムとemailカラムの値を使ってメールを送信する Edge Function を作成します。 内容を以下のようにします。

import { serve } from 'https://deno.land/[email protected]/http/server.ts';
 
// Supabaseにセットしたシークレットを使用する
// シークレットの設定方法は後述
const RESEND_API_KEY = Deno.env.get('RESEND_API_KEY');
 
const handler = async (_request: Request): Promise<Response> => {
  // Supabase Edge Functionの呼び出し元から受け取る_requestをjsonに変換する
  // ここでは、_requestには新しく追加されたusersテーブルのレコードが含まれている想定です。
  const _requestBody = await _request.json();
 
  // _requestから新しく追加されたusersテーブルのレコードを取得する
  const { record } = _requestBody;
 
  // レコードからnameカラムの値を取得する
  const userName = record.name;
 
  // レコードからemailカラムの値を取得する
  const userEmail = record.email;
 
  const res = await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${RESEND_API_KEY}`,
    },
    body: JSON.stringify({
      from: 'resend edge function <[email protected]>',
      to: [userEmail],
      subject: '新規登録ありがとうございます。',
      html: `<h3>${userName} 様</h3></br> この度は新規登録ありがとうございます。`,
    }),
  });
 
  const data = await res.json();
 
  return new Response(JSON.stringify(data), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
};
 
serve(handler);

上記で重要なのは、後述する手順で Supabase の Webhook を設定してそこから上記の Supabase Edge Function を実行すると、上記の_requestには新しく追加されたusersテーブルのレコードが含まれており、そのレコードの値を使用することができます。 そして新しく追加されたusersテーブルのレコードは_requestのrecordプロパティに含まれています。 よって上記のコードでは_requestBodyからrecordプロパティを取得してrecordのnameカラムの値をuserNameに、recordのemailカラムの値をuserEmailに代入しています。

あとは取得したuserNameとuserEmailを使ってメールを送信するために、Resend の API を使ってメールを送信しています。もちろんここは各自自由な処理を記述できます。

あとは忘れずに以下でデプロイしておきます。

$ supabase functions deploy resend

なお、上記の Edge Function の中で Resend の API キー（RESEND_API_KEY）を使っていますが、これは Supabase のシークレットに設定済みである必要があります。 Supabase のシークレットについては以下の記事を参考にしてみてください。Resend を使ったメール送信処理についても以下の記事にて解説しています。

Supabase の Webhook を作成する

Supabase の Webhook を Supabase の管理画面から作成します。 Supabase にログイン後、以下のようにサイドバーにあるDatabase（データベースアイコンのメニュー）→Webhooksをクリックすると、Webhook の一覧画面に遷移します。

上記の Webhook の一覧画面にあるCreate Webhookボタンをクリックすると、以下のように Webhook の作成画面が開きます。 もしCreate WebhookボタンではなくEnable Webhooksボタンが表示されている場合はそれをクリックして Webhook を先に有効化してください。有効化するとCreate Webhookボタンが表示されます。

またさらに下にスクロールしていくと以下の項目もあります。

記事公開時点では、Webhook の作成時の入力項目は以下のようになっています。

• name: Webhook の名前
• Condition to fire webhook:
  • Table: Webhook の実行条件に使うテーブルを選択。ここではpublic.usersを選択します。（auth.usersではありません。）
  • Events: Webhook を実行条件とするイベントを選択。ここではINSERTを選択します。
• Webhook configuration: Webhook の タイプを選択。ここではSupabase Edge Functionsを選択。HTTP Reuquestを選択すれば好きな URL に HTTP リクエストを送信できます。
• Edge Function:
  • Method: http リクエストのメソッドを選択。ここではPOSTを選択します。
  • Select which edge function to trigger: 条件を満たした時に実行したい Supabase Edge Function を選択。ここでは前節で作成したresendを選択します。
  • Timeout: タイムアウト時間を設定。ここでは3000 (3 秒)を設定します。
• HTTP Headers: HTTP リクエストのヘッダーを設定。ここではAuthorizationヘッダーとその値Bearer eyJhwoe8034j....を設定します。ここの値は Supabase のanon publicキーです。

最後にCreate webhookボタンをクリックすると、Webhook が作成され、以下のように一覧の中に表示されます。

動作確認する

あとは Supabase の管理画面からusersテーブルに適当なレコードを新規作成したり、自身が作成しているアプリケーションからusersテーブルに新規レコードを追加してみてください。

まとめ

この記事では、usersテーブルに新しいレコードが追加された時に実行する Webhok を作成しましたが、同じように違うテーブルのレコードが新規追加されたり、新規追加ではなく更新されたり削除されたりした時に実行する Webhook を作成することもできます。 Supabase Edge Function を組み合わせれば、テーブルのレコードの変更に応じて、自由な処理を実行できるようになります。 OneSignal や Firebase を使ってプッシュ通知を送信することもできますし、Slack に通知を送信することもできます。