Cloudflare Pages *.pages.devからカスタムドメインへの一括リダイレクトとドメイン設定の最適化
Cloudflare Pagesにデプロイしたサイトに、カスタムドメインを紐づけて公開し、初期ドメイン（*.pages.dev）やプレビューURLなどのサイト設定を最適化するまでの手順をまとめました。
カスタムドメインはHostingerで取得したドメインを利用します。
CloudflafeはWorkersへの移行を推奨していますが、静的サイトのシンプルなサイトのためCloudflare Pagesで実施しました。いつかはWorkersへの移行をしないといけないですね...
構成
ホスティング | Cloudflare Pages |
|---|---|
ドメイン管理 | Hostinger |
サイト保護 | Cloudflare Access |
リダイレクト | ページ ルール（Page Rules） |
ドメイン | https://www.example.com ※ |
※記事用にダミードメインを記載しています。
やりたいこと
- Hostingerで取得したドメインをCloudflare Pagesのサイトに紐づける
- Cloudflare Accessでプレビュー用URLを保護（メールアドレス認証）
- 初期ドメインの
*.pages.devにアクセスされた際、カスタムドメインへリダイレクト - wwwなしとwwwありをwwwありに統一するリダイレクト設定
過去にCloudflare Registrarで取得したドメインをCloudflare Pagesに紐づけたりCloudflare Accessのサイト保護を試したことがありましたが、今回新たに２つのことを学ぶことができました。
今回新たに学んだこと
一括リダイレクトの設定は即時反映ではない
Cloudflare公式ドキュメントや参考記事の通りに設定し、何度確認してもリダイレクトされない...なぜリダイレクトされないのか。とかなり時間を費やしていました。
結論、反映には数分〜数十分かかる。
設定後すぐに確認するのではなく、5〜10分程度待ってから動作確認することをおすすめします。
焦らず待つことが大事でした😅
Cloudflareなら一括リダイレクトも即時だと思い込んでいました。設定の種類によって反映時間が異なることを知れたのは良い学びでした。
Cloudflare Pagesへのカスタムドメインは複数設定できDNSレコードも自動登録される
wwwなしのドメインしか設定していなかったの特に気にしていなかったのですが、ふとwwwあり（サブドメイン）はどうやって設定する？と。
Cloudflare Pagesのカスタムドメインに追加登録すればいいだけでした。（複数紐づけられることを知らなかった）
しかも、ドメインを追加するとDNSレコードも自動で登録してくれるのでとても簡単🙌
プロジェクトの連携から公開まで一気に
1. Cloudflare PagesとGitHubの連携
1-1. Workers & Pages > アプリケーションを作成 > 既存のGitリポジトリをインポート
1-2. リポジトリを選択しビルド設定
フレームワーク プリセットの「Astro」を選択すると、ビルドコマンド・ビルド出力ディレクトリが自動で選択されるので初期値のまま進めます。
2. Cloudflare Accessの設定(プレビュー保護)
プレビュー用のURLを保護するため、Cloudflare Accessで認証を設定します。
When a preview deployment is published, it is given a unique, hash-based address — for example, <hash>.<project>.pages.dev. These are atomic and may always be visited in the future. However, Pages also creates an alias for git branch's name and updates it so that the alias always maps to the latest commit of that branch.
プレビューデプロイメントが公開されると、ハッシュベースの一意なアドレスが割り当てられます。例えば、<hash>.<project>.pages.dev のような形式です。これらはアトミック(不変)であり、将来いつでもアクセスできます。しかし、Pagesは git ブランチ名のエイリアスも作成し、そのエイリアスが常にそのブランチの最新のコミットにマッピングされるように更新します。
過去に書いた記事をもとに設定をします。
3. Cloudflareでドメインを追加（ネームサーバー取得）
CloudflareでドメインをDNS管理下に置くための準備です。
サイドバー > ドメイン > ドメインのオンボード
3-1. ドメインを入力
3-2. DNS レコードのクイックスキャンを選択
3-3. 続行
3-4. Freeプランを選択
3-5. アクティベーションに進む
Cloudflareのネームサーバーが表示されます。
4. Hostingerでネームサーバーを変更
Hostingerの管理画面で、ドメインのネームサーバーをCloudflareで表示された情報に変更します。
DNS浸透を待つ...
思っていたよりもすぐに反映されました！
5. Cloudflare Pagesにカスタムドメインを紐づける
Cloudflare Pagesのプロジェクト > カスタムドメイン > カスタムドメインを設定
5-1.www.example.com (メインドメイン)
5-2.example.com (wwwなし ※後ほどリダイレクト)
5-3.ドメインを入力 > 続行 > ドメインをアクティブにする
設定後、「初期化中」→「アクティブ」に切り替わります。
この時点でDNSレコードが自動で追加されるので、手動でのレコード追加は不要でした◎
6. wwwなし→wwwありへのリダイレクト設定
ドメイン > 該当ドメイン > ルール > ページ ルール > ページルールを作成
6-1. URL: xample.com/*
6-2. 設定: URLの転送
6-3. ステータス コード: 301
6-4. 転送先 URL:https://www.example.com/$1
7. *.pages.devドメインからカスタムドメインへの一括リダイレクト
ドメイン > 該当ドメイン > ルール > 設定 > 一括リダイレクト
一括リダイレクトリストの作成
7-1. リスト名を入力 > 次へ
7-2. 手動でURLリダイレクトを追加
7-3. 設定項目
- ソース URL:
sample.pages.dev - ターゲット URL:
https://www.example.com/ - ステータス: 301
- パラメータを編集する（以下3つにチェック）
- クエリ文字列を保存する
- サブパスの一致
- パス サフィックスを保持する
リダイレクト ルールの作成
次へ > リダイレクト ルールに進む
- ルール名⇒例) 初期ドメインリダイレクト
- リスト⇒先ほど作成したリストを選択
- 保存してデプロイする
📝参考サイト