はじめに

supabaseを使ってサーバーレスのシステムを構築する場合、supabaseが提供する様々な機能を、開発段階中ならほぼほぼ無料で使うことができます。

Supabaseは、オープンソースのFirebaseの代替として設計されたバックエンド・アズ・ア・サービス（BaaS）プラットフォームです。Supabaseは、リアルタイムのデータベース、認証、ストレージ、サーバーレス機能を提供し、開発者が迅速に完全なアプリケーションを構築するのを支援します。

ただしフリープランでの利用範囲には制限があり、特にAuthを使ってEmail認証を実装する場合には開発段階中でも厳しい制限があります。

Supabaseのbuilt-inで利用できるSMTPサーバーは、１時間以内に３通まで、１日30通までという制約があります。

上記の条件であれば、開発段階中でも頻繁にロックがかかってしまったり、運用を始める際にもどのみち対応する必要があります。

そこで、Sendgridを利用して独自のSMTPサーバーを設定することで快適な開発環境、運用準備を始めようというのが本記事の趣旨となります。

Supabase側の設定

Supabaseのプロジェクトの作成やプログラムとの接続はすでにできている前提とします。

SupabaseのダッシュボードのAuthentication>SMTP Settingsを開きます

Enable Cutom SMTPというスイッチがありますので、こちらをオンにします(defaultはオフ)

続いて以下の項目を設定するフォームがでてくるので、内容を設定します。

★Sender email
Sender name
★Host
★Port number
Minimum interval between emails being sent
★Username
★Password

星印がついている部分は全てSend Gridの情報を設定する必要がありますので、この画面は開いた状態で一旦次に進みます。

Send Gridのアカウント作成の設定

Send Gridのアカウントを作成します
https://sendgrid.kke.co.jp/

Send Gridは基本的に企業での利用を推奨しています。

TwillioのアカウントからSend Gridの機能を使う方法もあるようですが、私の場合はなぜか利用ができませんでしたので、上記から申込みを行いました。

Send Gridのほうからアカウント解説のメールが届いたらダッシュボードへのログインが可能になります。

Send GridのAPIキーの取得

アカウント開設時のメールに記載されているアカウントIDと、申込時に設定したパスワードを入力してダッシュボードにアクセスします。

左のメニューバー>API Keys>Create API Keyをクリックします。

API Key Nameはなんでもいいですが、結合するプロジェクトのものと明確にわかる命名が良いです。

続いてPermissionsはRestricted Accessとしておきます。

Access Detailsの項目から、Mail Sendの項目を有効化します。

Create & Viewをクリックすると、API Keyが作成されます。

このKeyはセキュリティ上の理由から再び表示することができないため、確実にコピーをしておきます。

APIキーが作成されたら、次は左のメニューバーのEmail API > Integration Guide > SMTP Relayをクリックします。

このように、設定すべきホスト名やポート番号が表示されますので、これをSupabase側に設定します。

さいごに

ここまで終了したら、プロジェクトに戻り、ログインやサインアップなどの操作をしてみましょう。

これまでbuilt-inから送信されていた認証用のメールが、SendGridで設定したSMTPサーバーから届くようになっているのが確認できると思います。

また、SMTPサーバーをSendGridに変更したにも関わらず１時間３通までの制限が解除されない、という場合はSupabase側での設定を見直す必要があります。

少しだけわかりにくいページにあるため見落としがちなポイントになります。

Anthentication > Rate Limitという項目にRate limit for sending emailsという項目がありますので、こちらの数値を変更することで一時間あたりの送信可能回数の設定が可能です。

私はSendGridのリミットと合わせて100に設定しました。