Vercel × Google Domainsで独自ドメインを設定する方法

Posted on:2022年12月3日

このサイトは Vercel でホスティングしており、Google Domains で購入したドメインを設定したので備忘録として残しておきます。

Google Domains でドメインの購入

まずはGoogle Domainsでドメインを購入します。（購入方法は割愛します。）

ドメインを購入したら、Vercel のプロジェクトの設定からドメインを設定します。

Vercel でドメインの設定

購入したドメインを Vercel のプロジェクトに設定します。

  1. Vercel のコンソール画面上にて目的のプロジェクトを選択します。
  2. Settings→Domainsの順で選択し、以下の入力欄から Google Domains で購入したドメイン名を入力して Add ボタンを押下します。
  1. 押下後、以下画面が表示されるので、任意の箇所を選択します。（特別な理由がない限りRecommendedを選択すると良いでしょう）今回はRecommendedを選択します。
  1. 追加後、以下一覧画面に追加したドメインが表示されます。（通常のドメインと www のサブドメインが追加されます）
    また、A レコードとして76.76.21.21、www 側では CNAME としてcname.vercel-dns.com.が表示されていますが、Google Domains 側で DNS レコードの設定を行いますのでメモなど残しておきましょう。
    問題なく設定が完了したらInvalid ConfigurationがValid Configurationに変化します。
  1. Google Domains のコンソール画面上にて目的のドメインを選択し、「DNS」を選択します。
  1. 今回は、A レコードと CNAME レコードを設定します。
    A レコードには、
    「ホスト名」欄は空のまま、
    「タイプ」欄はA、
    「データ」欄には Vercel のプロジェクトの設定画面でメモした76.76.21.21を設定します。
  1. 保存を押下すると、以下のように設定が反映されます。
  1. Vercel 側の画面に戻ると、以下のようにValid Configurationに変化していることが確認できます。
    また同時に、SSL 証明書の設定も行ってくれます！
    これに続いて CNAME レコードの設定も行いましょう。
    Google Domains 側に戻り、新しくカスタム レコードを管理→新しいレコードを作成を押下します。
  1. CNAME レコードには、
    「ホスト名」欄はwww、
    「タイプ」欄はCNAME、
    「データ」欄には Vercel のプロジェクトの設定画面でメモしたcname.vercel-dns.com.を設定します。
  1. 問題がなければ、以下のように設定が反映されます。
    以上で、Google Domains と Vercel の設定は完了です！お疲れさまでした！