メール送信機能の構築

現在Flutterでアプリケーションを作成しています。
データべースの更新に応じて、メールを送信する機能を構築してみたい、と思ったのでやってみました。
データベースはSupabaseを用いています。

メールサーバーといった小難しい話になるのかと最初思いましたが、
Resendを使ってしまえば、すぐにできることがわかりました。
今回Resendは深く記載しませんが、
この場ではメール送信機能の構築でも役立つサービス、とさせていただきます。

読んでいただく前に

本記事について、以下のご経験があればスムーズに作業可能かと思います。

クラウドサービスのサーバレス開発
APIキーを用いることで動作するプログラムの作成

Edge Functions経由でメール送信

メール送信機能を作成する際、上記のリンクの内容を参考にしました。
参考にしました、というより、ほとんどそのままですかね。

SupabaseにはEdge Functionsというサービスがあります。
AWSのLambda Functionsを同じようにサーバーレスで処理を構築できます。
この処理で、ResendのAPIを呼び出してメール送信を実施します。

警告
先に断っておきますが、今回はドメインの設定をしない状態で作業をしています。

ドメインを登録しない状態でもメール送信は可能ですが、
Resendに登録したアドレス以外には送信できないので、注意いただきたいです。

{
  "statusCode": 403,
  "message": "You can only send testing emails to your own email address (xxxxx@gmail.com). To send emails to other recipients, please verify a domain at resend.com/domains, and change the `from` address to an email using this domain.",
  "name": "validation_error"
}

Resendに登録したメールアドレス以外に対してメール送信しようとした場合、Edge Functionsのレスポンスが上記のようになります。
（xxxxx@gmail.comがResendに登録したメールアドレス）

メール送信だけならすぐ構築できてしまう

公式ドキュメント通りやれば、メール送信自体はすぐに（30分前後）終わってしまいます。作業は以下くらいです。

Resend APIの取得（アカウント作成後）
Edge Functionsを作成
関数を実行

Resend APIの取得

アカウント作成は完了した前提で進めます。
マネジメントコンソールから、のAPI KeysからCreate API Keyをクリックします。

メール送信のみ実施できればOKなので、
PermissionはSending accessにしておきます。

これで作成が完了したので、値をコピーしておいてください。
Edge Functionsを作成する際に使用します。

Edge Functionsを作成

以下リンクのセクションに記載されたコードを使います。

    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: 'onboarding@resend.dev',
     to: 'xxxxx@gmail.com',
      subject: 'hello world',
      html: '<strong>it works!</strong>'
    })
  });

ここでの主な作業は2つです。

xxxxx@gmail.comの部分はResendに登録した際のアドレスに変更
RESEND_API_KEYについてsecretセクションから値を設定
- Key：RESEND_API_KEY
- Value：Resendのコンソールで作成したAPI Keyの値

ターミナルから関数を直接実行してメール送信する、といったことは実際にはない
ので、もう少し現実に近い形を作っていきます。

以下2つに取り組んでみます。

DBテーブルの挿入・更新をトリガーにメール送信
cronを用いて、特定のパターンでメール送信

DBテーブルの挿入・更新をトリガーにメール送信

以下作業を行います。

DBテーブルを作成
WebHooksを作成

DBテーブルを作成

なんでもいいので、簡単なテーブルを作成します。

CREATE TABLE IF NOT EXISTS sample (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL
);

WebHooksを作成

テーブルのデータ挿入・更新時に、Edge Functionsを実行するように設定します。

ダッシュボードのIntegrationsから、WebHookを作成します。（プロジェクトで有効化されていない場合は、有効化を実施してから）

設定作業1

Table：先ほど作成したテーブル名を選択
Events：データがINSERTされた場合にメール送信（一番上のみチェック）

設定作業2

Webhook configuration：Edge Functionsを選択
Edge Function：先ほど作成した関数を選択
HTTP Headers：以下画像のプルダウンで、上を選択

これでsampleテーブルにデータを投入してみてください。

メールが届きました！成功です。

あとは利用している言語に応じて、Supabaseのレコード追加をする実装を加えれば、
コードを通じて、メール通知まで実装ができるようになります。

続いてcronを用いた方をすすめていきます。

cronを用いて、特定のパターンでメール送信

上記のページの内容を参考にしています。
cronを定義し、Edge Functionsと紐づけます。

DashBoardのIntegrationsのページから設定します。

プロジェクトで利用できる状態にするため、Enable pg_cronをクリックして有効化をします。

Jobタブを表示して、Job作成に進みます。
以降は、公式ドキュメントの画像通りです。

赤枠で囲った箇所をクリックすると、自動でcronの設定が更新されます。
ありがたいですね。

ここで、メールを送信する処理を記載したEdge Functionsを選択します。
Header情報の設定は、データベースの挿入をトリガーにしたときと同じです。
これでメールを特定の時間や曜日に送信する機能を作ることができました！

作成したJob画面から、次いつ実行されるか確認できるので、その時間が過ぎたらメール送信できているか確認します。
受信を確認できたら成功です。

まとめと今後

SupabaseとResendを用いたメール送信機能の構築を実施してみました。

今回はSupabaseを用いましたが、コードからわかる通り、ResendのAPIキーさえあれば、
Vercelなどにデプロイしたアプリケーションからも簡単に実現することができます。

今後の作業として、
ドメインを設定し、Resendで登録したメールアドレス以外にも送信できるように進めていきたいと思います。