Cloudflare PagesにAstroサイトをデプロイする方法｜手順と詰まりどころ

Astro で作ったサイトを無料で・高速に・自動デプロイで公開したいなら、Cloudflare Pages が有力な選択肢だ。結論から言うと、GitHubリポジトリを連携してビルド設定を2つ入れるだけで、以後は push するたびに自動デプロイされる。手順と詰まりどころをまとめる。

前提: リポジトリを用意する

Astro プロジェクトを GitHub（または GitLab）に push しておく。Cloudflare Pages は Git 連携でリポジトリの push を検知してビルドする仕組みなので、まずはコードがリモートにある状態にする。

Cloudflare ダッシュボード → Workers & Pages → Create → Pages
Connect to Git でリポジトリを選択
ビルド設定を入力する：
- Framework preset: Astro
- Build command: npm run build
- Build output directory: dist
Save and Deploy

数分でビルドが走り、https://<プロジェクト名>.pages.dev が発行される。以後は push するだけで自動デプロイだ。

Astro の静的ビルドの出力は dist。ここを build や public にしているとデプロイが空っぽになる。プリセットで Astro を選べば自動設定されるが、手動設定時は要注意。

ビルドが手元で通るのに Pages で失敗するときは、Node のバージョン差が原因のことが多い。環境変数 NODE_VERSION を設定して、ローカルと揃えると安定する。

NODE_VERSION = 22

Astro の astro.config.mjs の site に本番URLを入れておかないと、sitemap や正規URL（canonical）が正しく出ない。SEO に直結するので、Pages のURLが決まったら忘れずに反映する。

export default defineConfig({
  site: 'https://your-project.pages.dev',
});

独自ドメインは Pages の Custom domains から追加できる。Cloudflare でドメインを管理していれば、DNS 設定も数クリックで完了する。SSL証明書も自動で発行される。