XServerのサブドメインをVercelで活用する方法｜手順とメリットを徹底解説

Serverで管理するドメインを活用して、Vercelでホスティングしたウェブアプリやサイトを公開したいと考えたことはありませんか？この記事では、サブドメインを活用して効率的に新しいプロジェクトを公開する方法を詳しく解説します。Vercelの設定からXServerのDNS構成まで、初心者にもわかりやすく手順を追って説明。サブドメインのメリット・デメリットも併せて紹介し、実際の設定で役立つ具体的なヒントも提供します。これを読めば、ドメイン管理がもっと簡単に！

サブドメイン設定のメリットとデメリット
Vercelでのサブドメイン追加手順
エックスサーバーでのDNSレコード設定
設定完了の確認
まとめ

サブドメイン設定のメリットとデメリット

サブドメインを活用するか、フォルダ（例: example.com/blog）で管理するかは、プロジェクトの規模や目的、SEO戦略に応じて選択するのがおすすめです。

メリット

コストの削減
既存のドメインを活用するため、新たなドメインを購入する必要がありません。
明確なコンテンツ分離
サブドメインを利用すれば、メインサイトとは異なるコンテンツを効率的に整理できます。たとえば、「blog.example.com」でブログ、「shop.example.com」でECサイトを運営するといった用途に適しています。
SEO対策の柔軟性
サブドメインごとに異なるターゲットキーワードでSEOを最適化することが可能です。
柔軟な運用環境
メインドメインとサブドメインで異なるホスティングサービスや技術スタックを使用できます。たとえば、メインサイトはWordPress、サブドメインはVercelでホスティングするなど。

デメリット

管理の複雑さ
サブドメインごとにDNS設定やSSL証明書の管理が必要になり、手間が増えることがあります。
SEO効果の分散
サブドメインを利用すると、メインドメインとサブドメインでSEO評価が分散される可能性があります。そのため、検索エンジンの評価を一本化したい場合にはデメリットになることも。
追加の技術的な作業が必要
サブドメインの設定やDNSレコードの変更など、初期設定に一定の技術的な知識が求められます。
一部のユーザー体験への影響
サブドメインが別サイト扱いとなる場合、ユーザーが再度ログインを求められるなど、一貫した体験が提供しにくくなるケースがあります。

Vercelでのサブドメイン追加手順

1. Vercelのプロジェクト設定にアクセス

まず、Vercelのダッシュボードにログインし、対象のプロジェクトを選択します。その後、プロジェクトの設定画面に移動します。

ダッシュボード内で該当プロジェクトをクリックします。
左側メニューから「Settings」を選択します。

2. サブドメインの追加

次に、Vercelで使用するサブドメインをプロジェクトに追加します。

「Settings」ページの中から「Domains」セクションを探します。
フィールドに使用したいサブドメインを入力（例: app.example.com）して、「Add」ボタンをクリックします。

3. DNS設定情報の確認

Vercelが提供するDNS設定情報を確認します。この情報は後ほどエックスサーバー側で必要となるため、控えておきます。

通常、CNAMEレコードとして設定するべきホスト名（例: cname.vercel-dns.com）が表示されます。
必要に応じて、TXTレコードの情報も確認しておきます（ドメイン所有の確認に使われる場合があります）。

4. サブドメインの確認

サブドメインが正しく追加された場合、Vercel上でステータスが「Connected」に変わります。この状態になれば、設定が成功しています。

注意点

サブドメインを正しく運用するためには、エックスサーバー側でのDNS設定が必要です（後述）。
反映には数分から48時間程度かかる場合があります。
HTTPS（SSL証明書）はVercelが自動で生成・管理するため、追加作業は不要です。

エックスサーバーでのDNSレコード設定

1. サーバーパネルにログイン

エックスサーバーのサーバーパネルにアクセスし、管理するアカウントでログインします。

2. ドメイン設定画面に移動

ログイン後、以下の手順でサブドメインを設定するドメインの管理画面に進みます。

メインメニューから「ドメイン」タブを選択します。
「DNSレコード設定」をクリックし、管理するドメインを選択します。

