🏹

Cloudflareのページルールでrootドメインからwwwへリダイレクトする【Page Rules】

2022/03/13に公開約2,300字

こんにちは、大学生の@cohu_devです。

ドメイン・DNSに関して少し詰まったので、もし誰か同じ問題を抱えることになったら・・・のために投稿します。

間違いがあればコメントで指摘おねがいします!

そもそもドメインに関して

rootドメインとはexample.comの意味です(人により認識が違ったら申し訳ないです、Apexドメインとも言います)

以下、example.comのことをrootドメインと表記します。

参考👇

https://e-words.jp/w/Zone_Apex.html

なぜ、この問題が発生したか?

自分のサイトをVercelからCloudflare Pagesへ移行しました()

その際に問題がありました。

Vercelではrootからwwwのサブドメインへ設定なしでリダイレクトされます。サイトマップもそのURLです。

現状は、rootドメインではインデックスされていません(多分)

万が一ですが、Chromeなどの検索バーから手打ちでcohu.devと入力した場合にそのままアクセスできてしまいます。

正直に言うと有害ではないと思いますが、有害だった場合の対策として、できるだけドメインは一つに統一させたかったです。

解決策

英語でググったら見つかりました。

こういう時はライブラリならGithubのIssue、なんらかのSaasなら公式のコミュニティがベストだと感じました。

参考👇 このページの最下部です

https://community.cloudflare.com/t/redirecting-www-to-non-www/2949/27

解決の具体的な手順

上のページが見づらかったり、最新のCloudflareのUIを見たい方は、続きをご覧ください。

手順1

CloudflareのDNSでドメインを管理する。Goodleドメインやお名前.comでも、ネームサーバーをCloudflareに移すことは可能です。

完了していれば次へ。

手順2

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というのは変数で、ワイルドカードであるアスタリスクの値を受け取ります。

ちなみに、アスタリスクは複数使えて、リダイレクト時にはその値を左右で逆順処理します。

確かめる

以下のようなサイトを使ってリダイレクトを確認しましょう。

https://www.redirect-checker.org/index.php

このようになれば成功です。

うまくいかない場合は

コメントいただけるか、再度ビルドする、ドメインを登録し直すなど、試せることをやってみてください。

さいごに

最後までお読みいただきありがとうございました。

フォローいただけると嬉しいです!

https://twitter.com/cohu_dev

前にNotion埋め込みのカウントダウンツール作りました。よければ使ってください!

https://count-down.cohu.dev/

次は個人開発の記事を出す予定です。

Discussion

ログインするとコメントできます