こんにちは、サーバーサイドエンジニアの小川です。
この記事ではSupabaseとResendを使ったメール送信の設定方法について解説します。
趣味で開発しているアプリケーションで、DBやAuthenticationなどはSupabaseを利用しています。
元々はFirebaseを使っていたのですが、Supabaseの場合はDBにPostgresが使えるという点が魅力で乗り換えました。
ただ、Supabase Authenticationを使ったメール認証やパスワードリセットなどでメール送信するにあたり、カスタムSMTPの設定が必要でした。
設定しない場合1時間に6通までしか送信できないので、実運用は難しいです。
(どうやら、Supabaseのメールシステムをスパムとして利用するユーザーへの対策として上限を設けているようです)
では、早速本題に入ります。
前提
- 何らかのサービスでドメイン取得済み
- Resendのアカウント作成済み
- Supabaseでプロジェクト作成済み
今回はSupabaseとResendのサービス内容についての詳細な説明と、ドメイン取得方法については割愛します。
※参考
Supabase:https://supabase.com
Resend:https://resend.com/about
手順
Resend
1.ドメインを追加
サイドメニューのDomainsからAdd Domainsを選択し、取得したDomainとRegionを設定。
(Freeプランでは、RegionはNorth Virginia (us-east-1)のみ選択可能)

追加すると、DNS Recordsが表示されます。

その内容を、ドメイン管理サービスで設定します。
(今回はCloudflareでドメインを管理しているので、↓のように設定しました)

その後、Resendの画面に戻り、Verify DNS Recordsをクリックし、設定が正しくできていれば数分でステータスがVerifiedになるので、それまで待ちます。

2.API キーを作成
サイドメニューからAPI Keysを選択後、Create API Keyをクリックします

- Name:任意
- Permission:Sending access
- Domain: Resendで設定した内容が表示されるので選択
上記の情報を入力後Addを押すと、API Keyが表示されます。 一度しか表示されず、後から再確認できないのでメモしておくことをオススメします。
(忘れた場合は、作り直せば問題ないです)
Supabase
3.SMTPの設定
最後に、SupabaseからSMTPの設定をします。
サイドメニューのProject SettingsからAuthenticationを選択し、Enable Custom SMTPをONにします。
その後、SMTP Settingsメニュー内の項目を記入します。
- Sender email: Resend で設定したメールアドレス
- Sender name: 任意(メール送信時、送信者名として表示)
- Host:
smtp.resend.com - Port number:
465 - Minium interval between emails being sent: 任意(送信されるメールの最小間隔を秒数で指定)
- Username:
resend - Password: 事前に作成したResendのAPIキー

最後に、実際にメールが届くか検証してみましょう。
サイドメニューのAuthenticationからAdd Userをクリックし、Send invitationを選択します。
その後、任意のメールアドレスを入力し、メールが届けば完了です。

今回は、SupabaseとResendを使ったメール送信の設定方法について解説しました。 思いの外サクッと実現できたので、ご興味がありましたら試してみてはいかがでしょうか。
ユニファでは、一緒に働く仲間を募集しています!