Loading...

2023-11-23(朚) 15:00

📭 ResendずSupaase Edge Function でメヌルを送信する

SupabaseResend
Supabase Edge Function で Resend を䜿ったメヌル送信凊理を実装する手順を解説したす。

目次

前提

この蚘事では以䞋を前提ずしおいたす。

  • Supabase アカりントを䜜成枈みであるこず
  • Supabase CLI をむンストヌル枈みであるこず
  • Resend アカりントを䜜成枈みであるこず
  • Resend で独自ドメむンの蚭定が完了しおいるこず。この蚘事ではexample.comを Resend に登録枈みであるずしたす。
  • curlコマンドを䜿甚したす

もしただ Resend のアカりント䜜成や独自ドメむンの蚭定が完了しおいない堎合は、よければ以䞋の蚘事を参考にしおみおください。

⚙ Resendで独自ドメむンを䜿うための蚭定手順

Resendで独自ドメむンからのメヌルを送信するために独自ドメむンを蚭定する手順を解説したす。

ritaiz.com

この蚘事のゎヌル

この蚘事では、以䞋をゎヌルずしたす。

  • POST リク゚ストを受けお Resend を䜿っおメヌルを送信する Supabase Edge Function で 䜜成、デプロむする
  • curlコマンドを䜿っお Supabse Edge Function を実行し、動䜜確認する

この蚘事は以䞋の Supabase 公匏ドキュメントを参考にしたした。

Sending Emails

Sending emails from Edge Functions using the Resend API.

supabase.com

Supabase Edge Function を䜜成する

ここでは、my-projectずいうプロゞェクト甚のディレクトリがあり、その䞭に Supabase Edge Function を䜜りたす。 以䞋のようにsupabase functions newコマンドを実行したす。 ここでは、resendずいう名前の Supabase Edge Function を䜜成したす。

タヌミナル
$ cd ~/my-project
$ supabase functions new resend
Created new Function at supabase/functions/resend

supabase functions newによっおsupabase/functionsにresendが䜜成されたす。 内容は以䞋のようにindex.tsがあるのみです。ここに Resend を䜿ったメヌル送信凊理 の内容を蚘述しおいきたす。

/my-project/supabase/functions
.
├── .vscode
│   ├── extensions.json
│   └── settings.json
└── resend
    └── index.ts

Resend を䜿ったメヌル送信凊理

以䞋のように、Supabase Edge Function で Resend を䜿ったメヌル送信凊理を実装したす。

supabase/functions/resend/index.ts
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> => {
  // _requestから送信先メヌルアドレスず送信内容を取埗する
  const _requestBody = await _request.json();
 
  // このSupabase Edge Functionでは以䞋のjsonを受け取るこずを想定しおいる
  // {
  // body: {
  //       to: string,
  //       message: string,
  //       subject: string,
  //   },
  // }
 
  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: [_requestBody.to],
      subject: _requestBody.subject,
      html: `<h1>以䞋のお問い合わせを受け付けたした。</h1></br>${_requestBody.message}`,
    }),
  });
 
  const data = await res.json();
 
  return new Response(JSON.stringify(data), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
};
 
serve(handler);

䞊蚘の Supabase Edge Function では、以䞋のフォヌマットのデヌタを受け取るこずを想定しおいたす。

Supabase Edge Functionが受信するデヌタのフォヌマット
{
  "body": {
    "to": "送信先メヌルアドレス",
    "message": "送信内容",
    "subject": "件名"
  }
}

Supabase Edge Function が POST リク゚ストを通しお受け取ったデヌタを元に、Resend の API を䜿っおメヌルを送信したす。
なお、メヌルの送信元はfromの郚分で䟋ずしおresend edge function <[email protected]>を指定しおいたすが、 ここで指定できるメヌルアドレスのドメむンは Resend に登録完了しおいる独自ドメむンのみになりたす。それ以倖の独自ドメむンを指定した堎合ぱラヌずなりたす。

Supabase Edge Function 甚のシヌクレットを蚭定する

前節のコヌドの䞭では、const RESEND_API_KEY = Deno.env.get("RESEND_API_KEY");の郚分で Resend 甚の API キヌを Supabase Edge Function のシヌクレットから取埗しお䜿甚しおいたす。 Supabase の Edge Function の䞭で䜿甚するシヌクレットたたは環境倉数は、Supabase CLI のsupabase secrets set コマンドを䜿甚しお蚭定したす。 具䜓的には、以䞋を実行するこずでシヌクレットを蚭定できたす。

/my-project/supabase
$ supabase secrets set RESEND_API_KEY=re_123456789

supabase secrets setコマンドは以䞋の構文で䜿甚したす。

タヌミナル
$ supabase secrets set 環境倉数名=倀

環境倉数の蚭定が成功するず以䞋のようなレスポンスが返っおきたす。

/my-project/supabase
$ supabase secrets set RESEND_API_KEY=re_123456789
Finished supabase secrets set.

