VercelはNext.jsやReactで作成したWebアプリを動かすサーバーです。Vecelにも独自ドメイン取得機能とネームサーバー（DNSサーバー）はありますが、本稿ではConohaで取得した独自ドメインとConohaのネームサーバーを利用して、Vercel上のWebアプリに独自ドメインを設定する方法をご紹介します。他のドメイン取得サービスをご利用の方でも参考になると思います。
ゴールイメージは次の通りです。Vercel上で公開されているWebサイトに3つのドメインが設定されています。1番目が取得設定した独自ドメイン本体（apexドメイン）、2番目が独自ドメインにwwwを付けたサブドメイン、3番目がvercelで公開する場合には必要になるvercelデフォルトドメインです。2番目のwww付きのサブドメインでWebサイトが公開されており（production）、上段のapexドメインと3番目のvercelドメインはwww付きのドメインにリダイレクトされます（Vercelで推奨される構成）。ドメインの伏せてある部分は、通常の半角英数字です。
apexドメインとwwwサブドメイン – Vercelでは後者推奨
インターネット上のサイトでは、wwwの付いたドメインに公開されたものと、wwwが付かないapexドメインに公開されたものがあります。www付きのドメインは広く認知されていますが、本体はwwwの付かないapexドメインのサブドメインです。ドメイン取得サービスで取得されるもapexドメインです。
Webアプリやホームページを、apexドメインのみで運用することは推奨されず、通常はwwwサブドメインを設定します（wwwを付けたアクセスが多いため）。ただ、両者を共存させるとSEO上不利なことから、通常は一方を他方にリダイレクトさせます。本ブログではwww.yoheiko.comへのアクセスをyoheiko.comへリダイレクトさせていますが、Google、Amazonなど多くのサイトではapexドメインをwwwサブドメインへリダイレクトさせており、Vercelでもそのような設定が推奨されます。下記はVercelでのドメイン設定画面です。2番目、3番目も選べますが、一番上がRecommendedとあります。
この設定が推奨される理由は下記の通りです。より高速で、信頼性があり、セキュリティー上も向上するとのことです。
This allows the Vercel Edge Network more control over incoming traffic for improved reliability, speed, and security. The redirect is also cached on visitor’s browsers for faster subsequent visits.
Vercel – Docs – Deploying & Redirecting Domains
Vercelでの独自ドメイン設定方法
Vercelでは、当初から独自ドメインのみでWebサイトを公開することはできず、いったんはVercelドメイン（冒頭のゴールイメージの3番目）のWebサイトを公開する必要があります。例えば下記は、私がVerecelで運用中の簡単なWebアプリのドメインです。独自ドメインの設定がなく、verce.appドメインのみで公開されています。Vercelでのサイト・アプリの公開方法は私のこちらの記事「VercelにNext.jsアプリをデプロイする方法」をご覧ください。
続いてプロジェクト内からSettings – Domainsと進み、上段のテキストボックスにドメインを記入、Addを押します。
Addを押すと、次のようなメッセージが表示されます。Invalid Configurationと表示されている間は設定未完了です。TypeをA、名称を@、Value（値）を76.76.21.21としてDNSサーバーに設定するよう指示されます。76.76.21.21はVercelのIPアドレスです。
ここでVercelを離れて、DNSサーバーに移動します。下記はConohaの事例です。Conohaでは独自ドメインを取得した後、管理画面の左サイドバーのDNSをクリック、右上の+ドメインをクリックして取得したドメインを入力すると、無料でDNSを利用できます。
下記が初期状態のDNSレコードです。Conohaのネームサーバーが3つされています。他社のDNSを使う場合でも、当初はConohaと同様にネームサーバーだけが登録されていると思います（個数はそれぞれ）。
ここにVercelで指定された、タイプA、名称@、値が76.76.21.21のレコードを追加します。下記が追加後です。TTLは任意の値を設定できますが、ここではConohaのネームサーバーと同じ3600を設定しました。
レコードを追加後Vercelに戻り3-5分ほどすると、下記のようにapexドメインがValid Configurationになります。SSL Certificatesの設定が完了するまではValid Configurationの表示とInvalid Configurationの表示を行き来します。
下段のwwwサブドメインを見ると、TypeをCNAME、名称をwww、Value（値）をcname.vercel-dns.com.としてDNSサーバーに設定するよう指示されます。
DNSサーバーに戻り。タイプAレコードを追加したときと同様の方法でCNAMレコードを追加します。下記がDNSサーバーの完成形です。
再度Vercelに戻り3-5分ほど待つと、Vercel側で全てのドメインがValid Configuration。最後に、3番目のvercelドメインも、そのままではSEO上競合するので、wwwドメインへのリダイレクト設定をします（下記はリダイレクトの設定後、再掲）。
本稿でも触れたConohaが気になる方は、下記の画像リンクをクリックしてみてください（定期的に約20%～50%offのキャンペーンをしております）。本YoheiKoブログもConoha WingサーバーとConohaで取得したドメインで動いております。
今日も最後まで読んで頂きありがとうございました。
