Makonote

Cloudflare Pagesの独自ドメイン設定で詰まりやすいポイント5選

Cloudflare Pagesに独自ドメインを設定するとき、画面上はそれっぽく進んでいるのにサイトが出ないことがあります。

実際にやってみると、「反映待ち」に見えて、設定する場所を間違えているだけのケースがありました。

Cloudflare Pagesへ example.com を向ける前提で、詰まりやすかったところを5つに分けて残しておきます。

1. レンタルサーバー側のドメイン設定を触ってしまう

WordPressからCloudflare Pagesへ移すとき、最初に迷ったのがレンタルサーバー側の扱いでした。

今までスターレンタルサーバーなどでWordPressを動かしていた場合、ついサーバー管理画面の「ドメイン設定」を触りたくなります。

ただ、CloudflareへDNSを移す作業で重要なのは、レンタルサーバー側ではなく、ドメインを管理しているサービス側のネームサーバー設定です。

たとえばCloudflareから次のように指定されたら、

amy.ns.cloudflare.com
jeremy.ns.cloudflare.com

これはCloudflare DNSのレコードとして追加するものではありません。

ドメインを買ったサービス、たとえばスタードメインなどのネームサーバー設定に入れるものです。

CloudflareのFull setupでも、ドメインをCloudflareへ追加したあと、レジストラ側でネームサーバーを変更する流れになっています。

https://developers.cloudflare.com/dns/zone-setups/full-setup/setup/

ここを間違えると、Cloudflare側をいくら直しても外からは使われません。

ネームサーバーがCloudflareへ向いたかどうかは、dig NS で見られます。

dig NS example.com +short

Cloudflareへ移せていれば、以下のような結果になります。

amy.ns.cloudflare.com.
jeremy.ns.cloudflare.com.

このあたりは Cloudflare移行でネームサーバーとDNSレコードを混同しないための整理 にも分けています。

2. CloudflareのDNSスキャン結果をそのまま信じる

Cloudflareにドメインを追加すると、既存DNSレコードをスキャンしてくれます。

ただし、スキャン結果が完全とは限らないようです。TXTだけ見つかって、Web表示に必要なA、AAAA、CNAMEが見つからないことがあります。

このとき画面には、だいたい次のような警告が出ます。

An A, AAAA or CNAME record pointing to the root domain is required
An A, AAAA or CNAME record for the www subdomain is required

これは要するに、こういう意味です。

example.com をどこへ向けるか未設定
www.example.com をどこへ向けるか未設定

Cloudflare Pagesへ向けるなら、Cloudflare DNSに以下のようなレコードを作ります。

Type: CNAME
Name: @
Target: example.pages.dev
Proxy status: Proxied
TTL: Auto

www も使うなら、こちらも追加します。

Type: CNAME
Name: www
Target: example.pages.dev
Proxy status: Proxied
TTL: Auto

CloudflareのDNSレコード作成については公式にも説明があります。

https://developers.cloudflare.com/dns/manage-dns-records/how-to/create-dns-records/

MXの警告も一緒に出ることがありますが、これはメール受信用です。

@example.com のメールを受け取らないなら、Web表示を直す段階では後回しでも問題ありません。

3. ルートドメインのCNAME注意書きをエラーだと思う

Cloudflare DNSで example.com にCNAMEを追加すると、次のようなメッセージが出ることがあります。

CNAME records normally can not be on the zone apex.
We use CNAME flattening to make it possible.

この表示はエラーっぽく見えますが、基本的には注意書きです。

本来、example.com のようなzone apex、つまりルートドメインにはCNAMEを置けません。

ただ、CloudflareではCNAME flatteningによって、ルートドメインでもCNAMEのように扱える仕組みがあります。

https://developers.cloudflare.com/dns/cname-flattening/

なので、Cloudflare Pagesへ向ける設定として、

example.com CNAME example.pages.dev

のように作ること自体はおかしくありません。

この表示が出たからといって、Aレコードへ変えなければいけない、という話ではありませんでした。

4. DNSだけ作ってPagesのCustom domainsに追加していない

今回いちばん分かりにくかったのは、DNSとPages側の紐付けが別だったことです。

Cloudflare DNSにCNAMEを作っても、Cloudflare Pagesのプロジェクト側に独自ドメインが登録されていないと、うまく表示されないことがあります。

DNSレコードを作ったあとでも、Pagesプロジェクト側のCustom domainsに登録されているかは別で見ます。

Workers & Pages
対象のPagesプロジェクト
Custom domains

ここに次のようなドメインが表示されている必要があります。

example.com
www.example.com

Cloudflare Pagesの公式ドキュメントでも、PagesプロジェクトにCustom domainを追加してドメインへ接続する流れになっています。

https://developers.cloudflare.com/pages/configuration/custom-domains/

DNSレコードだけ見ると正しそうなのに 522 になる場合、Custom domainsに出ていないことがあります。

切り分けでは、先にPages本体のURLを叩きました。

curl -I https://example.pages.dev/

ここが 200 なら、デプロイ自体は動いています。

次に独自ドメインを見ます。

curl -I https://example.com/

ここだけ 522 になるなら、サイトのビルドやAstroの問題ではなく、Cloudflare内で独自ドメインがPagesへ渡っていない可能性があります。

5. SSLの問題だと思ってしまう

独自ドメインでHTTPSが開けないと、まずSSLを疑いたくなります。

ただ、Cloudflare Pagesの独自ドメインでは、SSL証明書は基本的に自動で発行されます。

CloudflareのUniversal SSLは、ルートドメインやfirst-level subdomainをカバーする証明書を発行する仕組みとして説明されています。

https://developers.cloudflare.com/ssl/edge-certificates/universal-ssl/

つまり、PagesのCustom domainが正しく登録され、DNSが向いていれば、基本的には待つだけでHTTPSが使えるようになります。

逆に、522 が返っている場合は、証明書の発行待ちというより、Cloudflareが接続先へ到達できていない状態です。

Cloudflareのエラー522は、Cloudflareからoriginへ接続できない場合のエラーとして説明されています。

https://developers.cloudflare.com/support/troubleshooting/http-status-codes/cloudflare-5xx-errors/error-522/

Pagesの場合は通常のoriginサーバーとは少し見え方が違いますが、少なくとも「SSL証明書を手動で入れれば直る」という話ではありません。

自分が再設定するなら、次の順で潰していきます。

1. *.pages.dev は表示できるか
2. dig NS でCloudflareのネームサーバーになっているか
3. Cloudflare DNSに root / www のレコードがあるか
4. PagesのCustom domainsに root / www が登録されているか
5. Custom domainsのStatusがActiveか

まとめ

Cloudflare Pagesの独自ドメイン設定で詰まったときは、以下を順番に見ると切り分けやすいです。

  • レンタルサーバー側ではなく、レジストラ側のネームサーバーを変更する
  • Cloudflare DNSスキャンでWeb用レコードが拾われているとは限らない
  • ルートドメインのCNAME flattening表示は基本的にエラーではない
  • DNSレコードだけでなく、PagesのCustom domainsに登録されているか見る
  • HTTPSで失敗しても、まずSSLよりPagesの紐付けを疑う

「Cloudflareは有効になっているのにサイトが出ない」場合、DNS画面だけ見ていても気づけないことがあります。

PagesのCustom domains欄に対象ドメインが出ているかどうかで、かなり早く原因に近づけました。

関連記事

参考