プレビューデプロイ

作成2026年4月4日Takeshi Takatsudo

Cloudflare Pages での PR ごとのプレビューデプロイ

プレビューデプロイの仕組み

main 以外のブランチ名でデプロイすると、Cloudflare Pages は固有の URL を持つプレビューデプロイを作成します：

https://<branch>.<account>-<project>.pages.dev

PR ベースのプレビューでは、PR 番号をブランチとして使用します：

npx wrangler@4 pages deploy deploy \
  --project-name=my-site \
  --branch="pr-${PR_NUMBER}" \
  --commit-hash="${GITHUB_SHA}" \
  --commit-message="Preview: PR #${PR_NUMBER}"

プレビュー URL は次のようになります：

https://pr-42.takazudo-my-site.pages.dev

プレビュー URL のパターン

URL のフォーマットは次の通りです：

https://<branch-slug>.<account-slug>-<project-name>.pages.dev

各要素の意味：

<branch-slug> は --branch で指定した値（サニタイズ済み）
<account-slug> は Cloudflare アカウントから自動生成される値
<project-name> は --project-name で指定した値

📝 Note

<account-slug> の部分は Cloudflare が自動生成します。正確なサブドメインの形式は Pages ダッシュボードで確認してください。

PR にプレビュー URL をコメントする

actions/github-script を使って、プレビュー URL のコメントを投稿または更新します：

- name: Comment preview URL on PR
  uses: actions/github-script@v8
  env:
    DEPLOY_URL: ${{ steps.cf-deploy.outputs.deploy_url }}
  with:
    script: |
      const deployUrl = process.env.DEPLOY_URL;
      const prNumber = context.issue.number;
      const marker = '<!-- cf-preview-pr -->';

      const body = [
        marker,
        `## Cloudflare Pages Preview`,
        '',
        `Preview deployment is ready.`,
        '',
        `| | URL |`,
        `|---|---|`,
        `| Preview | ${deployUrl} |`,
        '',
        `Built from commit: \`${context.sha.substring(0, 7)}\``,
      ].join('\n');

      const { data: comments } = await github.rest.issues.listComments({
        owner: context.repo.owner,
        repo: context.repo.repo,
        issue_number: prNumber,
      });

      const existing = comments.find(c => c.body.includes(marker));

      if (existing) {
        await github.rest.issues.updateComment({
          owner: context.repo.owner,
          repo: context.repo.repo,
          comment_id: existing.id,
          body,
        });
      } else {
        await github.rest.issues.createComment({
          owner: context.repo.owner,
          repo: context.repo.repo,
          issue_number: prNumber,
          body,
        });
      }

HTML コメントマーカー（）により、後続のデプロイでは新しいコメントを作成する代わりに既存のコメントが更新されます。

必要な権限

ワークフローには pull-requests: write 権限が必要です：

permissions:
  contents: read
  pull-requests: write