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

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

西村祐二

2020.12.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

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

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

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

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

やってみる

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

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

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

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

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

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

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

ここでは

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

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

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

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

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

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

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

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