最近リリースしたwebアプリケーション cinefil.me の開発過程で、本番環境と同じ環境で検証をする固定の test.cinefil.me のようなURLを用意したいと思いました。

前提

• テスト環境用URLを追加したいアプリケーションをCloudflareにデプロイ済み
• カスタムドメインをCloudflareに登録済み（DNS管理がCloudflareにある）

設定手順

Cloudflare Pages にサブドメインを追加

“Workers & Pages” へ移動してサブドメインを追加したいアプリケーションを選択します。“Custom domains” タブに移動して “Set up a custom domain” をクリックします。 追加したいサブドメインを入力して “Continue” をクリックします。

DNSレコードは自動的に作成されます。DNSレコードのチェックが完了して、ステータスが “Active” になったら、サブドメインへのアクセスが可能になります。

DNSレコードの設定

デフォルトではサブドメインはメインのページ YOUR_APPLICATION_NAME.pages.dev を指しています。今回は開発環境用なので main (または master) ブランチの代わりに develop ブランチのデプロイをサブドメインに表示させたいのでDNSレコードを編集する必要があります。

Cloudflare Pagesで develop ブランチにデプロイすると、自動生成されるURLと別に develop.YOUR_APPLICATION_NAME.pages.dev にもデプロイされます。なので、 deploy ブランチの内容をサブドメインで表示するにはこのURLに向ける必要があります。
“Manage Cloudflare DNS” へ移動して追加したサブドメインの “Edit” をクリックします。

以下のように変更します (以下は test.cinefil.me の例です)。

• Type: CNAME
• Name: test
• Target: cinefil.pages.dev → develop.cinefil.pages.dev

※ cinefil の部分はあなたのアプリケーション名に変更してください。

設定が完了すると、 develop ブランチへデプロイした内容が test.cinefil.me に反映されるようになりました。