エックスドメインのサブドメインをVercelに設定する方法：DNSのCNAME設定

VercelでWebアプリを公開したあと、app.example.comのように、自分のドメインのサブドメインでアクセスできるようにしたい。この記事では、エックスドメイン（現在のXServerドメイン）側でDNSレコードを設定し、Vercelのプロジェクトにつなぐ手順を説明します。

基本の流れは、Vercelにサブドメインを追加し、表示されたCNAMEの値をエックス側のDNSへ登録することです。既存のブログをexample.comに残し、アプリだけをapp.example.comで公開する構成を例に進めます。

設定するものと、用意しておくもの

この記事のexample.comは説明用です。操作するときは自分が所有するドメインへ置き換えてください。appの部分も、使いたい名前に変更できます。

先に、Vercelの本番デプロイが成功し、発行されたvercel.appのURLでアプリが開けることを確認します。まだデプロイしていない場合は、VercelでWebアプリを公開する手順から進めてください。Vercelのプロジェクト設定と、ドメインのDNSを編集できるアカウントも必要です。

この例では、ドメインの移管やネームサーバーの切り替えは行いません。example.com自体のAレコードやメール用のMX・TXTレコードは残し、app.example.comの向き先だけを設定します。

1. 今使っているネームサーバーを確認する

最初に確認したいのは、ドメインの購入先と、DNSレコードを編集する場所は必ずしも同じではないという点です。エックスドメインで購入していても、ネームサーバーがエックスサーバーのものなら、DNSはサーバーパネルで編集します。

1. XServerアカウントへログインします。
2. 対象ドメインの右側にあるクイックメニューから「ネームサーバー設定」を開きます。
3. 現在設定されているネームサーバー名を確認します。ここでは変更を保存せず、確認だけで戻ります。

以降は、エックスドメインのネームサーバーを使っている場合を中心に説明します。エックスサーバーのものを使っている場合は、手順3の補足を読んでください。編集場所の区別はXServerの公式サポート案内、確認画面はXServerドメインの公式マニュアルを参照できます。

「DNS画面に追加したのに反映されない」ときは、まずこの確認に戻ります。現在参照されていないDNSへ追加しても、公開先は変わりません。

2. Vercelにサブドメインを追加する

1. Vercelのダッシュボードで、接続したいプロジェクトを開きます。
2. 「Settings」→「Domains」へ進みます。
3. 「Add Domain」からapp.example.comを追加します。https://や末尾の/は付けません。
4. 環境を選ぶ画面が出る場合は、今回公開したい本番環境（Production）を選びます。
5. 追加したドメインの設定案内で、DNSレコードのType・Name・Valueを確認します。

サブドメインの場合は、通常CNAMEの設定が案内されます。Vercelの公式資料では、接続先はプロジェクト固有の値とされています。この記事や別の記事に載っている固定値ではなく、自分のDomains画面に表示されたValueを使ってください。

DNS未設定の段階で「Invalid Configuration」などの表示が出ても、この時点だけでデプロイ失敗と判断する必要はありません。次の手順でDNSを設定し、再確認します。

3. エックスドメインにCNAMEレコードを追加する

変更前に、現在のDNSレコード一覧を保存しておきます。スクリーンショットやメモで、ホスト名・種別・内容・TTLを残しておけば、入力を間違えたときに元の値を確認できます。

1. XServerアカウントのドメイン一覧で、example.comのクイックメニューを開きます。
2. 「DNSレコード設定」を選びます。
3. ページ下部の「DNSレコード設定を追加する」を選びます。
4. 次の表に沿って入力します。
5. 「確認画面へ進む」で登録されるホスト名と内容を確認し、レコードを追加します。

ホスト名の欄に.example.comが別表示されている場合、入力するのはappの部分だけです。確認画面や追加後の一覧で、登録先がapp.example.comになっていることを確認します。app.example.com.example.comのような二重入力や、空欄のまま親ドメインへ登録する間違いを防ぎます。

CNAMEの「内容」には、URLではなく接続先のホスト名を入力します。https://、パス、IPアドレスを入れたり、デプロイ時のvercel.appのURLへ自己判断で置き換えたりしないでください。入力画面の流れと項目は、DNSレコード編集の公式マニュアルと外部サービスへの接続例で確認できます。

VercelのValue末尾に「.」が付いている場合

VercelのCNAME値は、完全なホスト名であることを示すため、最後にドットが付く場合があります。Vercelの一般的な案内ではドットを含めてコピーしますが、XServer側の公式案内は、他社指定の値の末尾のドットを省いて入力するものです。この入力欄ではXServerの形式に合わせます。

コピーした値の末尾が.com.なら、エックス側では最後のドット1文字を除いて.comにします。途中のドットや英数字は変えません。詳しくはXServer公式案内のDNSレコード設定欄とVercelのAbsolute CNAME recordsの説明を参照してください。他のDNSサービスを使う場合は、そのサービスの入力形式に従います。

同じサブドメインのレコードが既にある場合

app.example.comにA・AAAA・CNAMEなどが既にある場合は、その用途を確認します。別のサイトやメールで使っている名前なら、未使用のサブドメイン名を選ぶ方が変更範囲を小さくできます。

