VercelでホスティングしているサイトにRoute53で取得したドメインをサブドメインとして設定する

Route53で取得したドメインを使って、Vercelでサブドメインを設定する手順をまとめました。とても簡単です。
2020.12.24

どうも!大阪オフィスの西村祐二です。

Vercelは無料の個人アカウント(Hobbyプラン)でもかなりいろいろできます。複数のアプリケーションもホスティングすることができます。詳細は公式サイトをご確認ください。

Next.jsやGatsby.jsなどで作成したサイトをホスティングさせるとき、サブドメインを設定したいなと思うことがあります。

(個人的にドメインを設定するとなんだかモチベーションがあがります。)

やりたいことのイメージとしては下記になります。

Route53で取得しているドメインがあるのでそれを利用してVercelでホスティングしているアプリケーションにサブドメインを設定する手順を備忘録を兼ねてまとめたいと思います。

やってみる

前提

  • Route53でドメインを取得済である

今回、ynishimura0922.comというドメインを利用しています。

ドメイン取得の流れは下記ブログが参考になります。

Route 53 でドメインを取得・購入する(2019版)

  • アプリケーションをVercelでホスティング済である

Vercel側の設定

Vercelのダッシュボードから対象のプロジェクトを選択し、「Settings」 => 「Domains」に移動します。

そこで設定したいドメインを追加します。今回、「gatsby-blog-sample.ynishimura0922.com」と設定し追加しました。

Route53側の設定

AWSのマネージメントコンソールのRoute53に移動し、ホストゾーンにある取得したドメインの設定画面に移動します。

そこで「レコードを作成」をクリックします。

ここでは

  • レコード名:gatsby-sample-blog

  • レコードタイプ:CNAME

  • 値:cname.vercel-dns.com

と設定してレコードを作成します。

vercelのドキュメントはこちら

Vercel側の画面確認

Vercelの画面で設定したドメインでエラーが出ていなければOKです。

動作確認

設定が完了して10−20分ぐらい経過したあとに設定したURLにアクセスするとホスティングしているサイトが確認できるようになります。また、HTTPSでアクセスできます。Let's Encryptが利用されているようです。

Vercelに新しくアプリケーションを追加した際にも同じ要領でドメイン設定することで指定したドメインにアクセスすることができます。

さいごに

Route53で取得したドメインを利用してVercelでホスティングしているアプリケーションにサブドメインを設定する手順をまとめました。

とても簡単に設定できました。Vercelには他にたくさん機能があるのでいろいろキャッチアップしていきたいと思います。

誰かのお役に立てたら幸いです。

参考サイト

https://vercel.com/docs/custom-domains#subdomains

https://zenn.dev/lollipop_onl/articles/eoz-vercel-pricing-2020