プレビューデプロイを使うと、本番にデプロイせずにプロジェクトの新しいバージョンを確認できます。プレビューデプロイを表示するには、次の手順を実行します。
-
Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗ -
プロジェクトを選び、表示したいデプロイを探します。
GitHub リポジトリで新しいプルリクエストを開くたびに、Cloudflare Pages は固有のプレビュー URL を作成します。ブランチに新しいコミットをプッシュすると、この URL は更新され続けます。この動作は、プルリクエストがリポジトリ本体から作成された場合に限ります。
たとえば、Pages に接続した user-example というリポジトリがある場合、user-example.pages.dev サブドメインが割り当てられます。デフォルトブランチが main なら、main ブランチへのコミットは user-example.pages.dev の内容と、プロジェクトに設定した カスタムドメイン を更新します。
user-example の開発中に、たとえば development ブランチへ新しい変更をプッシュすることがあります。
この例では、新しい development ブランチを作成すると、Pages はこれらの変更向けのプレビューデプロイを自動生成し、373f31e2.user-example.pages.dev で公開します。373f31e2 はランダムに生成されたハッシュです。
新しく作成するブランチごとに、pages.dev サブドメインの前に新しいランダムハッシュが付きます。
development ブランチへの追加の変更は、development ブランチが本番ブランチの main にマージされるまで、この 373f31e2.user-example.pages.dev プレビューアドレスを更新し続けます。
カスタムドメインと user-example.pages.dev サイトは、プレビューデプロイの影響を受けません。
Cloudflare Access を使って、デプロイプレビューへのアクセスを管理できます。デフォルトでは、これらのデプロイ URL は公開されています。アクセスポリシーを有効にすると、プロジェクトのデプロイの閲覧を自分の Cloudflare アカウントに制限できます。
有効にしたあと、複数ユーザーアカウント を設定すると、チームの他のメンバーもプレビューデプロイを閲覧できます。
デフォルトでは、プレビューデプロイは有効で、公開されています。プロジェクトの設定で、プレビューデプロイを閲覧する訪問者に認証を要求できます。これにより、Access ポリシー で指定したチームメイト、組織、その他の利用者だけにプレビューデプロイへのアクセスを制限できます。
Cloudflare Access でプレビューデプロイを保護するには、次の手順を実行します。
-
Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗ -
Pages プロジェクトを選びます。
-
Settings > General を開き、Enable access policy を選びます。
これで保護されるのはプレビューデプロイだけです（例: 373f31e2.user-example.pages.dev と、その他のランダム生成プレビューリンク）。*.pages.dev ドメインやカスタムドメインは対象外です。
プレビューデプロイを公開すると、ハッシュベースの固有アドレス（例: <hash>.<project>.pages.dev）が割り当てられます。これらはアトミックで、あとからいつでも訪問できます。あわせて Pages は git ブランチ名のエイリアスも作成し、そのブランチの最新コミットを常に指すように更新します。
たとえば、本番環境に紐づいていない development ブランチへ変更をプッシュすると、Pages は abc123.<project>.pages.dev にデプロイし、development.<project>.pages.dev をそのデプロイへエイリアスします。その後 development ブランチに新しい作業をプッシュすると、xyz456.<project>.pages.dev デプロイが作成されます。この時点で development.<project>.pages.dev エイリアスは xyz456 デプロイを指しますが、abc123.<project>.pages.dev には直接アクセスできます。
ブランチ名エイリアスは小文字になり、英数字以外の文字はハイフンに置き換わります。たとえば fix/api ブランチは fix-api.<project>.pages.dev エイリアスを作成します。
Pages プロジェクト内のブランチエイリアスを確認するには、いずれかのプレビューデプロイで View build を選びます。Deployment details に、そのデプロイに紐づくすべてのエイリアスが表示されます。
プレビューエイリアスは、ブランチにカスタムドメインを追加 ↗ すると、カスタムドメインに紐づけられます。
古いプレビューデプロイを整理するには、Wrangler で削除できます。
npx wrangler pages deployment delete <DEPLOYMENT_ID> --project-name <PROJECT_NAME>確認プロンプトをスキップし、エイリアス付きデプロイを強制削除するには、--force（または -f）フラグを使います。デプロイ ID は wrangler pages deployment list を実行して確認できます。
健全な SEO プロファイルを保つには、検索エンジンがウェブ上の重複コンテンツを見つけないようにすることが重要です。プレビューデプロイは本番環境の正確な複製として設計されているため、まさにこの状況が生まれます。Cloudflare Pages は、これらの一時的なプレビューによって検索順位が損なわれないよう、デフォルトで対処します。
デフォルトでは、Cloudflare Pages が生成するすべてのプレビューデプロイに、X-Robots-Tag: noindex HTTP レスポンスヘッダーが含まれます。このヘッダーは検索エンジンのクローラーへの明確な指示として働き、ページを無視して検索結果に含めないよう伝えます。
プレビューデプロイがインデックスを正しくブロックしていることは、簡単に確認できます。ターミナルで次の curl コマンドを実行し、プレースホルダーを固有のプレビュー URL に置き換えてください。
curl -I https://<your-preview-url>.pages.dev出力に x-robots-tag: noindex の行があることを確認すると、プレビューサイトがインデックスされていないことがわかります。