同じホスト名にCNAMEと他のレコードを重ねないでください。既存のapp.example.comをVercelへ切り替える場合だけ、保存した元の設定を確認して競合するレコードを整理します。example.com、www.example.com、mail.example.comなど、今回と別の名前のレコードは変更対象にしません。

ネームサーバーがエックスサーバーの場合

ns*.xserver.jpを使っている場合は、サーバーパネルの「DNSレコード設定」で対象ドメインを選び、「DNSレコード追加」へ進みます。ホストをapp、種別をCNAME、内容をVercelの指定値にする考え方は同じです。操作入口はエックスサーバーの公式マニュアルを確認してください。

Vercelへつなぐために、エックスサーバーへアプリのファイルをアップロードする必要はありません。サーバーパネルの「サブドメイン設定」はエックスサーバー側でサイトを動かすための設定であり、今回のCNAME設定とは役割が異なります。

4. Vercelで設定とHTTPSを確認する

1. Vercelの「Settings」→「Domains」へ戻ります。
2. 再確認のボタンがあれば押し、DNSの設定エラーが解消したかを確認します。
3. 証明書の発行状態を確認します。
4. ブラウザでhttps://app.example.comを開き、意図したアプリが表示されることを確認します。

DNSの保存完了と、インターネット全体での反映完了は別です。XServerドメインの外部サービス接続マニュアルでは反映に24時間程度の目安が示されていますが、環境やキャッシュによって変わります。表示が変わらないときは、入力値と編集場所を確認したうえで待ち、何度も値を変更しないようにします。

通常のサブドメインでは、DNSが正しくVercelへ向き、証明書の検証が通ると、VercelがHTTPS用の証明書を自動で用意します。エックスサーバー側の無料SSLを、このVercelのアプリ用に設定する手順は不要です。仕組みはVercelのSSL公式資料を参照してください。

最後に、次の点も確認します。

• URLがapp.example.comのままで、想定外のサイトへ移動しない。
• ブラウザに証明書の警告が出ない。
• トップだけでなく、主要な画面や操作が動く。
• もともとのexample.comのブログが引き続き開ける。
• 既存のメール設定を触っていない。既存レコードを整理した場合は、そのサービスも確認する。

うまくいかないときの確認順

Invalid Configurationが消えない

まず現在のネームサーバーに対応する場所で編集したかを確認します。次に、登録先がapp.example.comか、種別がCNAMEか、内容が自分のVercelプロジェクトの指定値かを確認します。同じホスト名のA・AAAAなどが残っていないかも見ます。設定が一致していれば、DNSの反映を待って再確認します。

所有確認でTXTを求められる

別のVercelアカウントやプロジェクトとの関連などにより、TXTによる確認を求められることがあります。その場合だけ、画面に表示されたTXTのNameとValueを、同じDNS管理画面へ追加します。TXTは所有確認、CNAMEはアプリへの接続先で、目的が違います。

Nameが_vercel.example.comなら、example.comを自動で補う入力欄では_vercelを入力します。別の名前が指定される場合もあるので固定で使わず、確認画面でVercelの指定名と一致させてください。Valueも画面の値を使います。詳しくはVercelのドメイン所有確認の資料を参照できます。

DNSは通るのに、HTTPSやログインが動かない

HTTPSの警告が出る場合は、Vercel側の証明書の状態を見ます。既存のCAAレコードやプロキシ設定が証明書の検証を妨げることもあるため、警告の内容をVercelのトラブルシューティングと照合します。原因を確認せずCAAやメールのレコードを削除しないでください。

ページは開けるのにログインやAPIだけが失敗する場合は、アプリ側で許可しているURL、OAuthのコールバック先、CORSや環境変数を確認します。新しいURLが必要な設定へ追加されているかを調べ、利用サービスの手順に従って反映します。DNSの変更だけで、アプリ内のURL設定まで自動で更新されるとは限りません。

公開できたら、設定を記録しておく

接続したサブドメイン、Vercelのプロジェクト名、DNSを編集した場所、変更前後のレコードを手元に残しておくと、別のアプリを公開するときや、公開を終了するときに判断しやすくなります。Vercelのプロジェクトを削除する際は、残ったCNAMEが不要な接続先を指し続けないかも確認します。

この記事の入力例は、app.example.comという1つのサブドメインを接続するためのものです。*.example.comのワイルドカードや、example.com自体の移転では、必要なDNS・証明書設定が異なります。

参考にした公式資料

2026年10月11日に公式資料を確認しました。手順と入力例はこれらの資料に基づきます。管理画面の名称が変わった場合は、リンク先の案内と実際に表示される設定値を優先してください。

• XServerドメイン：ネームサーバーの設定
• XServerドメイン：DNSレコードの編集
• XServerドメイン：外部サービスへのDNS設定例
• エックスサーバー：DNSレコードの編集
• XServer公式サポート：DNSの編集場所と値末尾のドットの扱い
• Vercel：カスタムドメインの追加・設定
• Vercel：ドメインのトラブルシューティング
• Vercel：SSL証明書
• Vercel：ドメインの所有確認