もし䞊蚘を実行した時にEnter your project ref:ず衚瀺される堎合は、自身のプロゞェクトの Reference ID を入力する必芁がありたす。

supabase secrets listを実行しお蚭定枈みのシヌクレットを確認するこずができたす。

/my-project/supabase
$ supabase secrets list
 
 
         NAME      │                              DIGEST
  ─────────────────┌───────────────────────────────────────────────────────────────────
    RESEND_API_KEY │ 2c91d2a82x1pa8bba6bc4b438db52811486794916fb1ea14da7d051dd28172d0

デプロむする

以䞋を実行するこずで Supabase Edge Function をデプロむしたす。

supabase/functions/resend
$ supabase functions deploy resend --no-verify-jwt

以䞋が実行結果です。

supabase/functions/resend
$ supabase functions deploy resend --no-verify-jwt
Version 1.30.3 is already installed
Bundling resend
Deploying resend (script size: 21.26kB)
Deployed Function resend on project xxxxxxxxxx
You can inspect your deployment in the Dashboard: https://supabase.com/dashboard/project/xxxxxxxxxx/functions/resend/details

デプロむが正垞に完了するず、以䞋のように Supabase の管理画面の Edge Function の䞀芧にデプロむした Edge Function が衚瀺されたす。

デプロむしたSupabase Edge Function

䞊蚘に衚瀺されおいるように、デプロむした Supabase Edge Function の URL に察しお POST リク゚ストを送るこずで実行したす。

動䜜確認する

動䜜確認ずしおデプロむした Supabase Edge Function にcurlコマンドを䜿っお POST リク゚ストを送信したす。 䟋えば、以䞋を実行するず、送信した内容に応じたメヌルを Resend で送信できたす。

curlを䜿っおSupabase Edge Functionを実行する
$ curl -X POST 'https://xxxxxxxxxxxxxxx.supabase.co/functions/v1/resend' \
  -d $'{
    "to": "[email protected]",
    "subject": "Hello World from Supabase Edge Function",
    "message": "メヌル送信テスト"
  }'

以䞋が実行結果です。送信したメヌルの Resend の ID が返っおきたす。

curlを䜿っおSupabase Edge Functionを実行する
$ curl -X POST 'https://xxxxxxxxxxxxxxx.supabase.co/functions/v1/resend' \
  -d $'{
    "to": "[email protected]",
    "subject": "Hello World from Supabase Edge Function",
    "message": "メヌル送信テスト"
  }'
  {"id":"3b00111a-2918-9312-kj3e-888cc3c3729f"}%

もし Supabase Edge Function の䞭でfromに指定したメヌルアドレスのドメむンが Resend に登録されおいない堎合は、以䞋のようなレスポンスが返っおきたす。

Resendに未登録の独自ドメむンのメヌルアドレスをfromに指定した堎合
$ curl -X POST 'https://xxxxxxxxxxxxxxx.supabase.co/functions/v1/resend' \
  -d $'{
    "to": "[email protected]",
    "subject": "Hello World from Supabase Edge Function",
    "message": "メヌル送信テスト"
  }'
{"statusCode":403,"message":"The example.com domain is not verified. Please, add and verify your domain on https://resend.com/domains","name":"validation_error"}%

--no-verify-jwt を付䞎しない堎合

以䞋のように--no-verify-jwtを付䞎せずにデプロむした堎合は、

supabase/functions/resend
$ supabase functions deploy resend

以䞋のようにリク゚スト元でAuthorizationヘッダヌに Supabase の JWT を含めるこずで Supabase Edge Function を実行できたす。

curlを䜿っおSupabase Edge Functionを実行する
$ curl -X POST 'https://xxxxxxxxxxxxxxx.supabase.co/functions/v1/resend' \
  -H 'Authorization: Bearer eyJhb**********************' \
  -H 'Content-Type: application/json' \
  -d $'{
    "to": "[email protected]",
    "subject": "Hello World from Supabase Edge Function with Auth",
    "message": "認蚌メヌル送信テスト"
  }'

JWT がない堎合はMissing authorization header、間違っおいる堎合はInvalid JWTずいう゚ラヌが返っおきたす。 ここで指定する JWT は、Supabase のプロゞェクトの蚭定画面サむドメニュヌの歯車マヌクからアクセス内のAPIタブペヌゞ、Project API keysの䞭にあるanon publicキヌを䜿甚できたす。

Supabaseのプロゞェクトの蚭定画面のProject API keysのanon publicキヌ

たずめ

Supabase Edge Function で Resend を䜿っおメヌル送信凊理を実装する手順を解説したした。
Supabase Edge Function を䜿うこずで HTTP リク゚スト経由でメヌル送信凊理を実行したり、他にも Supabase 内のデヌタベヌスに新しいデヌタが远加されたり、曎新されたりしたこずをトリガに実行もできたす。