Cloudflare の Page Rules を利用して、 www ドメインをルートドメインへリダイレクトさせる方法

はじめに

先日、開発しているWebサービスをVercelからCloudflare Pagesへ移行しました。

Vercelではカスタムドメインを設定すると、ルートドメインだけでなく www サブドメインでもアクセスできるよう、リダイレクトをよしなに設定してくれます。
一方でCloudflare Pagesでは自動設定してくれないため、リダイレクトするためには手動で設定する必要があります。

そこで利用するのがCloudflareのPage Rulesです。CloudflareのPage Rulesを活用することで、無料版^[1]でも最大3つのリダイレクトルールを設定できます。この記事では、wwwサブドメインをルートドメインへリダイレクトさせる手順を詳しく説明します。

手順

ここでは、 https://www.ttttt.app/ を https://ttttt.app/ へリダイレクトする方法を紹介します。実際に設定する場合は、自分が設定したいドメインへ設定値を読み替えてください。

1. DNSレコード設定を行う

• リダイレクトルールを設定しただけではDNSを引くことができないため、まずはDNSレコードを設定します。
• www サブドメインのAレコードに架空のIPアドレスとなる 192.0.2.1 をセットします。また、CloudflareのProxyを通す設定（オレンジの雲のマークが点灯する状態）にします。これにより、wwwサブドメインのURLでCloudflareのサーバに到達できるようになります。

2. Page Rulesの設定を行う

• Cloudflareのダッシュボードで「Page Rules」を選択します。
• 新しいPage Ruleを作成します。
• 以下の設定を行います：
  • URL: www.ttttt.app/*
  • Pick a Setting: Forwarding URL
  • Select status code: 301 - Permanent Redirect（今後wwwドメインを使う可能性があれば302を選択しておく）
  • Enter destination URL: https://ttttt.app/$1
  • 最後に「Save Page Rule」ボタンを押下します。

destination URLに $1 と書いている部分は、設定するURLの * (ワイルドカード) と一致します。複数ワイルドカードが存在する場合は、$の後ろの数字がインクリメントします。

設定後、 https://www.ttttt.app/ にアクセスしてみて、正常に https://ttttt.app/ へリダイレクトできていればOKです。

まとめ

Vercelで自動設定されていたwwwサブドメインからルートドメインへリダイレクトする設定を、Cloudflareでも実施する方法について紹介しました。

Page Rulesを利用することで、これまでApacheなどのWebサーバで .htaccess ファイル等を利用して設定していたリダイレクトが、マネージドサービス側で管理することができて、管理の手間が減ります。

一方で、Page Rulesによるリダイレクトを設定することで、リダイレクトしない状態に比べて200msほど遅延が発生することには注意が必要です（環境にもよります）。

脚注

1. 3つ以上のPage Rulesを設定する場合は、追加で5ルール/月額5USD 掛かります。