エックスサーバーで借りたドメインのサブドメイン使用し、Vercelにカスタムドメインを設定する

過去にドメイン関係のトラブルに見舞われたことがある。

ドメイン関係のトラブルはクリティカルなので非常にそわそわする。

そんな時エックスサーバーのサポートが手厚く、以来、レンタルサーバー・ドメインはエックスサーバーにお世話になっている。

そのため、今回新たに作成したWebサービスもエックスドメインで借りたドメインのサブドメインに紐づけることにした。

サーバーはVercelに浮気した。

エックスサーバーでサブドメインを作成する

前述したとおり、エックスサーバーは非常にサポートが充実している。

なので、サブドメインの作成を改めてここに書く必要なんてない。

公式が最も正しく、詳しい。

サブドメイン設定を参考にサブドメインを作成する。

大前提としてVercelにプロジェクトが既にあるという体で進めていく。

SettingsタブをクリックしProject Settingsページに遷移する。

サイドナビのDomainsをクリックし、inputに作成したサブドメインを入力しAddボタンをクリックする。

https://は不要なので注意。

Invalid Configurationという警告がでるが、Vercelに認識はしてもらった。

DNSレコード設定をクリックしDNSレコード一覧から対象ドメインを選択し変更ボタンをクリックする。

ここでDNSレコードが設定できるので、下記のように設定する。

上記設定を追加し、しばらく待つ。

サービスを作成すると独自に、割り当てられるドメインがある。

service-name.vercel.app

のようなやつ。

独自ドメインを設定した暁には、このドメインをリダイレクトするのがいいと思われる。

先ほど設定したドメインの下にこのドメインがあると思うので、Editボタンをクリックすると、Redirect toというセレクトボックスがある。

そこに先ほど設定したドメインが表示されると思うので、選択し、Saveすればリダイレクトが完了する。

もしこの設定を行わないとGoogleのクローラーはどのように判断するのだろうか。

コピーサイトと間違われることもありそうなので、リダイレクトはしたほうがいい。

ただサブドメインを使用する場合は、友人に共有したいけどメインドメインがばれるのが嫌という人も多いだろう。

その場合はシェア用に取っておくのも有りかもしれない。

5分くらいでValid Configurationが上記のような表記に変更された。

実際に設定したドメインを訪れると作成したサービスにアクセスすることができた。

キャッシュを消さないと見れないかもしれないので注意が必要。