Googleドメインで購入したドメイン名をVercelにあてる

今回はVercelで公開したサイトに Googleドメイン(https://domains.google.com/) で購入したドメインを当ててみます。 GCPのドメインではなく上記のURLの “Googleドメイン” で購入したドメイン名が対象です。 またドメインは購入済みとし、ドメインの購入の手順は省きます。(ドメイン選んでお会計だけなのでそんなに複雑なことはないです。) ドメイン名を決めるほうがよっぽど大変。

では、行きましょう。

Vercel での設定

手順としては、Vercel でドメイン名を設定し、VercelサーバーのIPアドレスをGoogeドメインにて設定、の２段階です。

一端、公開してみる

まず Vercel でサイトを公開します。 無事にビルドが通り、問題なくサイトが公開されたのを確認したら、公開完了の画面から”Add Domain(ドメインの追加)“ボタンをクリックします。

ドメインの管理画面

ドメインの管理画面に遷移します。 初期はデフォルトで設定されているvercel.appのドメインが表示されています。“Edit”ボタンをクリックします。

ドメインの設定

ここで購入済みのドメインを入力します。

入力後、“Save”ボタンをクリックして保存します。

いったんはエラー状態

ここではGoogle側での設定が終わっていないのでいったんはエラーとなります。

ここで表示されている”A @ 76.76.21.21” がVercelサーバーのIPアドレスなのでこれをメモっておき、Google側に設定します。

Googleドメインでの設定

それではGoogleドメイン側の設定です。

Googleドメインからドメインを選択

Googleドメイン(https://domains.google.com/)サイトに行き、設定したいドメインの”管理”ボタンをクリックします。

ドメインの管理画面

ドメインの管理画面のメニューから “DNS” を選択します。

DNSレコードの追加

DNSの設定画面で”カスタムレコードを管理”のリンクをクリックして、DNSレコードの管理画面に移動します。

Aレコードの追加

先ほどのVercelの画面に出ていたAレコードを追加します。 ホスト名を空白のまま を “A” に、データにVercelサーバーのIPアドレス “76.76.21.21”を入力し、保存ボタンをクリックします。

DNSの設定完了

以下のように設定されればGoogleドメインの設定は完了です。

Vercel で設定の確認

Googleドメインの設定完了後、Vercelに戻ってみましょう。 何秒か待てば無事にエラーが取れました。

これで https://asopi.tech のドメインで無事に本サイトが発行されました！

まとめ

今回はトップドメインの “asopi.tech” を設定したので Aレコードを使いましたが、サブドメイン “blog.asopi.tech” などとしたい場合は CNAMEレコードを使えばOKです。