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

1 分

183 文字

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

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

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

背景、記事の目的#

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

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

注意

この時点ではDNS側で名前解決する設定をしていないため、「Invalid Configuration」というエラーが表示されます。

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

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

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

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

情報

これでカスタムドメインの設定は完了です！
ドメイン部分をクリックして、カスタムドメインでアクセスできることを確認してください！

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