先日、自身のポートフォリオサイトを「Vercel × microCMS × Next.js」という構成でリニューアルしました！（良かったら見てね→ https://portfolio.satoshi-moriya.com/ ）
リニューアル前はエックスサーバーで取得していたドメイン（サブドメイン）を使っていたので、そのドメインをそのまま使えたらいいななんて思っておりました。（SEOあんまり関係ないし、無料だし！）
ということでこの記事では、エックスサーバーで取得したドメインをVercelで使うための設定について紹介したいと思います！
※エックスサーバーでドメインを取得している前提の解説になります
Vercelでの設定
Vercelのダッシュボードにログインしたら、公開したいプロジェクトを開きます。
下記のようにしてドメインを割り当てます。
- Settingsタブに移動
- Domainsに移動
- 割り当てたいドメイン名を入力（今回僕は「portfolio.satoshi-moriya.com」というサブドメインを割り当てました）
- Addボタンをクリック
下の画像のように「Invalid Configuration」という警告がでますが、このままでOKです。
エックスサーバーでの設定
エックスサーバーのサーバーパネルにログインして「DNSレコードの設定」をクリックします。
続いて、対象のドメインをクリックします。（「portfolio.satoshi-moriya.com」は「satoshi-moriya.com」のサブドメインなので「satoshi-moriya.com」をクリックしました）
次に「DNSレコード追加」タブに移動して、上記Vercelの設定をした際に記載されていた内容（下の画像の赤枠）を、今回の場合DNSプロバイダーとなるエックスサーバーに設定します。
- ホスト名：ドメイン名
- 種別：CNAME
- 内容：cname.vercel-dns.com
上記のように設定し、「確認画面へ進む」をクリックします（TTLと優先度はデフォルトで下の画像のように設定されており、そのままでOKです）
設定完了、少し待って反映
上記までで設定は完了です。
僕のは20分ほど経ったときにVercelの画面を見たところ「Valid Configuration」に変わっており、無事に設定したドメインに新しいWebサイトが反映されていました！
参考記事
- エックスサーバーで借りたドメインのサブドメイン使用し、Vercelにカスタムドメインを設定する
- How can I debug a DNS record?
- Use an existing domain
