Cloudflareのページルールでrootドメインからwwwへリダイレクトする【Page Rules】
こんにちは、大学生の@cohu_devです。
ドメイン・DNSに関して少し詰まったので、もし誰か同じ問題を抱えることになったら・・・のために投稿します。
間違いがあればコメントで指摘おねがいします！
そもそもドメインに関して
rootドメインとはexample.comの意味です（人により認識が違ったら申し訳ないです、Apexドメインとも言います）
以下、example.comのことをrootドメインと表記します。
参考👇
なぜ、この問題が発生したか？
自分のサイトをVercelからCloudflare Pagesへ移行しました（）
その際に問題がありました。
Vercelではrootからwwwのサブドメインへ設定なしでリダイレクトされます。サイトマップもそのURLです。
現状は、rootドメインではインデックスされていません（多分）
万が一ですが、Chromeなどの検索バーから手打ちでcohu.devと入力した場合にそのままアクセスできてしまいます。
正直に言うと有害ではないと思いますが、有害だった場合の対策として、できるだけドメインは一つに統一させたかったです。
解決策
英語でググったら見つかりました。
こういう時はライブラリならGithubのIssue、なんらかのSaasなら公式のコミュニティがベストだと感じました。
参考👇 このページの最下部です
解決の具体的な手順
上のページが見づらかったり、最新のCloudflareのUIを見たい方は、続きをご覧ください。
手順１
CloudflareのDNSでドメインを管理する。Goodleドメインやお名前.comでも、ネームサーバーをCloudflareに移すことは可能です。
完了していれば次へ。
手順２
wwwをつけたいプロジェクトのドメイン画面から、カスタムドメインを追加します。
ここで、Cloudflareの標準のサブドメイン（hoge.pages.dev）が割り当てられますが、とりあえずこのままです。
そしたら以下のようになります。
手順3
rootドメインのDNS設定画面へ行きます。ドメイン一覧の画面から特定のドメインに飛べますが、そのページ内にあります。
そこで、タイプAとして、ルートドメインとwwwのサブドメインを追加し、値を192.0.2.1に指定します。
なぜなのかは調べてみてください。
手順4
ページルールへ移動します。
ここでは、その名の通りページのルールを設定できます。ちなみに無料プランでは各ドメインで（？）3つしか登録できません。
そこで以下のように入力します。
ポイント解説
cohu.dev/*ですが、なぜhttp:// https://をつけないかと言うと、どちらのドメインを検索バーなどに直接入力しても、遷移元の対象とするためです。
https://www.cohu.dev/$1ですが、これはhttpsにリダイレクトさせたいのでスキーマを指定します。
$1というのは変数で、ワイルドカードであるアスタリスクの値を受け取ります。
ちなみに、アスタリスクは複数使えて、リダイレクト時にはその値を左右で逆順処理します。
確かめる
以下のようなサイトを使ってリダイレクトを確認しましょう。
このようになれば成功です。
うまくいかない場合は
コメントいただけるか、再度ビルドする、ドメインを登録し直すなど、試せることをやってみてください。
さいごに
最後までお読みいただきありがとうございました。
フォローいただけると嬉しいです！
前にNotion埋め込みのカウントダウンツール作りました。よければ使ってください！
次は個人開発の記事を出す予定です。
Discussion