エックスサーバーでWordPressのブログを運用しながら、同じドメインのサブドメイン（例：app.example.com）でWebアプリを公開する手順を解説します。公開先は Cloudflare Pages で、ネームサーバーは変更しません。ブログには影響を与えずに公開できます。
私もこの方法で、個人開発したWebアプリ「やめた理由」をこのブログのサブドメインで公開しました。そのときの手順と、つまずいたところをまとめます。
この方法の仕組み
やることは、エックスサーバーのDNSに CNAMEレコードを1件追加するだけ です。CNAME は「このサブドメインは、別の名前と同じ場所を指す」という設定です。
| アクセス先 | どこが応答するか | 変更 |
|---|---|---|
example.com、www.example.com | エックスサーバー（WordPress） | なし |
app.example.com | Cloudflare Pages | CNAME を追加 |
ブログ本体やメールの設定には触れないので、WordPress は今までどおり動きます。元に戻したいときも、追加した CNAME を削除するだけです。
Cloudflare では、ドメイン全体を Cloudflare に移す（ネームサーバーを変更する）方法も案内されますが、サブドメインだけならその必要はありません。
前提
- エックスサーバーでドメインを使っている（サーバーパネルにログインできる）
- 公開したいサイトやアプリのソースが GitHub にある
- Cloudflare のアカウント（無料）を作っている。登録後に「ドメインを追加」を案内されても、追加せずに進めて構いません
手順1：DNS の管理先を確認する
まず、ドメインの DNS をどこで管理しているかを確認します。Windows なら PowerShell かコマンドプロンプトで次を実行します。
nslookup -type=NS example.com結果に ns1.xserver.jp 〜 ns5.xserver.jp が出れば、DNS はエックスサーバーのサーバーパネルで管理しています。この記事はその場合の手順です。
あわせて、公開したいサブドメインが今どうなっているかも見ておきます。
nslookup app.example.comブログと同じ IP アドレスが返ってきても心配いりません。エックスサーバーの DNS には「どんなサブドメインもサーバーを指す」ワイルドカード（*）の設定が入っていることがあり、その場合は存在しないサブドメインでも IP が返ります。CNAME を追加すると、そのサブドメインだけが CNAME の指す先に切り替わり、ほかは変わりません。
手順2：Cloudflare Pages でプロジェクトを作る
- Cloudflare のダッシュボードで、左メニューの Workers & Pages を開き、Create application を押します。
- 「Make something new」の画面が出たら、一番下の「Continue to Pages」のリンクを押します。上の「Connect GitHub」を選ぶと、Pages ではなく Workers として作られます。
- Pages の画面で Import an existing Git repository（または Connect to Git）を選び、GitHub と連携します。GitHub の画面では Only select repositories を選び、公開するリポジトリだけを許可すると安全です。
- リポジトリを選んで Begin setup を押し、ビルド設定を入力します。
| 項目 | 入力する値（Vite の場合の例） |
|---|---|
| Project name | 好きな名前。名前.pages.dev の URL になる |
| Production branch | main |
| Build command | npm run build |
| Build output directory | dist |
- Save and Deploy を押すとビルドが始まり、数分で
名前.pages.devが表示されます。この URL でサイトが開けることを確認してから次に進みます。
Node.js のバージョンが古いとビルドに失敗することがあります。その場合は、リポジトリの直下に .node-version というファイルを置き、中に使いたいバージョン（例：24.14.0）を書きます。
手順3：Cloudflare 側でカスタムドメインを追加する
DNS を設定する前に、先に Cloudflare 側で追加します。 順番が逆だと、接続エラー（522）になることがあります。
- 作ったプロジェクトの Custom domains タブ → Set up a custom domain を押します。
app.example.comを入力して進むと、「Choose setup method」の画面になります。- 右側の My DNS provider の Begin CNAME setup を押します。
- 追加する CNAME の内容が表示されるので、控えておきます（Name：
app、Target：名前.pages.dev）。
左側の Cloudflare DNS（Begin DNS transfer）は、ドメインの DNS 全体を Cloudflare に移す方法です。ネームサーバーの変更になり、ブログやメールにも影響するので、今回は選びません。
手順4：エックスサーバーで CNAME を追加する
- エックスサーバーの サーバーパネル で、ドメイン → DNSレコード設定 を開きます。
- 対象のドメイン（
example.com）の「選択する」を押します。 - DNSレコード追加 タブで次のように入力し、確認画面を経て追加します。
| 項目 | 入力する値 |
|---|---|
| ホスト名 | app |
| 種別 | CNAME |
| 内容 | 名前.pages.dev（手順3で控えた Target） |
| 優先度 | 0 |
TTL（DNS の情報を覚えておく時間）は初期値のままで構いません。
サーバーパネルの「サブドメイン設定」は使いません。 これはエックスサーバー上にサブドメインのサイトを作る機能で、サブドメインがエックスサーバーを指したままになります。今回必要なのは「DNSレコード設定」だけです。
手順5：反映を待って確認する
Cloudflare の Custom domains の画面に戻り、Check DNS records を押します。状態が「Inactive」から 「Active」 に変われば完了です。HTTPS の証明書も自動で発行され、有効になるとメールで知らせてくれます。
すぐに Active にならなくても、設定のやり直しは不要です。世界中の DNS サーバーは、古い情報をしばらく覚えています。反映には数分から数時間かかることがあり、Cloudflare も自動で確認を続けてくれます。
設定が入ったかどうかは、エックスサーバーの DNS サーバーに直接問い合わせると、待たずに確認できます。
nslookup -type=CNAME app.example.com ns1.xserver.jpcanonical name = 名前.pages.dev と表示されれば、エックスサーバー側の設定は正しく入っています。
Active になったら、次の3つを確かめます。
https://app.example.comでサイトが表示され、鍵マーク（HTTPS）が付いているhttp://app.example.comを開くとhttps://に転送される- ブログ（
https://example.com）が今までどおり表示される
手順6：pages.dev の URL を公開用の URL に転送する（推奨）
Cloudflare Pages では、名前.pages.dev でも同じサイトが開けます。入口が2つあると検索エンジンにも利用者にも紛らわしいので、Cloudflare の Bulk Redirects（一括リダイレクト） で公開用の URL に転送します。
- ダッシュボードの検索欄に
Bulk Redirectsと入力して開きます。 - Create Bulk Redirect List でリストを作り、次の転送を追加します。
| 項目 | 値 |
|---|---|
| Source URL | 名前.pages.dev |
| Target URL | https://app.example.com |
| Status | 301 |
| パラメーター | Preserve query string、Subpath matching、Preserve path suffix をオン |
- Create Bulk Redirect Rule でそのリストを選び、Save and Deploy を押します。
「Include subdomains」はオフのままにします。 オンにすると、main 以外のブランチを確認するためのプレビューの URL（ブランチ名.名前.pages.dev）まで本番に転送され、公開前の版を確認できなくなります。私は一度オンにして、この状態になりました。
設定したら、名前.pages.dev が公開用の URL に転送され、プレビューの URL はそのまま表示されることを確かめます。
PWA（Service Worker を使うサイト）の場合は、転送を設定する前に 名前.pages.dev を開いたブラウザで、Service Worker がページを表示し続けて転送されないことがあります。その場合は、そのブラウザで pages.dev のサイトデータを削除してください。
よくあるつまずき
| 症状 | 原因と対処 |
|---|---|
| サブドメインを開くとエックスサーバーのページが出る | 「サブドメイン設定」で作ってしまった、またはまだ DNS が反映されていない。DNSレコード設定の CNAME を確認し、しばらく待つ |
| エラー 522 が出る | Cloudflare 側でカスタムドメインを追加する前に CNAME を追加した。Custom domains で追加して「Active」になるのを待つ |
| いつまでも「Inactive」のまま | CNAME のホスト名や内容の入力ミス。前の節の nslookup で確認する |
| Cloudflare でネームサーバーの変更を求められる | 「Cloudflare DNS」の方を選んでいる。「My DNS provider」（CNAME）を選び直す |
元に戻す方法
エックスサーバーの DNSレコード設定で、追加した CNAME を削除するだけです。ブログ側の設定は変えていないので、ほかに戻す作業はありません。削除すると、そのサブドメインは元の状態（ワイルドカードがあればエックスサーバーを指す状態）に戻ります。
まとめ
- エックスサーバーの WordPress はそのままに、サブドメインで Cloudflare Pages を公開できる
- ネームサーバーは変えず、DNSレコード設定で CNAME を1件追加するだけ
- 先に Cloudflare でカスタムドメインを追加し、「My DNS provider」を選ぶ
- エックスサーバーの「サブドメイン設定」は使わない
- pages.dev は一括リダイレクトで転送し、「Include subdomains」はオフにする
コメント