Cloudflare Pages へカスタムドメインを設定する

Table of contents

はじめに

以下の投稿にある Cloudflare Pages 上にホストされた Astro ブログに対して、カスタムドメインを設定します。

• Cloudflare Pages へ Astro ブログをデプロイする

事前準備

• Cloudflare Pages でホストしているサイトがあること
• 設定するカスタムドメインを事前に準備(購入)していること

Web サイトへカスタム(独自)ドメインを登録する

自分の持っているドメインを Cloudflare Web サイトへ登録します。
ドメイン登録後、表示されたネームサーバーをカスタムドメインを取得したレジストラ側で設定します。

• Web サイト -> 始める

• ドメイン名を入力: example.com

• プランを選択: Free

• 割り当てられた Cloudflare ネームサーバーをコピー

• カスタムドメインを購入したレジストラ(お名前.comやGoDaddyなど)へ移動

  • 該当ドメインのネームサーバーへ設定

• Cloudflare の Web サイト -> 概要 -> 「ネームサーバを今すぐ確認」を選択

• Web サイトがアクティブになっていることを確認

Cloudflere Pages にカスタムドメインを設定する

Cloudflare Pagees のカスタムドメインを設定します。今回はブログ用にサブドメインblog.example.comを設定します。

• Workers & Pages -> アプリケーションを選択
• カスタムドメインタブ -> カスタムドメインを設定
• カスタムドメインを追加: blog.example.com
• 新しい DNS レコードの作成を確認 -> ドメインをアクティブにする
• カスタムドメインが有効になっていることを確認: https://blog.example.com

サブドメインに対するアクセス制限を設定する

開発環境や検証環境では、 dev.example.com や stg.example.com といったサブドメインを利用することが多いためか、 Cloudflare Pages では *.example.com へのアクセス制御が簡単に行えるようになっています。
Workers & Pages の管理ページからポリシーを有効化し、プランを選択します。
自動生成されるポリシーのデフォルト設定で *.example.pages.dev に対するユーザー認証が有効になります。

• Workers & Pages -> アプリケーションを選択
• 管理タブ -> Access ポリシーを有効にする
  • ポリシーが自動で作成される
• ポリシーを管理する
  • Zero Trust -> Access -> Applications が表示される
• Choose a plan: Free -> Proceed to payment -> Add payment method
• 初回の場合、カード情報を入力 -> Next -> Purchase
• Zero Trust -> Access -> Applications から登録内容を確認
• dev.example.comなど*.example.comへアクセスするとユーザー認証が求められることを確認

サブドメインに対するアクセス制御を削除する

今回は、特にサブドメインを利用する必要ないので作成後にアクセス制限を削除します。

• Zero Trust -> Access -> Applications
• 登録したアプリケーション(example - Cloudflare Pagesなど)の一番右側のハンバーガーメニュー -> Delete
• dev.example.comなど*.example.comへアクセスするとユーザー認証が求められないことを確認(注: 認証は求められないがページがないため、 Nothing is here yet が表示される)

まとめ

Web サイトへのドメイン登録から Cloudflare Pages のカスタムドメイン設定（同時にサブドメインの CNAME レコード作成）がスムーズ行え、適用まで10分程度で完了しました。