VercelにRoute53で取得したカスタムドメインを設定する方法

VercelでホスティングしてるWebサイトにカスタムドメインを紐付けたいのだけど、どうすればいいの？

カスタムドメインを用意できている場合だけど
その方法を紹介するよ！

Route53で取得したドメインをVercelでホスティングしているWebページに設定する方法を紹介します。

背景、記事の目的#

当ブログはVercelでホスティングしているものの、カスタムドメインはまだ設定できていませんでした。
ただ、別でRoute53でドメインを購入していたためそのドメインで当ブログにアクセスできるように設定しました。
その時の手順を紹介します。

手順#

Vercelの設定#

Vercelのコンソール画面>設定したいプロジェクト>Settings>Domainsで設定したいドメインを入力し、「Add」ボタンを押下します。

表示されているCNAMEを控えます。

Route53の設定#

AWSコンソール画面>Route53で設定したいホストゾーンを選択します。
「レコードを作成」ボタンを押下します。
「レコード名」欄に設定したいサブドメインを入力します。
「レコードタイプ」はCNAMEを選択します。
「値」欄は、Vercel画面の「value」の値をペーストします。

その他はデフォルトで設定します。

結果#

しばらくすると、Vercelでエラーが表示されていた箇所が、「Valid Configuration」となります。

無事カスタムドメインで接続できました！