Cloudflare Pagesに独自ドメインを設定するまでにやったこと備忘録
本ページはプロモーションが含まれています
先日紹介した、Next.js+Cloudflare Pages+microCMSの構成でブログを作った件で、独自ドメインを設定したので備忘録として紹介する。主につまづきポイントや参考にしたページを紹介する。
参考にしたページ
独自ドメインを購入する
独自ドメインをXserverドメインで購入した。希望のドメインが取得１円で更新料も1,400円くらいと安かったので思い切って新しいドメインを購入してみた
Cloudflare側に設定する
いくつかつまづきポイントがあったので後述する。基本は流れに沿って登録していけばOKだった。メニューは日本語化されているので大体は問題なくわかるようになっている。
つまづきポイント①DNS設定
ここの設定がちょっと難しかった。結論、やらなければならなかったのは。
- タイプ：CNAME
- 名前：新しく取得した独自ドメイン
- コンテンツ：Cloudflare Pagesで発行された*.pages.devドメインのURL
- プロキシ：デフォルト設定のまま
- TTL：デフォルト設定のまま
という感じだった。こうすることで、新しく取得したドメインにアクセスすると、コンテンツが表示されるようになった。あと②で紹介するが、
- タイプ：CNAME
- 名前：www
- コンテンツ：新しく取得したドメイン
- プロキシ：デフォルト設定のまま
- TTL：デフォルト設定のまま
という設定も追加している。これはこの後必要になり、あとから設定している。
つまづきポイント②wwwからルートにリダイレクト
Bloggerを使っていたら特に何もしなくても、いい感じにリダイレクトをしてくれていた。具体的には、monaka.devにアクセスしたらwww.monaka.devにリダイレクトされる、という感じだ。
Cloudflare側ではリダイレクトルールを設定してあげる必要があった。リダイレクトルールメニューの中にテンプレートというページがあって、「wwwからルートにリダイレクト」から設定をしてあげるとうまいこと、設定ができた。新しく取得したドメインについては、一律、monaka496.comに飛ぶようにした
①でも紹介したが、DNSの設定が追加で必要なので後で対応すること（ポップアップが出たと思うので気づくはず）
つまづきポイント③*.pages.devドメインから独自ドメインへリダイレクト
現状の設定のままでは、monaka496.comも*.pages.devドメインにもどちらにもアクセスができ、どちらも同じコンテンツが表示されてしまう。SEO的には301リダイレクトをいれて集約しないといけないが、どうしても設定方法がわからず苦労していた。（どうやらリダイレクトルールの設定ではなかった様子）
下記のページに記載されている方法を参照することで解決することができた。一括リダイレクトというのをしないとだめだったらしい（やりかたわからなかった・・・難しい）
まとめ
取り急ぎ新しいドメインでコンテンツが表示できるようになかった（良かった）
今まで触ってきたブログサービスとはお作法が違い、なんでも自分で設定しないといけないんだなということが分かった。Bloggerはその点、簡単に使えるようになっていたので入門としては非常によかった（カスタマイズがしんどいけど）
ドメイン取得ができたので、今度はGAなど諸々の設定と見た目のカスタマイズをしていこうかと思う。
