Vercel × エックスサーバー でメール設定（+ サイト公開 ）
「ドメイン・サーバー設定」私の苦手な言葉です。
正直なところ、私はサーバーサイドの作業があまり好きじゃありません。
DNSをはじめとするサーバー側の設定は疎通の確認までに時間がかかり、設定にミスがあれば、設定の状態確認やリカバリー自体にもそれなりの時間がかかる上、メールアカウントの設定まで扱わなければなりません。
その上サービスのドキュメントが英語中心だったりすると、英語アレルギーを即座に発症して呼吸困難になってしまいます。（ゆえに扱えない。）
そのためドキュメントが日本語で用意されていて、電話やメールでのサポートの手厚いさくらやエックスサーバー、kagoya といったレンタルサーバーで無難に構築・納品することが最適解だと思っていました。
重ね重ね言いますが、サーバーサイドの作業がね、まあ、好きじゃないのです。
とくにメールアカウントの設定は好きじゃなくて…メールサーバの設定ならまだしも、そこまでリテラシーの高くない顧客側のメールソフト設定なんかも作業領域に含まれることが多かったので、苦手意識は高まりました。（田舎の制作会社あるあるかも知れません。）
今ではそういった作業にも多少慣れてきましたが、慣れ親しんだレンタルサーバの設定の簡単さを捨ててまで海外のホスティングサービスを使おうとは思えなかったんですよねえ。
詳しい手順は後述しますが、Vercel を使ってみてその認識を一変させることになります。
Vercel 、おそろしい子！
Vercel は GitHub と連携して簡単にサイトを公開できるとんでもないサービスで、デプロイしたサイトには独自ドメインを設定できることも知られています。
独自ドメインを取り扱うとなれば、同じドメインでメールアカウントも取り扱いたいところですよね。できたんですよ、Vercel なら。それもメッチャ簡単に。やばー
Vercel 自体の本来の魅力はそこではないのですが、今回は割愛します。
サイト公開とメール設定の大まかな流れ
Vercel でのサイト公開の手順はそれだけで記事にできそうなので今回は割愛します。
事前準備 1. エックスサーバーでドメインを取得
事前準備 2. サイトをつくり、GitHubのリポジトリにプッシュ
事前準備 3. Vercel にリポジトリを追加 → デプロイされたリポジトリにドメインを追加
以下の内容をかいつまんで説明すると、上記の3手順で
Vercel の方に向いていた独自ドメインをメールの送受信のみエックスサーバーに向けます。
VercelのDNSレコードにMXレコードを追記する。
エックスサーバーのSPF設定を確認する。
エックスサーバーでメールアカウントをつくる。
Vercel のDNSにTXTレコードを追記する。
エックスサーバーのDNSにMXレコードを変更する。
メールの送受信テストをする。
Vercel に設定した独自ドメインでメールを取り扱う方法は検索すると出てくるのですが、エックスサーバーを対象とした場合の設定はいくつかのサイトを参照する必要があったので、今回はバラバラだった設定手順をまとめてみました。
事前準備 1. エックスサーバーでドメインを取得
まずは従来どおり慣れ親しんだ方法でドメインを取得します。
ドメインの取得手順は公式の方がわかりやすいので、以下のページを参照してください。
※ ドメイン取得はドメインの状態がわかりづらいので、https接続で空ページが表示されるのを確認してから Vercel で作業するといいですよ。常時SSLとドメインの状態が把握しやすくなります。
事前準備 2. サイトをつくり、GitHubにプッシュ
私は Git コマンドについてもそこまで明るくないので、GitHub にリポジトリをつくったらSourcetree というGit の GUI ツールでローカルにリポジトリをクローンし、コミットやプッシュもそのツールの中で済ませてしまいます。
事前準備 3. Vercel にリポジトリを追加 → デプロイされたリポジトリにドメインを追加
Vercel では連携したGitHub アカウントのリポジトリをインポートし、そのまま本番反映（デプロイ）することができます。
デプロイされたリポジトリには Vercel から発行されたデフォルトのURLが設定されていますが、各種サービスで取得した独自ドメインを追加することができます。
Vercelで独自ドメインを設定する方法 | YoheiKo ブログ
※ DNS設定の反映には最大24時間ほどかかると言われています。事前準備の段階でデプロイしたサイト自体に問題がなければ、メールアドレスの設定は無理せず別日にすることも検討してみましょう。
1. Vercel の DNSレコードに MXレコードを追記する。
事前準備が完了していれば、ドメインは Vercel のサーバを向いています。
Vercel のDNS設定を書き換えて、メールの送受信をエックスサーバーで処理できるようにしましょう。
ドメインのDNSレコードを変更したいのでドメインの [Edit] ボタンを押して[Enable DNS Record]でDNSレコード編集を有効化します。
[View DNS Records & More for （ドメイン名） →] のリンクをクリックし、DNS Record 設定画面に遷移します。
Name: （未入力）
Type: MX
Value: エックスサーバーの初期ドメインを入力してください。例）svXXXX.xserver.jp
TTL: 60（デフォルト）
Priority: 10
上記を入力し、[Add] ボタンを押してMXレコードを追記してください。
2. エックスサーバーの SPF設定を確認する。
次に、SPF設定なるものを設定してみましょう。
SPF設定はなりすましメールを予防するための設定で、SPFを登録しておくことで送信したメールを迷惑メールとして判定されないようにできます。
エックスサーバーの場合、登録したドメインは標準設定でSPF設定がONになっているはずなので、サーバパネル > メール：SPF設定 > （Vercel にホストしたいドメイン名）の画面からSPFの有効化を確認しておけば大丈夫そうです。
3. エックスサーバーでメールアカウントをつくる。
エックスサーバーの管理画面に入ったついでに、追加したいメールアドレスもつくっておきましょう。こちらも公式ドキュメントの方が分かりやすいので、下記URLからご確認ください。
メールアカウントの追加 | Xserver レンタルサーバー
4. Vercel のDNSに TXTレコードを追記する。
手順1. と同様に Vercel の DNS Record 設定画面からTXTレコードを追記します。
Name: （未入力）
TYPE: TXT
VALUE: v=spf1 +a:（エックスサーバーの初期ドメイン） -all
上記を入力し、[Add] ボタンを押してTXTレコードを追記してください。
5. エックスサーバーのDNSに MXレコードを変更する。
エックスサーバーのサーバーパネル > ドメイン：DNSレコード設定 の画面へ遷移し、表示されたMXレコード（種別）を変更します。
デフォルトではドメイン名が入っているので、（エックスサーバーの初期ドメイン）に書き換えて変更を反映させてください。
※ 追記したMXレコードとTXTレコードがDNSに反映されるまで、私の場合は反映までに1時間ほど待ちました。
下記サービスでは、DNSが設定されているか確認できるようです。
SuperTool
6. メールの送受信テストをする。
メールの送受信についてはエックスサーバーで処理できるようになったので、エックスサーバーと同じ手順でメールサーバの設定を行い、テストしてみてください。
メールの送受信ができていれば完了です。
まとめ
私の中で「Vercel の本番反映のたやすさ（むしろFTPを使わずに済む手軽さ）」は非常に魅力的でしたが、メールの取り扱いがボトルネックになっていました。
Vercel 側のDNS設定がUIを含めてメッチャ分かりやすいので、慣れ親しんだエックスサーバーと組み合わせれば心置きなく実運用できそうですね。
Vercel とエックスサーバーのDNS設定画面を行ったり来たりしながら迷子になるかもしれませんが「Vercel での独自ドメインの反映」さえできていれば、やることは「メールの送受信のみエックスサーバーに向ける」だけです。
ホスティングサービスにネガティブな印象がある人にも、ぜひ一度試してみていただきたいです。