Vercelにホストした独自ドメインでメールアドレスを作成する

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

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

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

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

## 利用サービス
- [Vercel](https://vercel.com/)
- [お名前.com](https://www.onamae.com)
- [さくらのメールボックス](https://rs.sakura.ad.jp/mail/?gad_source=1&gclid=Cj0KCQjw0MexBhD3ARIsAEI3WHJri-hxoUKNp-MSF2oTx3tc_iffC1SMXfMTp4XLcE1vNJlj4EPO48caAlOGEALw_wcB)

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

## 作業の流れ
1. [さくらのメールボックスでメールサーバーを契約](https://qiita.com/yokko_mystery/items/b1e31a99f6103ae9c12d#1%E3%81%95%E3%81%8F%E3%82%89%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%A7%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E5%A5%91%E7%B4%84)
1. [メールサーバーに独自ドメインを設定](https://qiita.com/yokko_mystery/items/b1e31a99f6103ae9c12d#2%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AB%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E8%A8%AD%E5%AE%9A)
1. [メールサーバーでSPFとDKIMを設定](https://qiita.com/yokko_mystery/items/b1e31a99f6103ae9c12d#3%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7spf%E3%81%A8dkim%E3%82%92%E8%A8%AD%E5%AE%9A)
1. [独自ドメインでメールアドレスを作成](https://qiita.com/yokko_mystery/items/b1e31a99f6103ae9c12d#4%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%82%92%E4%BD%9C%E6%88%90)
1. [VercelへのDNSレコード登録](https://qiita.com/yokko_mystery/items/b1e31a99f6103ae9c12d#5vercel%E3%81%B8%E3%81%AEdns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E7%99%BB%E9%8C%B2)
1. [メールアプリの設定](https://qiita.com/yokko_mystery/items/b1e31a99f6103ae9c12d#6%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%A8%AD%E5%AE%9A)

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

## 1.さくらのメールボックスでメールサーバーを契約
Verecelにはいくつかのメールサーバの[DNSプリセット](https://vercel.com/guides/using-email-with-your-vercel-domain#dns-preset)が用意されているのですが、今回は費用や容量の観点からプリセットにはない「**さくらのメールボックス**」を採用しました。
※約88円/月 (36ヶ月一括払い)

※さくらのメールボックスのサービス内容については[さくらのメールボックス](https://rs.sakura.ad.jp/mail/?gad_source=1&gclid=Cj0KCQjw0MexBhD3ARIsAEI3WHJri-hxoUKNp-MSF2oTx3tc_iffC1SMXfMTp4XLcE1vNJlj4EPO48caAlOGEALw_wcB)を参照してください。

まず、[さくらのレンタルサーバ](https://rs.sakura.ad.jp/)からさくらのメールボックスの申し込みをします。
<img width="1200px" alt="さくらのメールボックス-契約1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/cbb3943f-5072-b8ee-ae11-e4c120162f91.png">

独自ドメインを取得済みのため、**レンタルサーバだけを契約**します。
<img width="1200px" alt="さくらのメールボックス-契約2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/39ffba21-db47-e6cb-2fe3-709cf41062ff.png">

契約が問題なく完了し、[サーバーコントロールパネル](https://secure.sakura.ad.jp/rs/cp/)にログインできるようになっていれば、この章は以上です。
<img width="1200px" alt="サーバーコントロールパネル-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/4582ef08-27fe-43cd-1a3e-57ec080f1d89.png">

## 2.メールサーバーに独自ドメインを設定
取得している独自ドメインをさくらのメールボックスに設定して、メールアドレスを作成します。
左メニューの『ドメイン/SSL』を選択し、その後、『ドメイン新規追加』をクリックします。
<img width="1200px" alt="サーバーコントロールパネル-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/a5773611-18b7-4d1e-b530-a8d1376d2da4.png">

「ドメインを新規追加」には、4つの追加方法がありますが、今回はお名前.comでドメインを取得していたため、「**他社で取得したドメインを移管せずに使う**」から追加します。
<img width="1200px" alt="サーバーコントロールパネル-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/e5621dd4-a1fe-5022-8290-421499df9762.png">

取得したドメインを入力して『追加』します。
※下部にネームサーバー変更についての記載がありますが、変更しないでください。
後ほどVercel側でDNS設定を行いますが、さくらインターネット側のネームサーバに変更してしまうと、Vercel側でのDNS設定値が参照されなくなります。
筆者は最初に誤って設定してしまい、一時的にアクセスの不整合や証明書のエラーが発生するようになってしまいました。(時間経過で解消)
<img width="1200px" alt="サーバーコントロールパネル-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/1e12ea6e-7ed3-1213-86ae-2f607490bb7e.png">

追加が正常に完了すると、『ドメイン/SSL』にて、初期ドメイン以外に先ほど追加したドメインが表示されていることが確認できます。
<img width="1200px" alt="サーバーコントロールパネル-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/d01c585a-44b8-adfb-f8e1-843bfd1d2e58.png">

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

```
SPF：メール送信者が使用するIPアドレスを認証し、スパムやメールの偽装（スプーフィング）を防ぐためのメール認証技術
DKIM：メールが送信されたドメインの認証を提供し、メール内容が途中で改ざんされていないことを保証するための技術
```
詳しくはさくらのレンタルサーバさんの[メールの送信元偽装を防ぐ3つの技術](https://rs.sakura.ad.jp/column/rs/spf-dkim-dmarc/#:~:text=%E3%81%95%E3%81%8F%E3%82%89%E3%81%AESSL-,%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%AE%E9%80%81%E4%BF%A1%E5%85%83%E5%81%BD%E8%A3%85%E3%82%92%E9%98%B2%E3%81%903%E3%81%A4%E3%81%AE%E6%8A%80%E8%A1%93,-%E3%81%93%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%AE)をご参照ください。

### SPFの設定
左メニューの『メール』>『メールドメイン』に移動します。
対象のドメインの『設定』>『メールドメイン設定』をクリックします。
<img width="1200px" alt="SPFの設定-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/00eea47a-b92c-6d07-24e2-eda617174fe0.png">
SPFレコードの『利用する』にチェックが入っていることを確認します。(デフォルトでチェックが入っていると思います)
チェックが入っていなければ、チェックをし、保存してください。
<img width="1200px" alt="SPFの設定-2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/8726b06b-3f54-c588-f829-914e401fb14f.png">

### DKIMの設定
対象のドメインの『設定』>『DKIM設定』をクリックします。
<img width="1200px" alt="DKIMの設定-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/21b0602d-62ff-e523-83e1-609cb822700a.png">

表示された『DKIM設定』で下記の値に設定します。
|設定項目|値| 
|---|---|
|秘密鍵|秘密鍵を新規作成する|
|セレクタ|デフォルト値から変更しなくてOK|
|DKIMレコード|利用しない(チェックしない)|
|DMARCレコード|利用しない(チェックしない)|　

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

<img width="1200px" alt="DKIMの設定-2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/b3db6260-2d50-2feb-3964-c8f6e05dee89.png">

『設定する』ボタンをクリックして、「セレクタ名」と「公開鍵」の情報を控えておきます。
※後ほどVercelへのDNSレコード登録で使います。
<img width="1200px" alt="DKIMの設定-3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/9efc3207-d77a-b762-afb0-641c943d5612.png">

詳しくはさくらのレンタルサーバさんの[DKIM署名、DMARCを設定する（他社のネームサーバー利用の場合）](https://help.sakura.ad.jp/mail/2811/?_gl=1%2A1r628ft%2A_gcl_aw%2AR0NMLjE3MTQ1Nzg5ODAuQ2owS0NRancwTWV4QmhEM0FSSXNBRUkzV0hKcmktaHhvVUtOcC1NU0Yyb1R4M3RjX2lmZkMxU01YZk1UcDRYTGNFMXZOSmxqNEVQTzQ4Y2FBbE9HRUFMd193Y0I.%2A_gcl_au%2AMjEyNjI3ODI2OS4xNzE0NDc5NzA0#heading-3)をご参照ください

## 4.独自ドメインでメールアドレスを作成
左メニューの『メール』>『メールアドレス一覧』に移動します。
『新規追加』をクリックし、作成したいメールアドレスを登録します。
※私はcontact@mysterylog.comというアドレスを作成しました。
<img width="1200px" alt="DKIMの設定-3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/61b36c32-1489-6313-62c3-f227f6e95485.png">
<img width="1200px" alt="DKIMの設定-3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/f2a99079-75ae-4adb-7e91-6f655c0409d3.png">

追加が完了すると、『メール』>『メールアドレス一覧』にて、追加したメールアドレスが表示されていることが確認できます。
<img width="1200px" alt="DKIMの設定-3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/fa5b6757-9aa8-b6bc-8f03-09e5ba686303.png">

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

左メニューの『ドメイン/SSL』にて「初期ドメイン」を控えておきます。
![スクリーンショット 2024-05-02 3.08.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/f3ffe657-a666-ed14-9035-6294738f8444.png)

左メニューの『サーバー情報』にて「ホスト名」を控えておきます。
![スクリーンショット 2024-05-02 3.09.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/9ee2ecab-983e-26d4-eef8-a24919098b7a.png)

「初期ドメイン」と「ホスト名」の確認できたら[Vercel](https://vercel.com/)のダッシュボードの『Domains』に移動します。
![スクリーンショット 2024-05-02 2.55.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/a2513f4e-a44b-f6cf-75ce-cc9e14b77d29.png)

ここでは、メールサーバ、SPF、DKIM、DMARCの設定のためのMXレコードとTXTレコードの登録を行います。
```
MXレコード：ドメインでメールを受信するためのサーバーを指定するDNSレコード
TXTレコード：ドメインに関する任意のテキスト情報を提供するために使用されるDNSレコード。今回はSPF、DKIM、DMARCの設定に使用します。
```
控えておいた「初期ドメイン」と「ホスト名」、DKIMの「セレクタ名」、「公開鍵」をもとに、下記の通りに登録します。

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

<img width="1200px" alt="VercelへのDNSレコード登録-2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/b15c5b38-547f-86aa-931c-df1bb58dd029.png">

<img width="1200px" alt="VercelへのDNSレコード登録-3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/324d731e-3f92-dc1e-4303-0e2d3703c079.png">

<img width="1200px" alt="VercelへのDNSレコード登録-4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/0087a711-2527-933a-d6c1-89b7f476b5d0.png">

<img width="1200px" alt="VercelへのDNSレコード登録-5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/91526f69-a906-5ef7-1bf5-289e2c09505e.png">

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

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

下記のようにチェックがグリーンであれば、問題ありません。
<img width="1200px" alt="VercelへのDNSレコード登録-5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/204f016e-3270-6719-1b2d-e1336877dc80.png">

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

## 6.メールアプリの設定
さくらのメールボックスにはデフォルトで使える[ウェブメール](https://secure.sakura.ad.jp/rscontrol/www1182.sakura.ne.jp/webmail?mbox=)がありますが、普段お使いのメールアプリで送受信可能にしたい方も多いと思います。
今回はMacの標準メーラーである「**メール**」アプリでの設定方法を解説します。
Gmailアプリなどでも基本的に設定方法は同じです。

### メールアプリへの追加
メールアプリを開いたらメニューバーの『メール』>『アカウントを追加』をクリックします。
<img width="500px" alt="メールアプリ設定-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/092080d8-fe4a-40be-836d-d629b067fbb1.png">

『その他のメールアカウント...』を選択し、『続ける』をクリックします。
<img width="400px" alt="メールアプリ設定-2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/30ed978b-3d70-318c-b87e-5b3fe87678cf.png">

各設定項目が表示されるため、以下の値を入力します。
|設定項目|値| 
|---|---|
|メールアドレス|設定したいメールアドレス|
|ユーザー名|任意の値|
|パスワード|メールアドレス作成時に設定したパスワード|
|アカウントの種類|POP/IMAP ※任意|
|受信用メールサーバ|さくらのサーバーの初期ドメイン|
|送信用メールサーバ|さくらのサーバーの初期ドメイン|

<img width="400px" alt="メールアプリ設定-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/e77fe8ea-48c7-7b18-a7f2-d400f23e2538.png">

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

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

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

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

## 参考
https://qiita.com/ishizuki/items/52099399c81aee89f728

https://zenn.dev/mackay/articles/7625cc2e2400b7