VercelにRoute53に登録した独自ドメインを設定する

個人利用のWebサービス用に、

お名前.comでドメインを購入し購入したドメインをRoute53に設定しました。

この記事ではRoute53に登録したドメインをVercelのサイトに設定してみます。

Vercelにドメインを設定する

登録するドメインの種類が「Apex Domain」か「サブドメイン」かによって設定方法が変わってきます。

もし、持っているドメインが「tech-broccoli.life」の場合

種類	URL	Route53への設定方法
Apex Domain	tech-broccoli.life	Aレコード 追加
サブドメイン	www.tech-broccoli.life my-site.tech-broccoli.life などなど	CNAMEレコード 追加

というそれぞれ設定方法になります。

Vercelに登録するドメインを登録する

登録したいプロジェクトを選択しSettings → Domainsを選択。

登録したいドメインをフォームに入力しAddボタンを押下

（試しに www.example.com で実行）

するとwwwをつけているからかリダイレクト設定するかどうか、のモーダルが表示されます

サービスの運営をどのようにするか、によって変わってくると思うのでケースバイケースで選択して下さい。

私は今回「Recommended」が付いている1番上を選択しました。

すると

以下のように2つのレコードを作るよう表示されます。

それぞれ「Apex Domain」と「サブドメイン（今回の場合www）」ですね。

Apex Domains

サブドメイン

まだRoute53にレコードを作っていなくドメインの名前解決が行えないため、

「Invalid Configuration」と表示されます。

Route53にレコードを作成する

Apex Domainの場合

Vercelで表示された内容をRoute53に設定します

種類	値
レコード名	（空白）
レコードタイプ	A
値	Vercel の Value

この状態で「レコードを作成」を押下。

ttlは何がベストか分からなかったので、デフォルト値の「300」のままにしました。

サブドメインの場合

こちらもVercelで表示された内容をRoute53に設定します

種類	値
レコード名	www
レコードタイプ	CNAME
値	Vercel の Value

この状態で「レコードを作成」を押下。

こちらもttlは何がベストか分からなかったので、デフォルト値の「300」のままにしました。

Route53のレコード一覧上では以下のようになります

Vercelでドメインが設定出来た事の確認

先ほどのVercelのDomain設定ページを確認します

モザイクばかりで申し訳ないのですが…w

先ほどの「Invalid Configuration」というステータスから「Valid Configuration」に変わっていれば成功です！