はじめに

私はとあるWebサイトをNext.js × Vercelで運用しているのですが、
関係各所とやりとりをする機会も増えてきため、独自ドメインのメールアドレスを作成したく、作業に取り掛かりました。

...が、結構てこずったので備忘も兼ねて本記事を残します。

本記事では、Vercelにホストした独自ドメインでメールアドレスを作成し、メールアプリで利用できるようにするまでを記載します。

なお、Vercelはホスティングサービスであり、メールサービスを提供していないため、別途メールサーバーを立てる必要があります。
参考：https://vercel.com/guides/using-email-with-your-vercel-domain

利用サービス

前提

Next.jsで作成したアプリをVercelでデプロイ済みであること
独自ドメインを取得済みであること

作業の流れ

作業時間

設定作業：30分~1時間
動作確認が可能になるまで：数時間～2日程度

1.さくらのメールボックスでメールサーバーを契約

VerecelにはいくつかのメールサーバのDNSプリセットが用意されているのですが、今回は費用や容量の観点からプリセットにはない「さくらのメールボックス」を採用しました。
※約88円/月 (36ヶ月一括払い)

※さくらのメールボックスのサービス内容についてはさくらのメールボックスを参照してください。

まず、さくらのレンタルサーバからさくらのメールボックスの申し込みをします。

独自ドメインを取得済みのため、レンタルサーバだけを契約します。

契約が問題なく完了し、サーバーコントロールパネルにログインできるようになっていれば、この章は以上です。

2.メールサーバーに独自ドメインを設定

取得している独自ドメインをさくらのメールボックスに設定して、メールアドレスを作成します。
左メニューの『ドメイン/SSL』を選択し、その後、『ドメイン新規追加』をクリックします。

「ドメインを新規追加」には、4つの追加方法がありますが、今回はお名前.comでドメインを取得していたため、「他社で取得したドメインを移管せずに使う」から追加します。

取得したドメインを入力して『追加』します。
※下部にネームサーバー変更についての記載がありますが、変更しないでください。
後ほどVercel側でDNS設定を行いますが、さくらインターネット側のネームサーバに変更してしまうと、Vercel側でのDNS設定値が参照されなくなります。
筆者は最初に誤って設定してしまい、一時的にアクセスの不整合や証明書のエラーが発生するようになってしまいました。(時間経過で解消)

追加が正常に完了すると、『ドメイン/SSL』にて、初期ドメイン以外に先ほど追加したドメインが表示されていることが確認できます。

3.メールサーバーでSPFとDKIMを設定

SPFとDKIMを設定しないと、メール受信側にて、受信拒否や迷惑メールに振り分けられたりすることがあるため、設定を行います。

SPF：メール送信者が使用するIPアドレスを認証し、スパムやメールの偽装（スプーフィング）を防ぐためのメール認証技術
DKIM：メールが送信されたドメインの認証を提供し、メール内容が途中で改ざんされていないことを保証するための技術

詳しくはさくらのレンタルサーバさんのメールの送信元偽装を防ぐ3つの技術をご参照ください。

SPFの設定

左メニューの『メール』>『メールドメイン』に移動します。
対象のドメインの『設定』>『メールドメイン設定』をクリックします。

SPFレコードの『利用する』にチェックが入っていることを確認します。(デフォルトでチェックが入っていると思います)
チェックが入っていなければ、チェックをし、保存してください。

DKIMの設定

対象のドメインの『設定』>『DKIM設定』をクリックします。

表示された『DKIM設定』で下記の値に設定します。

設定項目	値
秘密鍵	秘密鍵を新規作成する
セレクタ	デフォルト値から変更しなくてOK
DKIMレコード	利用しない(チェックしない)
DMARCレコード	利用しない(チェックしない)

※Vercelのネームサーバー（DNS）を利用するため、DKIMレコードとDMARCレコードのチェックは外します

『設定する』ボタンをクリックして、「セレクタ名」と「公開鍵」の情報を控えておきます。
※後ほどVercelへのDNSレコード登録で使います。

