Cloudflare PagesとGitHubで、pushしたら自動で公開する仕組みを作る

FTP時代に一番怖かったのは、上げ忘れでした。

ローカルで直して、FTPソフトを開いて、変更したファイルを選んで上書きして、キャッシュを消して確認する。手間なだけでなく、事故のもとでもあります。上げ忘れ、上書きミス、本番にしかない謎のファイル。心当たりのある方は多いと思います。

今は、GitHubにpushしたら自動でビルドされて本番に反映される、という運用にしています。使っているのはCloudflare Pagesで、無料です。この記事も、その仕組みで公開されています。

なお、そもそもなぜWordPressをやめて静的サイトにしたのかは別の記事に書いたので、今回はデプロイの部分に絞ります。

仕組みの全体像

ローカルで編集
   │  git push
   ▼
GitHub（コードの置き場）
   │  pushを検知
   ▼
Cloudflare Pages（自動でビルド → 世界中に配信）

やることは、GitHubにコードを置くことと、Cloudflare Pagesにリポジトリをつなぐことの2つだけです。一度つないでしまえば、以後の公開作業はgit pushだけになります。

手順1：GitHubにリポジトリを用意する

プロジェクトをGitHubのリポジトリにpushしておきます。すでにGitで管理しているなら、リモートに上げるだけです。リポジトリはprivateで問題ありません（Cloudflare Pagesはprivateリポジトリも読めます）。

手順2：Cloudflare PagesとGitHubをつなぐ

1. CloudflareのダッシュボードでWorkers & Pages → Create → Pagesを選ぶ
2. Connect to GitでGitHubアカウントを連携し、対象リポジトリを選ぶ
3. ビルド設定を入れる。Astroの場合は次の表のとおり

項目	値
Framework preset	Astro
Build command	npm run build
Build output directory	dist

4. Save and Deployを押す

これで初回のビルドが走り、xxxx.pages.devというURLでサイトが公開されます。以後、mainブランチにpushするたびに自動でビルド・反映されます。

手順3：独自ドメインをつなぐ

独自ドメインの追加は、プロジェクトのCustom domainsからです。ドメインのDNSをCloudflareで管理していれば、レコードもほぼ自動で設定され、SSL（https化）も勝手に済みます。ここが一番あっけないところです。

クライアント確認が楽になる：プレビューデプロイ

main以外のブランチにpushすると、本番とは別のプレビューURLが自動で発行されます。

実務で助かるのが、ここです。「この修正を公開前に見てもらえますか」を、URL一つで渡せる。ステージング環境をわざわざ用意する必要もありません。私がGitHub連携を続けている理由の半分はこれです。

もう一つ、デプロイ履歴が全部残っていて、過去のデプロイをワンクリックで本番に戻せます。更新したら壊れた、というときの保険として優秀だと感じています。

ハマりどころ

実際に運用していて、つまずきやすいのはこのあたりです。

Node.jsのバージョン違いでビルドが落ちる。 ローカルでは通るのにCloudflare上で落ちる場合、まずこれを疑います。環境変数NODE_VERSIONに20などローカルと同じ系列を指定すると解決することが多いです。

環境変数の入れ忘れ。 APIキーなどを使っている場合、ローカルの.envはアップロードされません。ダッシュボードのSettings → Environment variablesに本番用の値を登録します。フォームの秘密鍵（お問い合わせフォームの記事で書いたTURNSTILE_SECRET_KEYなど）もここです。

ビルドは走ったのに反映されていないように見える。 だいたいブラウザキャッシュです。慌てる前にシークレットウィンドウで確認します。

push即公開が怖い。 mainにpushすると、すぐ本番へ出ます。裏を返すと、mainには公開していいものしか置けません。作業はブランチを切ってプレビューで確認し、問題なければmainへ、という流れにしておくと安全です。

何が変わったか

この仕組みにしてから、公開作業という概念がほぼ消えました。修正して、pushして、数分後には本番に出ている。どのファイルを上げたかの管理も、上げ忘れの事故もありません。

そして履歴が全部Gitに残るので、いつ何を変えたかが後から追えます。別の記事でやり取りを全部文字に残す話を書きましたが、コードの変更履歴も同じで、記録が残る仕組みは、それ自体が信頼になると思っています。

まとめ

Cloudflare PagesとGitHubを組み合わせると、公開作業はgit pushひとつで終わる仕組みです。設定はリポジトリをつないでビルドコマンドを入れるだけで、無料のうえ、独自ドメインもSSLも簡単です。プレビューデプロイはクライアントの確認に使えて、ロールバックは事故の保険になる。ハマったら、まずNodeのバージョンと環境変数を疑ってください。

FTP運用から乗り換えると、戻れなくなるタイプの仕組みだと思います。静的サイトを運用しているなら、導入して損はないはずです。

---

納品して終わりではありません。サイト公開後も相談できる制作者をお探しの方は、まずはお話をお聞かせください。