Vercelにホストしている独自ドメインでメールアドレスを作る方法[お名前ドットコム][さくらのレンタルサーバー][Next.js]

Pocket

ハッピフルのホームページはNext.jsをVercelにホストしています。Vercelのドメイン設定ではお名前ドットコムで買った独自ドメインである「hpfull.jp」を利用しています。
このたび、

×××@hpfull.jpみたいな感じで、独自ドメインでメールアドレスを作りたい!!

という要望が出ました。Vercelはホスティングサーバーですので、メールサーバーとしての役割は果たせません。

そこで、新たにメールサーバーのためのレンタルサーバーを借りる必要があり設定も少し面倒だったので手記として残しておきます。独自ドメインでメールアドレスを作成したい方や未来の自分がこれを見て役立たせることを祈ります!!

目次

前提

  • Next.jsで作ったサービスをVercelにデプロイしている
  • 独自ドメインをお名前ドットコムなどで取得している
  • (最終的にはGmailで送受信したい)

Vercelでメール送受信する

まずはやることの大まかな流れを掲載しておきます。

  1. メールサーバーをさくらのレンタルサーバーで契約
  2. Vercelのネームサーバーのレコードを書き換えメールがきたらメールサーバーへ行くように設定
  3. さくらのメールサーバーで諸々設定
  4. Vercel側でSPFレコード設定
  5. Gmailで諸々設定

ではやっていきましょう。今回作成する独自ドメインはexample@hpfull.jpとします。

1.メールサーバーをさくらのレンタルサーバーで契約

さくらのレンタルサーバ
さくらのレンタルサーバ | 高速・安定WordPressなら!無料2週間お試し 高速、安定サーバーならさくらのレンタルサーバ!PHP7モジュールモードでWordPress高速化。無料SSL、Webフォント、バックアップ機能などWebサイト制作に便利な機能が充実。...

上記サイトの真ん中あたりに「さくらのメールボックス」というのがあるので、こちらから早速契約していきます。非常に安く契約できるのでこちらを利用していきたいと思います。

契約した時、メールサーバーの初期ドメインというものが表示されているので(xxx.sakura.ne.jpの形式)、後ほど使うのでコピーしておきましょう。

2.Vercelのネームサーバーのレコードを書き換えメールがきたらメールサーバーへ行くように設定

Vercelのダッシュボード の「Domains」からDNS Recordsの設定へいきましょう。

ここに、NAMEは空、TYPEはMX、VALUEは先ほどコピーしておいたメールサーバーの初期ドメインを、TTLは任意、PRIORITYは10を設定し、Addを押します。

3.さくらのメールサーバーで諸々設定

それではまたさくらのサーバーのダッシュボードへいき独自ドメインを設定していきます。
自分はお名前ドットコムで契約していました。
ダッシュボード 画面の、ドメイン/SSL→ドメイン/SSLからドメイン新規追加します。追加したドメインの設定からSPFレコードの使用を利用するにチェックを入れておきます。
SPFレコードってなにって感じだったのですが、ようはなりすましメールを予防してくれるらしいです。設定したほうが良さそうなのでとりま設定しましょう。
詳しいことはこちらを参考にしてくださいださい
このタイミングで、メール→メール一覧からメールアドレスを作成しておきましょう。自分が今回作成するのは、example@hpfull.jpです。

4.Vercel側でSPFレコード設定

2でやったようにDNS Recordsに新たにまた追加します。
NAMEは空、TYPEはTXT、TTLは任意、PRIORITYは空にします。VALUEはどのような書き方が正解かいまいち理解できていないのですが、「v=spf1 +a:さくらの初期ドメイン -all」とするとうまくいきました。
https://mxtoolbox.com/SuperTool.aspx
こちらのサイトにて、ドメインを打ち込んで、

こんな感じになっていたら大丈夫だと思います。

これでとりあえず、example@hpfull.jpでメールが送受信できるようになっています。ここからは、このメールアドレスをGmailで使えるように設定していきます。

5.Gmailで諸々設定

まずは任意のGmailアカウントにログインし、Gmailアプリを開きます。画面右上にある設定→すべての設定を表示をクリックします。

アカウントとインポートタブの他のアカウントのメールを確認→メールアカウントを追加するをクリックします。

こちらに今回設定したいメールアドレスであるexample@hpfull.jpを入力して次へを押します。
次ページにて、「他のアカウントからのメールを読み込む(POP3)」を入れて次へを押します。


次ページにて上記のように埋めます。
ユーザー名は今回設定するexample@hpfull.jp、パスワードはメールアドレス作成時に設定したパスワード、POPサーバーはさくらのサーバーの初期ドメイン、上2つをチェックにし、ポートを995に変更して次へを押します。
これでexample@hpfull.jpでメールが受信できるようになりました。

次ページからメールの送信設定を行います。

名前には、メールアドレスの送受信にて使いたい任意の名前を設定します。
次ページにて、

SMTPにはさくらの初期ドメイン、ユーザー名は設定したいメールアドレス、パスワードはアドレス作成時のものを入れあとはそのままの設定でアカウント追加を押します。

その後、確認コード入力の画面に移ります。確認コードはさくらのメールサーバーのダッシュボード →メール一覧→該当のアドレスのwebメールをクリックすると届いています!!
これを入力すれば晴れてgmailで独自ドメインで作ったメールアドレスを扱えます。

参考

レンタルサーバーからVercelに移転したら独自ドメインのメールが使えなくなってしまった話
Gmail(ウェブブラウザ)を利用する

Pocket

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次