WordPressをNext.jsでヘッドレス化する際に躓いたDNS設定

Vercelへのデプロイまでは前回の記事で紹介した通りだが、実はもう一山あった。「本番ドメイン（t-creative-works.com）をどうやってVercel側に向けるか」というDNSの切り替え作業だ。普段あまり意識しない領域だったので、整理しながら記録しておく。

今回やりたかったこと

元の構成はシンプルで、本ドメインにアクセスすると全部Xserver上のWordPressが応答していた（表示も管理画面も同じ場所）。これを以下のように分離する。

変更前：t-creative-works.com          → Xserver（WordPress・表示＋管理画面）

変更後：t-creative-works.com          → Vercel（Next.js・表示専用）
        cms.t-creative-works.com      → Xserver（WordPress・APIバックエンド＋管理画面専用）

本ドメインの表示はVercel（Next.js）に任せ、WordPressは新しいサブドメインに退避させて「記事データを配信するAPI」兼「管理画面」専用にする、という狙いだ。

ステップ1：Vercel側にドメインを登録する

Vercelのプロジェクト設定の「Domains」で、本ドメインを追加する。

ここで1つ注意点がある。「Redirect apex domains to www」というチェックボックスがデフォルトでONになっているのだが、これはt-creative-works.comへのアクセスをwww.t-creative-works.comにリダイレクトする設定だ。

今までずっとwwwなしのURLを正式なものとして使ってきていたので、ここはチェックを外した。既存のURL構造（記事URL・REST APIのlink・guidなど）と食い違うと、無駄にSEO上のリスクを増やすことになる。

追加すると「Invalid Configuration」と赤く表示されるが、これは異常ではない。まだDNS側を何も変更していないので当然の状態だ。この時点で、Vercelが「このレコードを設定してください」という具体的な値を教えてくれる。

Type: A
Name: @
Value: 216.198.79.1

ステップ2：DNSはどこで設定するのか問題

ここで最初につまずいた。「ドメインの設定」と聞くと、ドメインを購入したレジストラ（今回はお名前.com）の管理画面を開くのが自然な発想だと思う。

実際、お名前.comには「DNSレコード設定」という、まさにそれらしい機能がある。しかし、お名前.comの当該ページにはこう書いてあった。

DNSレコード設定を利用するドメインは以下のネームサーバーを設定してください：01.dnsv.jp / 02.dnsv.jp / 03.dnsv.jp / 04.dnsv.jp

つまり、お名前.com独自のネームサーバーを使っている場合に限り、お名前.com側のレコード設定が効くという話だった。自分のドメインのネームサーバーが実際にどうなっているか確認したところ

Xserver自身のネームサーバーになっていた。 つまりDNSの実体（電話帳そのもの）はXserver側にあり、お名前.comでいくらレコードを追加しても一切反映されない状態だったのだ。

これは完全に見落としていたポイントで、サブドメイン（cms.t-creative-works.com）をXserverのサーバーパネルから作成した際、お名前.com側で何も作業していないのに自動的に動いた理由もこれで腑に落ちた。

教訓：ドメインを「どこで買ったか（レジストラ）」と「DNSを実際に管理しているのはどこか（ネームサーバー）」は別物。他社レンタルサーバーを使っている場合、ネームサーバーがレジストラ側のままなのか、サーバー会社側に向いているのかを先に確認すべきだった。

ステップ3：Xserver側でDNSレコードを編集する

Xserverのサーバーパネルには、普段使う「ドメイン設定」とは別に「DNSレコード設定」という専用メニューがある。ここに実際の登録済みレコード一覧が表示される。

ホスト名                     種別    内容
t-creative-works.com         A      xxx.xxx.xxx.xxx   ← これを書き換える
www.t-creative-works.com     A      xxx.xxx.xxx.xxx   ← 触らない
*.t-creative-works.com       A      xxx.xxx.xxx.xxx   ← 触らない（ワイルドカード）
t-creative-works.com         MX     t-creative-works.com  ← 触らない（メール）
t-creative-works.com         TXT    v=spf1 ...            ← 触らない（SPF）

一番上の、ホスト名が空欄（＝ルートドメイン）のAレコードだけを、VercelのIP（216.198.79.1）に書き換えた。

ポイントはワイルドカードレコード（*.t-creative-works.com）には一切触らなかったこと。

このレコードのおかげで、サブドメイン（cms.含む）は個別に設定しなくても自動的にXserverを向く仕組みになっている。

ルートドメインの個別レコードだけを上書きすれば、ワイルドカードは影響を受けず、サブドメイン側は今まで通り動き続ける。

MX・TXT（SPF）はメール関連なので、誤って触るとメールが届かなくなるので、ここは絶対に手を出さないよう慎重に進めた。

DNSの仕組みをおさらいしておく

勘違いしやすいポイントなので補足しておく。DNSは「名前→住所（IPアドレス）」を調べる電話帳のようなものだ。

ブラウザがt-creative-works.comにアクセスする際、まずXserverの電話帳に「このドメインのIPアドレスは？」と質問だけする
Xserverは「216.198.79.1です」と回答だけ返す（ここでXserverの役目は終わり）
ブラウザはその回答をもとに、Vercelへ直接接続する

「Xserverを経由してVercelに繋がる」わけではなく、「道を一度聞く相手がXserver、実際に行く先は直接Vercel」という方が正確だ。

この電話帳への問い合わせ結果は一定時間（TTL）キャッシュされるので、都度Xserverに聞きに行くわけでもない。

反映状況の確認は、OSの標準コマンドで十分だった。

nslookup t-creative-works.com 8.8.8.8   # Google Public DNS
nslookup t-creative-works.com 1.1.1.1   # Cloudflare DNS

変更直後はまだ古いIP（Xserver）が返ってくるが、1時間程度でVercelの新しいIPに切り替わった。

切り替え後に起きること

DNSが反映されると、t-creative-works.com/wp-adminにはアクセスできなくなる。本ドメイン配下は全部Vercel（Next.js）に向くため、Next.js側に存在しないパスは404になるからだ。

今後の記事投稿・編集はcms.t-creative-works.com/wp-adminで行うことになる。ログイン情報は、移行時にバックアップ・復元した本番サイトのものがそのまま引き継がれている。

まとめ

「ドメインの登録（レジストラ）」「DNSの管理（ネームサーバー）」「サーバー側の受け入れ設定（Vercelでのドメイン追加）」は、それぞれ別々の概念として整理すべき
他社サーバーを使っている構成では、DNSの実体がレジストラ側かサーバー会社側か、作業前に必ず確認する
ワイルドカードDNSレコードを使っている場合、特定ホストだけを個別レコードで上書きすれば、他のサブドメインには影響しない
切り替え後に旧URL（/wp-adminなど）がどうなるかは、事前に整理してから作業に入ると安心