ユニファ開発者ブログ

ユニファ株式会社プロダクトデベロップメント本部メンバーによるブログです。

SupabaseとResendを使ったメール送信の設定方法を紹介

こんにちは、サーバーサイドエンジニアの小川です。

この記事では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を使ったメール送信の設定方法について解説しました。 思いの外サクッと実現できたので、ご興味がありましたら試してみてはいかがでしょうか。

ユニファでは、一緒に働く仲間を募集しています!

unifa-e.com