CHAPTER 01

Cloudflare Pages デプロイ手順（Astro静的サイト）

AstroプロジェクトをCloudflare Pagesに無料デプロイする手順書。音声ファイルなど大容量ファイルを含む静的サイトに最適。

なぜCloudflare Pages か

| 比較項目 | Cloudflare Pages | Vercel | GitHub Pages | |---|---|---|---| | 帯域 | 無制限 | 100GB/月 | 100GB/月(ソフト) | | デプロイ容量 | 総量制限なし | 250MB | 1GB | | ビルド自動化 | ◎ Astro対応 | ◎ | △ Actions要 | | 独自ドメイン | 無料 | 無料 | 無料 |

音声ファイルなど大容量アセットを含む静的サイトは帯域無制限のCloudflare Pagesが最適。

前提条件

  • [ ] GitHubアカウントあり
  • [ ] Cloudflareアカウントあり（無料）
  • [ ] Astroプロジェクトがローカルで astro build 成功する状態

Step 1: GitHubリポジトリを作成してpush

`bash

プロジェクトディレクトリに移動

cd /path/to/your-astro-project

Gitリポジトリ初期化（まだの場合）

git init git add . git commit -m "feat: initial commit"

GitHubでリポジトリを作成してリモート登録

gh repo create <repo-name> --private --source=. --push

または公開リポジトリの場合

gh repo create <repo-name> --public --source=. --push `

.gitignore に追加すべきもの:

`gitignore dist/ node_modules/ .env .env.local `

Step 2: astro.config.mjs の site を本番URLに更新

デプロイ後にCloudflareが発行するURLを設定する。（最初はプレースホルダーでも可。後で更新）

`js // astro.config.mjs import { defineConfig } from 'astro/config';

export default defineConfig({ output: 'static', site: 'https://<your-project>.pages.dev', // ← 本番URLに変更 }); `

変更後にcommit & push。

Step 3: wrangler CLIでCloudflare Pagesプロジェクト作成・デプロイ

ブラウザ不要。ターミナルだけで完結する。

`bash

1. wranglerにログイン（ブラウザが1回開く・以降は不要）

wrangler login

2. Pagesプロジェクト作成

wrangler pages project create <repo-name> --production-branch master

3. ビルド

npm run build

4. デプロイ

wrangler pages deploy dist --project-name <repo-name> `

完了すると https://<repo-name>.pages.dev が発行される。

Step 4: astro.config.mjs の site を本番URLに更新してpush

`js // astro.config.mjs export default defineConfig({ output: 'static', site: 'https://<repo-name>.pages.dev', // ← 発行されたURLに変更 }); `

`bash git add astro.config.mjs git commit -m "chore: site URLをCloudflare Pages本番URLに更新" git push origin master `

Step 5: 動作確認

`bash

HTTP 200が返れば成功

curl -s -o /dev/null -w "%{http_code}" https://<repo-name>.pages.dev/ `

  • [ ] トップページが表示される
  • [ ] 音声プレイヤーが動作する
  • [ ] ページ遷移が正常

Step 6（任意）: 独自ドメインを設定

Cloudflare Pagesの設定画面 → 「Custom domains」 → ドメインを入力。CloudflareでDNS管理している場合は自動設定される。

運用: 次回以降のデプロイ（2コマンド）

`bash

ビルドしてデプロイするだけ

npm run build && wrangler pages deploy dist --project-name <repo-name> `

またはGitHub連携してpushで自動デプロイにすることも可能（Cloudflareダッシュボードで設定）。

トラブルシューティング

ビルドが失敗する

`bash

ローカルで先にビルドを通す

npm run build

エラーが出たら修正してからpush

`

音声ファイルが404になる

public/audio/ のファイルが dist/audio/ にコピーされているか確認。Astroは public/ の中身をそのまま dist/ にコピーする仕様。

astro check でTypeエラーが出てビルドが止まる

package.json の "build" スクリプトが "astro check && astro build" になっている場合、 Cloudflare側のビルドコマンドを astro build（checkなし）に変更して一時回避できる。

関連

  • 実際に適用したプロジェクト: ai-conpany-dev/004-learning-textbook
  • Astro公式 Cloudflare Pages ガイド: https://docs.astro.build/en/guides/deploy/cloudflare/