Cloudflare Pagesで独自ドメインを使っていて、
https://www.example.comにアクセスされた場合も、
https://example.comへ統一したい。
今回はCloudflare PagesとCloudflareのRedirect Ruleを使って、
www.example.com↓ 301example.comとなるように設定する。
今回やること
最終的にこうする。
https://www.example.com↓https://example.comパスが付いている場合も維持する。
https://www.example.com/posts/sample/↓https://example.com/posts/sample/ステータスコードは301 Permanent Redirectにする。
前提
以下の状態から進める。
- Cloudflare Pagesでサイトを公開済み
- 独自ドメインをCloudflareで管理している
example.comではすでにPagesのサイトを表示できている
今回は、すでに使えているapexドメインへwwwからリダイレクトする。
Pagesにwwwをカスタムドメインとして追加する
まずCloudflare Dashboardから対象のPagesプロジェクトを開く。
カスタムドメインの設定から、
www.example.comを追加する。
追加すると、Cloudflareからwww用のDNSレコードを設定するよう案内される。
今回の環境では、Pagesプロジェクトのドメイン、
xxxx.pages.devへ向けるCNAMEだった。
DNSにwwwのCNAMEを設定する
CloudflareのDNS設定を開き、wwwのCNAMEを設定する。
イメージはこんな感じ。
Type: CNAMEName: wwwTarget: xxxx.pages.devProxy status: ProxiedTTL: Autoつまり、
www.example.com↓xxxx.pages.devという状態にする。
Pages側がActiveになることを確認する
DNSを設定したら、Cloudflare Pagesのカスタムドメイン画面へ戻る。
追加した、
www.example.comが、
Activeになっていることを確認する。
今回ここで一度ハマった。
wwwがいつまで経っても「検証中」のままだった。
その原因については後で触れる。
www→apexのRedirect Ruleを作る
次に、Cloudflare側でリダイレクトを設定する。
今回設定したのは、
https://www.example.com/*へのアクセスを、
https://example.com/${1}へ飛ばすルール。
ステータスコードは、
301にする。
設定のイメージは以下。
Request URL:https://www.example.com/*
Target URL:https://example.com/${1}
Status code:301
Preserve query string:ON*で受け取ったパスを${1}へ渡しているので、
https://www.example.com/posts/sample/なら、
https://example.com/posts/sample/へリダイレクトされる。
クエリ文字列も維持する設定にしておく。
リダイレクトを確認する
設定後、
https://www.example.comへアクセスする。
ブラウザのアドレスが、
https://example.comへ変わればOK。
トップページだけでなく、適当な下層ページでも確認しておく。
例えば、
https://www.example.com/posts/sample/から、
https://example.com/posts/sample/へ移動するかを見る。
これでwww付きURLからapexへの統一は完了。
wwwが「検証中」から進まない場合
今回、自分の環境ではここでハマった。
CNAMEを設定しているはずなのに、Cloudflare Pagesのwwwがいつまで経っても、
検証中から変わらなかった。
DNSレコードを確認してみると、www.example.comに以前使っていたDNSサービス側のNSレコードが残っていた。
イメージとしてはこんな状態。
www.example.com NS dns1.example...www.example.com NS dns2.example...一方で今回設定したいのは、
www.example.com CNAME xxxx.pages.devだった。
不要になっていたwwwのNSレコードを削除し、CNAMEを設定し直したところ、Pages側のカスタムドメインがActiveになった。
なので、
CNAMEは設定したのに、wwwのカスタムドメインが検証中から進まない
という場合は、wwwに古いDNSレコードが残っていないかも確認してみるといい。
特に以前別のDNSサービスを使っていた場合は、一度wwwでDNSレコードを絞り込んで確認すると分かりやすい。
設定自体はこれで終わり
必要な設定をまとめると、
Cloudflare Pageswww.example.com をカスタムドメインに追加
↓
Cloudflare DNSwww → xxxx.pages.dev のCNAMEを設定
↓
Pageswww.example.com がActiveになったことを確認
↓
Redirect Rulehttps://www.example.com/* ↓ 301https://example.com/${1}という流れ。
今回、自分の場合はこの設定とは別のところでもハマって、wwwがなかなか表示できなかった。
DNS、SSL、QUICあたりまで疑って調べた結果、最後に見つかった原因はまさかの自宅Wi-Fi側。
その調査の流れは本編の方にまとめている。