Route53で取得したドメインをVercelに向ける

Route53で取得したドメインをVercelに向けるまでの手順と、設定時につまずいたポイントをまとめます。

はじめに

このブログは、以前はRoute53で取得したドメインを使ってAmplifyで公開していました。

請求をあまり気にしていなかったのですが、最近は少しでも固定費を抑えたいと思い、あらためてコストを確認してみることにしました。すると、Amplifyが月15ドル前後、WAFが8ドル前後、さらに税金も加わって、月額では合計25ドルくらいかかっていました。

アクセス数の少ない静的サイトとしては少し割高に感じたので、公開先の見直しを決めました。

最初はCloudflareへの移行も考えましたが、Next.jsアプリをそのまま動かすにはOpenNext対応などを考える必要があり、今回はそこまで手を広げないことにしました。そのため、最終的にはVercelのHobbyプランへ移行しています。

判断材料は次のとおりです。

今回は、すでにRoute53で取得しているドメインをVercel側に追加し、その後にRoute53のDNSレコードをVercel向けに設定しました。

まずはRoute53で対象ドメインを確認します。

次に、Vercel側でドメインを追加します。

この時点では、Route53側に必要なレコードをまだ作成していないため、Vercel上ではエラーが表示されます。ここではまだ正常です。

続いて、Vercelの案内に従ってRoute53にレコードを追加します。

レコード作成後、Vercelの設定画面に戻って反映を確認します。

設定自体は単純でしたが、途中でいくつか引っかかった点がありました。

www 用のCNAMEレコードがすでに存在していて、新しい設定と競合していました。これはAmplify側の設定が残っていたのが原因で、Amplifyアプリを削除したところ解消しました。

Vercelの画面を更新すると、Aレコードが Invalid と表示されました。原因は、Route53のレコード名に @ をそのまま入力していたことでした。

補足すると、@ はDNSでルートドメインを表すときによく使われる一般的な記号です。ただし、入力方法まで共通で決まっているわけではなく、DNSサービスによって @ をそのまま受け付ける場合もあれば、空欄やドメイン名そのものを使う場合もあります。

私は初心者で知らなかったのですが、Route53では @ をそのまま入力するのではなく、ルートドメインのレコード名は空欄で扱うのが正解でした。@ を空欄に修正したところ、エラーは解消しました。

これで、Route53で取得したドメインをVercelに向ける設定は完了です。

今回の移行で、公開先をAmplifyからVercelに切り替えられました。あわせて、Fumadocsの標準的なDocs表示から、少しカスタマイズした表示にも変更しています。

運用コストがどの程度変わるかは、来月にBilling and Cost Managementで確認してみる予定です。