[Cloudflare Pages] *.pages.dev からカスタムドメインへのリダイレクト方法

January 28

・react

概要

Cloudflare Pages でデプロイすると <PROJECTNAME>.pages.dev というドメインが自動で割り当てられ、カスタムドメインを設定した後もこのドメインは残り続けてアクセスが可能です。

Access policy の設定からアクセス制限をかけることは可能ですが、 <PROJECTNAME>.pages.dev でも同じ訪問者であるためアクセスを拒否するのではなくカスタムドメインへリダイレクトをかけたい。

Cloudflare Pages でリダイレクトを実装できる機能で無料プランでも利用可能です。 https://developers.cloudflare.com/rules/url-forwarding/bulk-redirects/

管理画面のサイドバーから「Bulk Redirects」を選択します。

下の「Bulk Redirect Lists」を先に作成したいので、「Create Bulk Redirect List」をクリックします。

リストに名前を付けて「Next」をクリックします。（小文字のみ。記号は _ が使用可能）

URL を追加する画面に遷移します。ここではマニュアルで URL を追加します。（CSV ファイルでの追加も可能です）

「Or, manually add URL redirects」をクリックするとトグルが開いて入力欄が表示されるので、必要な項目を入力します。入力が完了したら「Next」をクリックします。

Source URL: 自動で割り当てられた <PROJECTNAME>.pages.dev （リダイレクト元の URL） Target URL: カスタムドメイン（リダイレクト先の URL） Status: 301（恒久的な移動） Edit parameters: 該当項目にチェックを入れる

確認画面へ遷移するので、問題がなければ「Next」をクリックします。そのまま「Continue to Redirect Rules」をクリックして Bulk Redirect Rule の設定へ移ります。

Bulk Redirect Lists 作業の続きから作成するか、Bulk Redirects の「Create Bulk Redirect Rule」をクリックして作成します。

ルールに名前を付けて、先ほど作成したリストを選択します（1 つしかない場合はデフォルトで選択済みの状態になっています）。 Bulk Redirect Lists が複数ある場合はリダイレクトを適用したいリストを選択します。

「Save and Deploy」をクリックして、Bulk Redirect ページでルールの Enabled にチェックが入り、リストの Status が「Active」になっていれば設定完了です 🎉