サブドメインをメインドメインとは別のホスティングサービスにデプロイする

独自ドメインのサイトをVercelにデプロイしていて、サブドメインをVercelとは別のホスティングサービスにデプロイする方法です。

概要

目的はドメイン関連の設定・管理をひとつの場所でまとめて行うことです。

独自ドメイン（メインドメイン）、サブドメインはそれぞれ以下を指します。

ドメイン種類	例
独自ドメイン（メインドメイン）	https://sample.com
サブドメイン	https://sub.sample.com

サブドメインをメインドメインとは別の場所にホスティングする場合DNSの設定が必要です。
DNSの設定はドメインに設定されているネームサーバーで設定されている情報が反映されます。

構成

下記の構成での設定手順になるため、別のサービスで設定する場合はそれぞれのドキュメントに従ってください。

ドメイン種類	ドメイン管理	ホスティング（デプロイ先）
独自ドメイン（メインドメイン）	Xserver（取得元）	Vercel
サブドメイン	Xserverで管理	Cloudflare Pages

設定手順

1. ネームサーバーの設定

Xserver（メインドメインの管理元）のサーバー管理画面にログインして、該当ドメインのネームサーバー設定へ移動します。
ドメイン適用先サービスは「Xserverレンタルサーバー」を選択して、設定を確定します。
※ すでにXserverのネームサーバーで運用している場合は手順2へ進んでください。
※ Vercelのネームサーバーで運用中だった場合は反映まで1日程度かかります。

2. Vercelで独自ドメインを Aレコード方式で登録

Vercel 管理画面で該当サイトの Settings > Domains に移動します。
先ほどネームサーバーを設定したため独自ドメインの画面は以下のようになります ^[1] 。

（Adding & Configuring a Custom Domain | Vercel より流用）

3. XserverでAレコードを設定する

Xserverのサーバーパネルにログインし、設定対象ドメインで該当の独自ドメインを選択します。
ドメイン > DNSレコード設定 > DNSレコード一覧 へ進み、メインドメインの向き先をVercelにするため、設定を変更します。
wwwあり/なしのどちらも設定を変更します。

wwwなし

• ホスト名: 空欄
• 種別: A
• 内容: Vercelのドメイン設定画面で表示された Value の値
  

wwwあり

• ホスト名: www
• 種別: CNAME
• 内容: Vercelのドメイン設定画面で表示された Value の値
  

4. サブドメインを設定する

サブドメインで運用したいサイトをCloudflare Pagesにデプロイします。
デプロイ完了後、概要ページの「カスタム ドメイン」のタブを開き、「カスタム ドメインを追加」をクリックします。
設定したいサブドメインを入力して続行します。

DNSの設定方法を選択する画面に移動するので、「自分の DNS プロバイダー」を選択します。

概要ページの「カスタムドメイン」のタブから「DNSセットアップ実行」を開いてDNS設定用のコードを確認します。

5. サブドメインのDNSレコードを設定する

手順3と同じXserverのサーバーパネルから「DNSレコード設定 > DNSレコード追加」へ移動して、先ほどのDNS設定用のコードでXserverに登録します。

• ホスト名: Cloudflare Pages 管理画面の「DNSセットアップ実行」の 名前
• 種別: CNAME
• 内容: Cloudflare Pages 管理画面の「DNSセットアップ実行」の ターゲット
  

設定完了後、Cloudflare Pages管理画面の概要ページから「カスタムドメイン」のタブへ再度移動し、「DNS レコードを確認」をクリックします。

設定したサブドメインが「アクティブ」となったら設定完了です 🎉

脚注

1. Nameserversを選択すると、サブドメインの DNS の設定・管理はVercelのドメイン設定で行うことになります。