Astro + Cloudflare Pages

Astro 静的サイトを Cloudflare Pages にデプロイ

標準セットアップ

静的出力の Astro が Cloudflare Pages プロジェクトのデフォルトスタック。

Astro 設定

// astro.config.ts
import { defineConfig } from "astro/config";

export default defineConfig({
  output: "static",
  base: "/pj/my-site",
  server: { port: 4321 },
});

ビルドとデプロイ

pnpm build

mkdir -p deploy/pj/my-site
cp -r dist/* deploy/pj/my-site/
echo '/ /pj/my-site/ 302' > deploy/_redirects

npx wrangler@4 pages deploy deploy --project-name=my-site --branch=main

Astro 出力モード

CI では両方の出力構造に対応する：

if [ -d dist/client ]; then
  cp -r dist/client/. deploy/pj/my-site/
else
  cp -r dist/. deploy/pj/my-site/
fi

Pages Functions の追加

Astro サイトに API エンドポイントを追加するには：

1. プロジェクトルートに functions/ ディレクトリを作成

2. 必要なバインディングを含む wrangler.toml を作成

3. Functions は pages deploy で自動検出・デプロイされる

Git 履歴付きドキュメントサイト

作成日・更新日を表示するドキュメントサイトでは、checkout ステップで fetch-depth: 0 を指定する：

- uses: actions/checkout@v5
  with:
    fetch-depth: 0

これがないと、すべてのページの作成日が CI 実行日になってしまう。