Supabaseとは06：社内備品管理アプリに自動メール送信機能追加！Edge Function機能も使いこなそう。

Supabase（スーパーベース・スパベース）の使い方6回目となります。

今回はこれまで作成してきたWebアプリに、自動メール送信機能を搭載します。

ここで、Edge Function（エッジファンクション）という機能を使います。

Edge Function使うと、またできることが色々広がるんだよね～

くまみ

あら、なにそれ？教えて！

なお前回までの記事を見ていない方は、まずはこちらをチェックしておいてくださいね。

Supabaseの使い方講座

「supabaseの使い方」の記事一覧です。

SupabaseのEdge Functionとは
SupabaseのEdge Functionを試してみよう
社内備品管理アプリに自動メール送信機能追加
さいごに

SupabaseのEdge Functionとは

SupabaseのEdge Functionとは、AWSのLambdaと同じようなサーバーレス関数です。

フロントエンド(React等)だけでは難しい処理、例えば「外部のAPIを呼ぶ」「画像をリサイズしてから保存」「定期的に自動処理を実行」などサーバー側で実行できます。

Laravelユーザーの皆様なら、Laravelのサーバーサイド（バックエンド側）処理を実装できると考えると分かりやすいかもしれません。

ChatGPTと会話する機能を埋め込むとか、色々できるよ。

くまみ

あら、夢広がるわー

今回は、前回までで作成した社内備品管理システムに、「新たな備品登録時に管理者にメール送信する」機能を搭載してみましょう。

くまみ

自動メール送信機能って、実用的ね。

とりあえず、ここから試してみよう。

SupabaseのEdge Functionを試してみよう

まずは簡単にテストでEdge Functionを使ってみましょう。

Supabaseプロジェクトにログインします。サイドバーメニューから「Edge Function」を選択します。

「Deploy a new function」をクリック。そこから、一番上の「Via Editor」を選びます。

*Via Editorを使うと、Supabase上でコードを書けます。その下の「Via CLI」を使うと、ローカル環境で開発できます（Via CLIは今回は割愛します）。

コードを書く画面になります。Templateをクリックすると、Templateコードをみれます。

とりあえずそのまま、適当な名前をつけ、右下の「Deploy function」クリックします。

右上の「Test」をクリックすると、その場でテストできます。

デフォルトのコードは、単に「Hello Functions」と表示されるだけのものです。

かなりシンプルだけど、一応動かす実験ができるよ。

くまみ

テストが簡単にできるのは嬉しいわね。

社内備品管理アプリに自動メール送信機能追加

ではここからはいよいよ、社内備品管理アプリに自動メール送信機能を搭載します。

Supabase側の設定

再びSupabase/Edge Functionsより、「Deploy a new function」をクリックし、「Via Editor」を選択します。

次のようにコードをいれます。[email-notification]という名前で保存します。

【コード内容】

import "jsr:@supabase/functions-js/edge-runtime.d.ts";

// 環境変数（Edge Function の Settings で設定する）
const RESEND_API_KEY = Deno.env.get("RESEND_API_KEY")!;
const ADMIN_EMAIL = Deno.env.get("ADMIN_EMAIL")!;
const FROM_EMAIL = Deno.env.get("FROM_EMAIL") || "noreply@example.com";

// CORS（テスト用なので全部許可）
const cors = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

Deno.serve(async (req) => {
  // CORS preflight
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: cors });
  }

  // リクエスト JSON を取得
  const body = await req.json();

  // Resend へメール送信
  const resendRes = await fetch("https://api.resend.com/emails", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${RESEND_API_KEY}`,
    },
    body: JSON.stringify({
      from: FROM_EMAIL,
      to: ADMIN_EMAIL,
      subject: `【備品登録】${body.equipmentName}`,
      html: `
        <p>備品名: ${body.equipmentName}</p>
        <p>個数: ${body.equipmentNumber}</p>
        <p>登録者: ${body.registeredBy}</p>
      `,
    }),
  });

  const data = await resendRes.json();

  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json", ...cors },
  });
});

import "jsr:@supabase/functions-js/edge-runtime.d.ts";

// 環境変数（Edge Function の Settings で設定する）

const RESEND_API_KEY = Deno.env.get("RESEND_API_KEY")!;

const ADMIN_EMAIL = Deno.env.get("ADMIN_EMAIL")!;

const FROM_EMAIL = Deno.env.get("FROM_EMAIL") || "noreply@example.com";

// CORS（テスト用なので全部許可）

const cors = {

"Access-Control-Allow-Origin": "*",

"Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",

};

Deno.serve(async (req) => {

// CORS preflight

if (req.method === "OPTIONS") {

return new Response("ok", { headers: cors });

}

// リクエスト JSON を取得

const body = await req.json();

// Resend へメール送信

const resendRes = await fetch("https://api.resend.com/emails", {

method: "POST",

headers: {

"Content-Type": "application/json",

Authorization: `Bearer ${RESEND_API_KEY}`,

body: JSON.stringify({

from: FROM_EMAIL,

to: ADMIN_EMAIL,

subject: `【備品登録】${body.equipmentName}`,

html: `

備品名: ${body.equipmentName}

個数: ${body.equipmentNumber}

登録者: ${body.registeredBy}

}),

});

const data = await resendRes.json();

return new Response(JSON.stringify(data), {

headers: { "Content-Type": "application/json", ...cors },

});

コードの意味は次の通りです。

環境変数からResendのAPIキーと送信先・送信元メールアドレスを取得
CORS設定でブラウザからのアクセスを許可
リクエストのJSONから備品情報（備品名、個数、登録者）を受け取る
Resend APIを使ってHTMLメールを送信
送信結果をJSON形式で返す

※ 今回はテスト用なので、CORS設定を "*"（全許可）にしています。本番環境では特定のドメインのみ許可するよう変更してください。

RESENDへユーザー登録

上記コードでは、３つの変数を使っています。

それぞれ登録します。その前に、今回の実験では、「RESEND」というサービスを使ってメールの送受信を行います。あらかじめRESENDでユーザー登録を行っておきましょう。

Resend · Email for developers

The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.

登録後、最初に表示される画面で「Add an API Key」ボタンがでてきます。ボタンをクリックしてAPIキーをコピペします。

Supabaseへ変数の登録

SupabaseのEdge Functionsメニューに戻ります。Secretsメニューを選択します。

３つの変数を登録します。

RESEND_API_KEY : RESENDでコピーしたAPIキー
ADMIN_EMAIL : 今回はRESEND登録用に使ったメールアドレス
FROM_EMAIL : onboarding@resend.dev

*手軽にテストが行えるよう、FROM欄には、RESENDのテスト用アドレスを使用します。こちらは、ドメイン未登録時の開発用として利用できます。

Webアプリ側に手を加える

Webアプリ側にも手を加える必要があります。備品登録時の処理に、下記のようなコードを加えます。

        // 管理者にメール通知を送信
        const { error: emailError } = await supabase.functions.invoke('email-notification', {
          body: {
            equipmentName: name,
            equipmentNumber: number,
            registeredBy: session.user.email,
          },
        });

        if (emailError) {
          console.error('メール送信エラー:', emailError);
          // メール送信失敗しても登録自体は成功しているので、警告のみ
        }