3. DNSレコードの追加

DNSレコードの設定画面で、Vercelの指示に従いCNAMEレコードを追加します。

「DNSレコード追加」ボタンをクリック
対象ドメインの「DNSレコード追加」を選択します。
以下の情報を入力
Vercelから提供されたCNAMEレコード情報を基に設定を行います。
- ホスト名: サブドメイン名（例: app）
- 種別: CNAME
- 内容: cname.vercel-dns.com（Vercelが指定する値）
- TTL: 3600（デフォルト値で問題ありません）
設定の保存
設定を確認し、「追加」ボタンを押して保存します。

4. 設定の反映待ち

DNS設定が反映されるまで数分から最大48時間程度かかる場合があります。反映完了後、サブドメインが正しくVercelに接続されているかを確認してください。

注意事項

エックスサーバーでのDNS設定を変更する際は、メインドメインや他のサービスに影響を与えないよう注意してください。
既存のDNS設定が適切であるか事前に確認し、不明な点があればサポートに問い合わせることをおすすめします。
サブドメインの運用開始後は、Vercel側でHTTPSが自動設定されます。エックスサーバーでSSL証明書を設定する必要はありません。

設定完了の確認

1. Vercelのダッシュボードで確認

Vercel側でサブドメインが正しく接続されているかを確認します。

Vercelダッシュボードで対象プロジェクトを開きます。
左側メニューの「Settings」から「Domains」を選択します。
追加したサブドメインのステータスが「Connected」と表示されていれば、設定が正常に完了しています。

2. ブラウザでの動作確認

サブドメインが正しく動作しているかをブラウザで確認します。

サブドメイン（例: https://app.example.com）にアクセスします。
正常にホストしたプロジェクトのページが表示されれば成功です。

3. DNS設定の確認（オプション）

反映が遅れている場合、DNS設定を確認して問題を特定します。

オンラインのDNS確認ツールを使用:
「DNS Checker」などのツールを使用して、サブドメインのCNAMEレコードが正しくVercelのアドレス（例: cname.vercel-dns.com）を指しているか確認します。
コマンドラインで確認:
コマンドラインから以下のコマンドを実行してDNSレコードをチェックできます。
```
nslookup app.example.com
```

4. SSL証明書の有効化確認

Vercelでは自動的にSSL証明書が発行されますが、以下の方法で確認してください。

サブドメインに「https://」でアクセスします。
ブラウザのアドレスバーに鍵アイコンが表示されていれば、SSL証明書が有効化されています。

5. エラーチェック（問題がある場合）

もし正しく動作しない場合、以下を再確認してください。

CNAMEレコード: エックスサーバー側の設定が正しいか確認。
Vercelのドメイン設定: サブドメインを正確に追加しているか確認。
反映時間: DNS設定の反映には最大48時間かかることがあります。

設定完了後の次のステップ

設定が完了したら、以下を検討するとさらに効果的です。

SEO対策: サブドメイン専用のSEO施策を実施。
パフォーマンスチェック: サイト速度やパフォーマンスの最適化。
バックアップ: 設定変更前後のバックアップポリシーを検討。

これらの確認を行えば、安心してサブドメインの運用を開始できます！

まとめ

エックスサーバーで取得したサブドメインをVercelで活用する方法について解説しました。この記事で紹介した手順を振り返りつつ、重要なポイントをまとめます。

サブドメイン設定のメリットとデメリットを理解
- サブドメインはコスト削減やコンテンツの分離に便利ですが、SEO評価の分散や管理の手間に注意が必要です。
Vercelでサブドメインを追加
- Vercelのダッシュボードでプロジェクトを設定し、指定されたCNAMEレコード情報を取得します。
エックスサーバーでDNSレコードを設定
- エックスサーバーの管理画面で、サブドメインに対応するCNAMEレコードを登録。反映には数分から48時間程度かかることがあります。
設定の確認と動作テスト
- Vercelのステータス表示やブラウザでのアクセス、DNS確認ツールを使って設定が正しいか確認します。