Vercelにホストした独自ドメインで安く便利にメールアドレス使いたい、、、

スクリーンショット2023-04-0418.42.40.png

はじめに


今までレンタルサーバー×Wordpressで運用していた弊社のホームページをモダンにしようぜ、ということでNext.js × Vercelで組み直しました。

Githubのリポジトリにプッシュし、ホスティングが無事完了。独自ドメインの設定・レンタルサーバーからの移管のところで、重大なことに気が付く。

”ネームサーバー( NS )の変更したら、独自ドメインでメール使えなくなるんじゃね?”

そして、実際そうで慌てて対応したので、以下にVercelホスティングしている独自ドメインを使って、別のメールサーバーで運用する方法をまとめておこうと思います。

概要


ここでは、サイトをVercelに登録するまでの流れに関しては記しません。要望があれば、いつか別記事にするかも。。

1. 今回のテーマ

  • 安い !!
  • 便利 ( それなりに )

2. 必要なもの

  • 独自ドメイン
  • メールサーバー

3. 手順

  1. メールサーバーの初期設定
  2. Vercel側で設定
  3. gmailとの連携

メールサーバーの選定


まずは、新しいメールサーバーの選定からしなければいけません。

今まではサイトのホスティングをしているレンタルサーバーに独自ドメインを登録して、そこで用意されているメールサーバーに対して、独自ドメインのメールアドレスを設定して、そこで受信したメールをGmail宛に転送していました。

そこで、今回はメールサーバーを新たに用意し、Vercelのネームサーバー内のDNSレコードに追記を行うことで、メールの送受信自体は全てメールサーバーで運用するという体制にしました。
( 弊社が元々使っていたレンタルサーバーでも非公式で受信は可能だったようですが、もしも、のリスクを考えて今回は別途契約をしました。 )

ちなみに、Vercelで登録しているドメインのDNSレコードのところを見てみると
スクリーンショット2023-04-0418.27.04.png
プリセット ( DNS Record Preset ) として
G Suite、Zoho、Mailgun、ImprovMX、ProtonMail、Outlook、iCloudがあるようでした。本当のことを言うと、G Suite ( Goole Workspace ) を使いたいところですが、いつもの個人的なコスパ重視な性格が出てしましまして今回は断念しました。 ( だって、1人あたり 680円/月 もするんだもん、、 😂 )

これらの弊社の厳しい審査?!を経て今回選ばれたのはさくらインターネットが提供するメールサービスの「さくらのメールボックス」です。

スクリーンショット2023-04-0418.42.40.png

お値段驚異の月額86円〜 です。めちゃくちゃ安い上に、さらにメール認証に必要なSPFレコードも設定できます。いい !!

具体的な手順


今回やることは至ってシンプルでメール用のレンタルサーバーを契約し、VercelのネームサーバーのDNSレコードを追記してGmailへの転送設定をするだけです。

1. メールサーバーの初期設定

まずはチャチャッと契約を済ませます。2週間以内なら解約しても無料とのこと!

契約後、さくらサーバーのダッシュボードにアクセスします。
スクリーンショット2023-04-0421.13.19.png

左側のメニューからドメイン/SSLを選択し、
スクリーンショット2023-04-0421.14.48.png

右側のドメイン新規追加から
スクリーンショット2023-04-0422.57.42.png

他社で取得したドメインを移管せずに使うで他社で取得した独自ドメインを登録します。
スクリーンショット2023-04-0421.16.23.png

ドメインの登録後、同じドメイン一覧画面から今回使う独自ドメインの”設定”を選択し、メール認証に使うSPFレコードの使用にチェックを入れてください。

スクリーンショット2023-04-0421.17.01.png

最後に独自ドメインで使用したメールアドレスを追加します。

スクリーンショット2023-04-0421.17.25.png

ここで、先に転送先のgmailアドレスを追記し、転送専用にしておくと後からGmailへの登録をするときに楽なので、ここで一緒にしちゃいましょう!!
※確認コードが届かない場合は一旦、受信するの設定で再トライしてみてください!

スクリーンショット2023-04-0421.27.38.png

そして、さくらインターネットの会員メニュー契約中のサービス一覧画面から”初期ドメイン”と”ホスト名”も入手しておきます。 ( ⚠︎「hogehoge」と「****」部分は、ドメインごとに異なりますので注意してください。 )

ドメイン・ホスト名
初期ドメイン hogehoge.sakura.ne.jp
ホスト名 www****.sakura.ne.jp

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

VercelのダッシュボードのDomainsからDNS Recordsの設定画面へ行きます。

スクリーンショット2023-04-0422.27.51.png

このDNS Recordsの設定画面で、

スクリーンショット2023-04-0421.30.41.png

以下のように入力します。( ⚠︎「hogehoge」と「****」部分は、ドメインごとに異なりますので注意してください。 )

Name Type Value Priority
MX hogehoge.sakura.ne.jp 10
TXT v=spf1 +a:www****.sakura.ne.jp -all

3. Gmailへの登録

Gmailの設定の”アカウントとインポート"を選択し、"名前:"のセクションから他のメールアドレスを追加を押します。

スクリーンショット2023-04-0422.39.27.png

名前はなんでもOKです。メールアドレスには上で作成した独自ドメインのメールアドレスを入れます。

スクリーンショット2023-04-0422.44.56.png

SMTPサーバーにはさくらの会員メニューから取得してきた、ホスト名入力し、ユーザー名には独自ドメインのメールアドレス、パスワードはメールアドレス作成時のものを入力します。ポートは587に設定し、TSLを選択してください。

スクリーンショット2023-04-0422.45.28.png

最後に、確認メールがGmailの通常の受信ボックスか、迷惑メールボックスに届くので確認コードを入力し全ての設定完了です。⚠︎ここでメールがGmailのボックスに届いてなければ、さくらのメールサーバーにログインしてそこで確認する必要があります。逆に、確認コードがGmailのボックスに届いていればそこで受信確認もOKですのでそのまま使いだせます!!

終わりに


プリセット ( DNS Record Preset ) を使えば簡単だったろうなと思いつつ僕のようなコスパ勢の参考になればと思います。

いつかはね、使いたいです、G-Suite

お後がよろしい様で。


お知らせ

弊社では今回取り上げたNext.jsやVercelなどを活用したモダンなweb開発も承っております。お気軽にご相談ください。

monoDuki LLC | 鹿児島からXRとインキュベーションを広げる会社

鹿児島の「モノ好き」達が世の中をもっと面白くしようと、AR、XR事業とインキュベーション事業を軸として新たな可能性を提供します。