XserverドメインをVercelに設定してwww付き運用にした話

Xserverで取った独自ドメインをVercelで動かしているサイトに設定しようと、軽い気持ちで作業を始めました。本当は、wwwあり・なしのどちらでもアクセスできるようにして、最終的にはwwwなしにリダイレクトさせるつもりでした。

ところが、設定を進めるうちにVercelは公式にwwwサブドメインでの運用を推奨していることが判明。意図とは逆でしたが、安定動作のため今回はwwwありにリダイレクトする形で落ち着きました。

この記事では、そんな私の試行錯誤を交えながら、

• XserverのドメインをVercelに設定する手順
• wwwあり・なし両方からアクセスできるようにしてリダイレクトする方法
• www推奨の背景と注意点

を、これから同じ作業をする人が迷わないようにまとめています。

前提条件

この記事の手順を進めるには、あらかじめ以下の準備が必要です。

• Xserverで独自ドメインを取得していること
  例：example.com のようなドメインをXserverの契約で確保している。
• Vercelにデプロイ済みのWebサイトがあること
  すでにVercel上で公開されているプロジェクトがあり、そのURLでアクセスできる状態である。
• XserverとVercelのアカウント情報にアクセスできること
  どちらもログインできる状態で、設定変更が可能であること。

この記事は、この前提条件を満たしていることを前提に解説を進めます。

手順1：Vercelでドメインを追加する

まずはVercel側で、Xserverのドメインを受け入れる設定を行います。

1. Vercelにログイン
   Vercel公式サイトにアクセスし、アカウントにログインします。
2. 対象プロジェクトを選択
   ダッシュボードから、独自ドメインを設定したいプロジェクトをクリックして開きます。
3. 「Domains」タブへ移動
   プロジェクトの設定画面にある「Domains」タブを開きます。
4. ドメインを入力して追加
   「Add」欄にXserverで取得したドメイン（例：example.com）を入力し、Addボタンをクリックします。
5. モーダルの内容を確認し追加
   表示された「Add Domain」モーダルで設定内容を確認し、再度Addを押します。

追加直後はドメインのステータスが「Invalid Configuration（無効な設定）」になっていますが、これはDNSの設定がまだ反映されていないだけなので問題ありません。

手順2：VercelでDNS情報を確認する

Vercelにドメインを追加すると、そのドメインを正しく接続するためのDNS情報が表示されます。これを後でXserver側に登録します。

1. 追加したドメインを一覧で確認
   「Domains」タブに、先ほど追加したドメイン（例：example.com）が表示されていることを確認します。
2. ステータスは「Invalid Configuration」でOK
   この段階ではまだDNS設定をしていないため、ステータスは「Invalid Configuration」になっています。
3. DNS設定情報を表示
   該当ドメインをクリックすると、必要なDNSレコード情報（CNAMEレコード）が表示されます。

このDNS情報を次のステップでXserverに登録します。

手順3：XserverでDNSレコードを設定する

Vercelから取得したDNS情報を、Xserverの管理画面で登録します。これにより、ドメインとVercelのプロジェクトが紐づきます。

1. Xserverにログイン
   Xserverのサーバーパネルからログインします。
2. 対象ドメインを選択
   「ドメイン設定」または「DNSレコード設定」から、今回Vercelに接続するドメインを選びます。
3. DNSレコード追加画面を開く
   「DNSレコード設定を追加する」ボタンをクリックします。
4. Vercelの指示に従って入力
   • Aレコードの場合
     • ホスト名：空欄
     • 種別：A
     • 内容：Vercelから提供されたIPアドレス
   • CNAMEレコードの場合
     • ホスト名：www（または指定された値）
     • 種別：CNAME
     • 内容：Vercelから提供されたドメイン名
5. 設定を追加
   入力内容を確認し、「確認画面へ進む」→「追加する」をクリックします。

登録が完了したら、DNSレコード一覧に新しい設定が表示されていることを確認します。

手順4：設定反映の確認とリダイレクト設定

DNSレコードを追加しても、すぐに反映されるわけではありません。反映後は、wwwあり・なしの両方でアクセスできるようにし、最終的にどちらかへリダイレクトをかけます。

1. 反映を待つ
   DNSの変更は即時反映される場合もありますが、最大48時間程度かかることがあります。しばらく時間を置き、digコマンドやDNS確認サイトでレコードが更新されているか確認します。
2. Vercel側でステータスをチェック
   「Domains」タブに戻り、ステータスが「Valid」になっていれば接続成功です。
3. wwwあり・なし両方を設定
   • 裸ドメイン（example.com）とwww付き（www.example.com）の両方をVercelに登録します。
   • これでどちらでもアクセスできる状態になります。
4. リダイレクト先を決める
   本当はwwwなしにリダイレクトしたかったのですが、Vercelは公式にwww付き運用を推奨しているため、今回はwww付きに統一しました。
5. リダイレクト設定
   Vercelのドメイン設定画面で、リダイレクト先を「Primary Domain」に指定します。これにより、wwwなしでアクセスしても自動的にwww付きへ転送されます。

手順5：SSL証明書と動作確認

ドメインが正しく接続されたら、HTTPSで安全にアクセスできるようSSL証明書を確認します。

1. SSL証明書の発行を確認
   Vercelは、Let’s Encryptを利用して自動的にSSL/TLS証明書を発行します。ドメイン設定画面で「Valid Certificate」と表示されていればOKです。
2. 実際にアクセスして確認
   ブラウザでhttps://www.example.com（www付き）にアクセスし、サイトが正しく表示されるかを確認します。
3. リダイレクト動作のチェック
   裸ドメイン（例：https://example.com）にアクセスしても、自動的にwww付きへ転送されるかを確認します。
4. 警告やエラーがないか確認
   ブラウザのセキュリティアイコン（鍵マーク）が緑色または有効表示になっていることを確かめます。

注意点

• DNS反映には時間がかかる
  早ければ数分で反映されますが、最大48時間かかることもあります。慌てず待ちましょう。
• www付きと裸ドメインの両方を登録する
  どちらからもアクセスできるようにしておくと、ユーザーの入力ミスやブックマーク違いを防げます。
• リダイレクト先は事前に決めておく
  今回はVercelの推奨に従いwww付きへ統一しましたが、将来的に方針を変える場合は、SEOやリンク切れの影響も考慮する必要があります。
• SSL証明書は自動更新されるが、ドメイン設定変更時は再確認
  証明書は自動更新されますが、DNS設定を変更した場合などは、再度有効化が必要になることがあります。

まとめ

今回は、Xserverで取得した独自ドメインをVercelに設定し、www付き運用に統一するまでの流れを紹介しました。

本当はwwwなしをメインにしたかったのですが、Vercelの推奨やCNAMEの制約などの理由から、最終的にはwww付きへリダイレクトする形に。結果的に、wwwあり・なし両方でアクセス可能にしつつ、安定した運用ができるようになりました。

同じように「wwwあり・なしのどちらで運用すべきか」で迷っている方も、まずはVercelの推奨に合わせてwww付きにしてみるのがおすすめです。後から方針を変えることもできますし、今回の手順を知っていればスムーズに切り替えられるはずです。