SupabaseのEdge Functionsを使ってTwilio SendGridのメールを送信する方法

Twilio SendGridサポートエンジニアの菊田(@kikutaro_)です。Supabaseは、Firebaseの代替と呼ばれるオープンソースのプロダクトです。DBや認証などバックエンドの開発に必要な機能が一式揃っています。今回のブログでは、Supabaseが持つ機能の1つ「Edge Functions」を使って、SendGridのメールを送る方法を紹介します。

Supabase

今回試した環境は次のとおりです。

Windows 11 Pro
Rancher Desktop上のDebian 11（bullseye）
npm 9.6.7

Supabaseアカウントの作成

SupabaseにSign Upしてアカウントを取得したら、はじめにプロジェクトを作成します。

プロジェクト名、データベースのパスワード、Regionを指定して「Create new project」を押します。

プロジェクトの作成後に表示されるURLには参照用のプロジェクトIDが含まれています。
https://supabase.com/dashboard/project/abcdefghijklmnopqrstu/building

この場合は「abcdefghijklmnopqrstu」です。後ほど使うのでメモしておきましょう。

Supabase CLIの準備

ターミナルを開いて、npmでCLIをインストールします。

npm i supabase --save-dev

supabaseコマンドは頭にnpxを付けて実行します。

npx supabase -v
1.93.0

Edge Functionの作成

続いてEdge Functionを作成しましょう。sendgridという名称のfunctionを新たに作成します。

npx supabase functions new sendgrid

作成されたindex.tsを次のように書き換えます。宛先のto@example.comと送信元のfrom@example.comは、実際にご自身がお持ちのメールアドレスを指定してください。

import { serve } from "https://deno.land/std@0.196.0/http/server.ts";

const SG_API_KEY = Deno.env.get('SG_API_KEY')

const handler = async (_request: Request): Promise<Response> => {
  const res = await fetch("https://api.sendgrid.com/v3/mail/send", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + SG_API_KEY,
    },
    body: JSON.stringify({
      "personalizations": [
        {
          "to": [{"email": "to@example.com"}]
        }
      ],
      "from": {"email": "from@example.com"},
      "subject": "テスト",
      "content": [
        {
          "type": "text/plain",
          "value": "テスト"
        },
        {
          "type": "text/html",
          "value": "<html><head></head><body>テスト</body></html>"
        }
      ]
    }),
  });

  return new Response(res.body, {
    status: res.status,
    headers: {
      'Content-Type': 'application/json',
    },
  });
};

serve(handler);

次に環境変数のファイル（.env）を用意して、SendGridのAPIキーを定義します。APIキーの作成方法はこちらです。

SG_API_KEY=SG.xxxxxxxxxxxxxxxxxxxxxxxx

デプロイ

これで準備は整ったので、あとは環境変数のファイルをセットしてfunctionをデプロイするだけです。今回は動作確認を簡単に行うため、JWTによる認証を外す「--no-verify-jwt」オプションを付けてデプロイします。

npx supabase secrets set --env-file .env --project-ref abcdefghijklmnopqrstu
npx supabase functions deploy sendgrid --project-ref abcdefghijklmnopqrstu --no-verify-jwt

次のような表示が出ればデプロイ成功です。

Version 1.30.3 is already installed
Bundling sendgrid
Deploying sendgrid (script size: 22.79kB)
Deployed Function sendgrid on project abcdefghijklmnopqrstu
You can inspect your deployment in the Dashboard: https://supabase.com/dashboard/project/abcdefghijklmnopqrstu/functions/sendgrid/details

それでは、デプロイされたFunctionを呼び出してメール送信を行ってみましょう。curlコマンドでsendgrid functionを呼び出します。

curl -I -X POST 'https://sdfdiepotzslqwgpxqtd.supabase.co/functions/v1/sendgrid'

202の応答（リクエスト受付）が返りました。

HTTP/2 202 
date: Wed, 13 Sep 2023 05:46:24 GMT
content-type: application/json
cf-ray: 805e16e488c6afbe-NRT
cf-cache-status: DYNAMIC
strict-transport-security: max-age=2592000; includeSubDomains
vary: Accept-Encoding
x-sb-edge-region: ap-northeast-1
x-served-by: supabase-edge-runtime
server: cloudflare
alt-svc: h3=":443"; ma=86400

実際に宛先をみてみると…メールが届いています！

届いたメール