メール送信機能の構築
現在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の値
- 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で登録したメールアドレス以外にも送信できるように進めていきたいと思います。