B L O G

ブログ記事

thumbnail
プログラミング

Cloudflare Pagesの一括リダイレクトを使ってリダイレクト設定する

目次

前回、Hugo製のサイトをNetlifyからCloudflare Pagesに移行することができました。

しかし、【プロジェクト名】.pages.devとカスタムドメインで、同じサイトが表示されてしまってます。

なので今回は、【プロジェクト名】.pages.devにアクセスされた時に、カスタムドメインへリダイレクト設定を行っていきたいと思います。
ついでに、wwwありドメインからwwwなしドメインへのリダイレクトも設定していきます！

前回の続きとなっておりますので、ご了承下さい。

DNS設定

初めにDNSの設定を行っていきます。
DNSとはDNS(Domain Name System)のことで、ドメイン名とIPアドレスを紐付けるシステムのことです。

Cloudflareのダッシュボードから設定したカスタムドメインを選択し、サイドバーのDNSのRecordsに移動します。 DNS設定手順 色々設定してあったAレコードやAAAAレコードなどを全て削除し、上記のような設定だけにしました。

CNAMEレコードを使用して、カスタムドメインwwwあり、なしのどちらにも【プロジェクト名】.pages.devを関連づけさせます（反映まで約10分かかりました）。

CNAMEレコードは、ドメイン名のエイリアス（別名）を指定する為のもので、【プロジェクト名】.pages.devの内容を、カスタムドメインのwwwあり、なしのどちらにも表示させることができます。
つまり、現時点では合計3つのドメインで、同じ内容が表示されることになります。

一括リダイレクト

Cloudflareのダッシュボードにアクセスし、サイドバーからBulk Redirectを選択します。

一括リダイレクト方法 Create Bulk Redirect Listを選択し、一括りダイレクト設定を作成します。

一括リダイレクト方法
リストの名前の欄に、任意の名前を設定します。
説明は空でも大丈夫みたいです。

一括リダイレクト方法
Or, manually add URL redirectsをクリックし、上記のように設定します。 リダイレクト先のURLを入力し、Status: 301にします。

私はパラメーターは全部ONにしておきました。
ご自身の環境に合わせていただくと良いですが、Subpath matchingをONにしないと、サブパスを無視して、リダイレクト先が全てルートのURLになってしまうのには注意です。

どういうことかというと、例えばexample.pages.dev/appleにアクセスがあった場合、appleを無視したexample.comがリダイレクト先になってしまいます。
リダイレクト先をサブパスを保持したexample.com/appleのようにしたい場合は、先ほどの設定はONにしましょう！

Nextで次に進み、Continue to Redirect Rulesを選択します。

一括リダイレクト方法 ルールに名前を付け、先ほど作成したルールを選択します。
最後に、Save and Deployを選択すると、設定完了です！。
お疲れ様でした！

同じようなことを、wwwありのドメインでもやってあげます。

一括リダイレクト方法 最終的に、上記のような感じになりました！
私の場合、リダイレクト設定はすぐに反映されました👍

参考

関連する記事