この記事の目次
  1. この記事で答えること
  2. 前提:リポジトリとローカルビルド
  3. 手順1:Cloudflare PagesでGit連携を作成する
  4. 手順2:Astroで確認する設定
  5. 手順3:プレビューと本番を分けて確認する
  6. ビルド失敗時の確認順
  7. 1. ログで失敗フェーズを特定する
  8. 2. ローカルで同じコマンドを再現する
  9. 3. 環境変数と販売状態を確認する
  10. 4. パスと大文字小文字
  11. 5. 同時ビルドと月間上限
  12. よくある失敗例
  13. Git連携後にDirect Uploadへ切り替えたい
  14. 独自ドメインを先に触って522になる
  15. プレビューに下書き本文が出た
  16. 自動デプロイを一時停止する
  17. この連載での位置づけ
  18. まとめ

非公開のGitHubリポジトリとCloudflare Pagesを接続すると、指定ブランチ(本サイトではmain)へのpushをきっかけにビルドと本番デプロイが走ります。この記事では、Astroの静的サイトを対象に、秘密情報をリポジトリへ書かない前提で、本サイト pocket-ai-lab で実際に動いている設定を整理します。

Cloudflare Pagesの料金と無料枠で上限を確認したあとに読む想定です。デプロイが成功して*.pages.devで表示できたら、XServerドメインをCloudflare Pagesへ接続へ進みます。

先に注意点:CloudflareのGit連携では、Git連携で作成したプロジェクトは後からDirect Upload方式へ切り替えられません。スマホCMSからmainへ直接コミットする運用とセットで選んでください。

この記事で答えること

  • GitHub連携でPagesが自動実行する処理(本番・プレビュー)
  • Astro向けのビルドコマンドと出力ディレクトリ
  • 初回デプロイと失敗時の確認順
  • 独自ドメイン設定はデプロイ成功後に行う理由

前提:リポジトリとローカルビルド

作業前に次を満たします。

  1. GitHubに非公開リポジトリがある(本サイトはkijikunnn/pocket-ai-lab)
  2. ローカルでnpm run buildが成功する
  3. Cloudflareアカウントがある
  4. Pagesの無料枠とビルド上限を把握している

秘密情報(.env、アクセストークン、フォームの非公開URL原本)はコミットしません。PagesのBuild variablesへPUBLIC_*だけを設定します。

手順1:Cloudflare PagesでGit連携を作成する

  1. Cloudflareダッシュボードで Workers & Pages → Create application → Pages → Connect to Git を開く
  2. GitHubを認可し、Repository accessは対象リポジトリだけに限定する
  3. 対象リポジトリを選び、次のビルド設定を入力する
設定 本サイトの値
Production branch main
Framework preset Astro(またはNoneで手入力)
Build command npm run build
Build output directory dist
Root directory 空欄(リポジトリ直下)
Environment variable NODE_VERSION=22.12.0
  1. 初回デプロイのログを開き、install → build → deployのどこまで進んだか確認する
  2. https://<project名>.pages.dev で表示を確認する(本サイトはpocket-ai-lab.pages.dev)

Git integration(最終更新 2026-04-21)では、pushのたびにビルド・デプロイが走り、ブランチへのコミットにはプレビューURLが付くと説明されています。本番URLとプレビューURLを混同しないでください。

手順2:Astroで確認する設定

項目 確認内容
Node.js package.jsonのenginesとPagesのNODE_VERSIONを一致させる
ビルド ローカルでnpm run buildが成功すること
出力先 Astro既定のdistであること
環境変数 PUBLIC_*はBuild variablesへ。秘密はコミットしない
サイトURL astro.config.mjsのsiteが本番ドメインを指すこと

本サイトのnpm run buildはastro buildのあとcheck:distでSEO・商品状態・下書き漏れを検査します。Cloudflare上でも同じnpm run buildを使うため、検査に失敗するとデプロイも失敗します。

手順3:プレビューと本番を分けて確認する

URLの種類 用途 注意
*.pages.dev(本番ブランチ) 接続確認・QA 独自ドメインのcanonicalとは別ホスト
プレビューデプロイ ブランチ・PRごとの確認 下書きや未公開情報を含めない
独自ドメイン 公開の正規URL カスタムドメイン接続はデプロイ成功後。メールDNSは観測記録を参照

pages.devでの確認アクセスは、本番ドメインのAnalyticsやSearch Consoleの数字と分けて記録します。

ビルド失敗時の確認順

本サイトで実際に起きやすい順番です。

1. ログで失敗フェーズを特定する

  • Installing dependencies:lockfile不整合、Nodeバージョン不一致
  • Building:TypeScriptエラー、Content Collections検証、環境変数不足
  • Deploying:出力ディレクトリの指定ミス

2. ローカルで同じコマンドを再現する

npm ci
npm run build

ローカルで再現できれば、Pagesの環境変数やNodeバージョン差を疑います。

3. 環境変数と販売状態を確認する

PUBLIC_PRODUCT_SALES_STATEなど、ビルド時に検証される変数が本番意図と一致しているか確認します。未知の値はビルド失敗します。

4. パスと大文字小文字

macOSでは通ってもLinuxビルドで落ちる、というケースがあります。importパスとファイル名の大小を揃えます。

5. 同時ビルドと月間上限

Limitsでは、Freeプランは同時ビルド1件・月500回です。連続pushでキューが詰まった場合は、完了を待ってから再試行します。

よくある失敗例

Git連携後にDirect Uploadへ切り替えたい

公式ドキュメントどおり、Git連携プロジェクトからDirect Uploadへは切り替えられません。自動デプロイを止めたい場合はブランチの自動デプロイを無効化し、Wranglerで手動デプロイする運用を検討します。

独自ドメインを先に触って522になる

DNSだけ追加し、Pages側のカスタムドメイン登録が未完了だとエラーになることがあります。順番は接続記事を参照してください。

プレビューに下書き本文が出た

CMSがmainへ直接コミットする構成では、保存=本番ビルドです。draft: trueの原稿がコミットされないよう、公開ゲートを守ります。

自動デプロイを一時停止する

pushのたびにビルドしたくない場合は、Pagesの Build → Branch control で本番ブランチの自動デプロイをオフにできます。その場合はWranglerなどで手動デプロイします。詳細はGit integrationを参照してください。

この連載での位置づけ

順番 記事 状態
前 Cloudflare Pagesの料金と無料枠 費用・上限の確認
今ここ GitHubからの自動デプロイ 本記事
次 XServerドメインをCloudflare Pagesへ接続 独自ドメイン
最後 Cloudflare DNSでSearch Consoleを設定 検索登録

まとめ

GitHubとCloudflare Pagesを接続し、mainへのpushでAstroサイトを自動公開できます。本サイトではnpm run build・出力dist・NODE_VERSION=22.12.0で運用しています。pages.devでの表示を確認してから独自ドメインへ進み、失敗時はログのフェーズ・ローカル再現・環境変数の順で切り分けてください。