詳しくはさくらのレンタルサーバさんのDKIM署名、DMARCを設定する（他社のネームサーバー利用の場合）をご参照ください

4.独自ドメインでメールアドレスを作成

左メニューの『メール』>『メールアドレス一覧』に移動します。
『新規追加』をクリックし、作成したいメールアドレスを登録します。
※私はcontact@mysterylog.comというアドレスを作成しました。

追加が完了すると、『メール』>『メールアドレス一覧』にて、追加したメールアドレスが表示されていることが確認できます。

5.VercelへのDNSレコード登録

※Vercelのネームサーバーを利用していることを前提としていますが、ドメイン取得サイト側のネームサーバーを利用している場合は、そちらのサイト側でDNSレコード登録を行うことで、設定可能かと思います。

左メニューの『ドメイン/SSL』にて「初期ドメイン」を控えておきます。

左メニューの『サーバー情報』にて「ホスト名」を控えておきます。

「初期ドメイン」と「ホスト名」の確認できたらVercelのダッシュボードの『Domains』に移動します。

ここでは、メールサーバ、SPF、DKIM、DMARCの設定のためのMXレコードとTXTレコードの登録を行います。

MXレコード：ドメインでメールを受信するためのサーバーを指定するDNSレコード
TXTレコード：ドメインに関する任意のテキスト情報を提供するために使用されるDNSレコード。今回はSPF、DKIM、DMARCの設定に使用します。

控えておいた「初期ドメイン」と「ホスト名」、DKIMの「セレクタ名」、「公開鍵」をもとに、下記の通りに登録します。

Name	Type	Value	Priority
	MX	XXXXXXX.sakura.ne.jp ※初期ドメイン	10
	TXT	v=spf1 +a:wwwXXXXXXX.sakura.ne.jp -all ※ホスト名
[セレクタ名]._domainkey	TXT	v=DKIM1; k=rsa; p=[公開鍵]
_dmarc	TXT	v=DMARC1; p=none; aspf=r; adkim=r; rua=mailto:[設定したメールアドレス]

各設定が完了したら、MXTOOLBOXで設定が正常に行なわれているかを確認します。
※私の場合、設定完了までに1時間ほどかかりました。設定完了前にツールチェックを行うとエラーで返されます。

MX：https://mxtoolbox.com/
SPF:https://mxtoolbox.com/spf.aspx
DKIM:https://mxtoolbox.com/dkim.aspx
DMARC:https://mxtoolbox.com/dmarc.aspx

下記のようにチェックがグリーンであれば、問題ありません。

メール送受信に必要な設定は以上で完了です。

6.メールアプリの設定

さくらのメールボックスにはデフォルトで使えるウェブメールがありますが、普段お使いのメールアプリで送受信可能にしたい方も多いと思います。
今回はMacの標準メーラーである「メール」アプリでの設定方法を解説します。
Gmailアプリなどでも基本的に設定方法は同じです。

メールアプリへの追加

メールアプリを開いたらメニューバーの『メール』>『アカウントを追加』をクリックします。

『その他のメールアカウント...』を選択し、『続ける』をクリックします。

各設定項目が表示されるため、以下の値を入力します。

設定項目	値
メールアドレス	設定したいメールアドレス
ユーザー名	任意の値
パスワード	メールアドレス作成時に設定したパスワード
アカウントの種類	POP/IMAP ※任意
受信用メールサーバ	さくらのサーバーの初期ドメイン
送信用メールサーバ	さくらのサーバーの初期ドメイン

入力したら『サインイン』をクリックします。
これで、アカウントの設定は完了です。

おわりに

これまで独自ドメインのメールを作成する場合は、レンタルサーバー側がごにょごにょと自動で設定してくれていたので、特に何も気にすることなく使えていましたが、今回のようにメールサーバーとホスティングサーバーを別々で立てる場合は諸々設定しなくてはならず、少し苦労しました。

DNS周りの知識もついたので、個人的にはいい勉強になったかなと思います。

この記事が今後、どなたかの助けになればと思います。

参考