Cloudflare Pagesにカスタムドメインを設定し301リダイレクトする

カバー画像

カスタムドメイン設定

Cloudflare Pages でデプロイしたブログ(murosans-blog.pages.dev)にカスタムドメインを設定します。

Cloudflare Pages のダッシュボードを開き、「カスタムドメイン」タブから「カスタムドメインを設定」。

設定1

ドメインを入力し、「ドメインをアクティブにする」だけで完了しました。
ドメインもCloudflareで取得したので、CNAMEレコードは自動で追加されていました。

record

1 分程待つと、もう新しいドメインでアクセスできるようになっていました。

リダイレクト設定

このままだと旧URLでもアクセスできてしまうので、新しいURLに301リダイレクトするように設定します。

Cloudflareダッシュボードの一括リダイレクトページ、「一括リダイレクトリストの作成」から設定します。リストの名前を適当に入力し、「次へ」

bulk-redirect1

URLを追加するページで、ソースURLに旧URLを、ターゲットURLに新URLを入力します。
ついでに、クエリ文字列、サブパス、パスサフィックスを保持するようにチェックを入れました。
「サブドメインを含める」にチェックを入れるとプレビューできなくなるので注意してください。

bulk-redirect2

保存すると、ルールの設定ページに移動するので、作成したリストを選択して保存します。

しばらくすると新しいURLにリダイレクトされるようになりました。設定した通り、パスやクエリ文字列も保持されています。

bash

$ curl 'https://murosans-blog.pages.dev/' -I
HTTP/2 301
location: https://blog.murosan.dev/
...

$ curl 'https://murosans-blog.pages.dev/blog/subpage?some_query=value' -I
HTTP/2 301
location: https://blog.murosan.dev/blog/subpage?some_query=value
...

プレビュー用のURLは301リダイレクトされません。
(リストの設定ページで「サブドメインを含める」にチェックを入れるとプレビュー用URLもリダイレクトされます。)

bash

# プレビューページへのAccessポリシーを設定しているので、認証ページにリダイレクトされている
$ curl https://preview.murosans-blog.pages.dev/ -I
HTTP/2 302
location: https://xxxx.cloudflareaccess.com/cdn-cgi/access/login/preview.murosans-blog.pages.dev ...