Agentive
ツールレビュー

Cloudflare Pages完全ガイド — 無料で高速な静的サイトホスティング

約8分で読めます

Cloudflare Pages完全ガイド — 無料で高速な静的サイトホスティング

Cloudflare Pagesは静的サイトを無料でホスティングできるサービスだ。Vercelと異なりビルド回数制限が緩く、帯域制限が実質無制限。Astro、Next.js、Hugo等あらゆるフレームワークに対応し、git pushだけで自動デプロイできる。

Cloudflare Pages vs 競合サービス比較

項目Cloudflare PagesVercelNetlifyGitHub Pages
無料帯域無制限100GB/月100GB/月100GB/月
無料ビルド500回/月100回/月(Hobby)300分/月無制限
プレビューURLありありありなし
カスタムドメイン無料SSL無料SSL無料SSL無料SSL
Edge FunctionsWorkers連携Edge FunctionsEdge Functionsなし
SSR対応あり(Workers)ありありなし
分析Web Analytics無料有料有料なし

Astroサイトのデプロイ手順

1. プロジェクト作成からデプロイまで

# Astroプロジェクト作成
npm create astro@latest my-site -- --template blog
cd my-site

# Cloudflare Pagesアダプター追加
npx astro add cloudflare

# ローカルビルドテスト
npm run build

# GitHubリポジトリにプッシュ
git init && git add -A && git commit -m "initial"
gh repo create my-site --public --push --source=.

2. Cloudflare Pagesプロジェクト設定

# Wrangler CLIでプロジェクト作成
npx wrangler pages project create my-site

# ビルド設定
# Framework preset: Astro
# Build command: npm run build
# Build output directory: dist

# 手動デプロイ（テスト用）
npx wrangler pages deploy dist

3. wrangler.toml設定

# wrangler.toml
name = "my-site"
compatibility_date = "2026-04-01"
pages_build_output_dir = "./dist"

[vars]
SITE_URL = "https://my-site.pages.dev"

# 環境変数（本番/プレビュー）
[env.production.vars]
API_URL = "https://api.example.com"

[env.preview.vars]
API_URL = "https://staging-api.example.com"

プレビューデプロイの活用

Cloudflare Pagesの最大の強みはプレビューデプロイ。PRごとに固有のURLが発行され、レビュー前に実際のサイトを確認できる。

プレビューURLの構造

# mainブランチ → 本番URL
https://my-site.pages.dev

# feature-xブランチ → プレビューURL
https://abc123.my-site.pages.dev

# PRごとに自動生成
https://pr-42.my-site.pages.dev

GitHub Actionsとの連携

# .github/workflows/preview-comment.yml
name: Preview URL Comment
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  comment:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Build
        run: npm ci && npm run build
      - name: Deploy Preview
        id: deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          command: pages deploy dist --project-name=my-site --branch=${{ github.head_ref }}
      - name: Comment PR
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
              body: `Preview: ${{ steps.deploy.outputs.deployment-url }}`
            })

カスタムドメイン設定

# カスタムドメインの追加
npx wrangler pages project edit my-site --production-branch=main

# DNSレコード設定（Cloudflare DNSの場合）
# CNAME my-site.pages.dev → 自動設定
# SSL証明書 → 自動発行（Let's Encrypt）

パフォーマンス最適化

キャッシュ制御ヘッダー

// functions/_middleware.ts
export const onRequest: PagesFunction = async (context) => {
  const response = await context.next();

  // 静的アセットは1年キャッシュ
  const url = new URL(context.request.url);
  if (url.pathname.match(/\.(js|css|png|jpg|webp|woff2)$/)) {
    response.headers.set('Cache-Control', 'public, max-age=31536000, immutable');
  }

  // HTMLは10分キャッシュ + stale-while-revalidate
  if (url.pathname.endsWith('/') || url.pathname.endsWith('.html')) {
    response.headers.set('Cache-Control', 'public, max-age=600, stale-while-revalidate=3600');
  }

  return response;
};

デプロイ速度の実測データ

Astroサイト（20ページ、画像30枚）でのビルド・デプロイ時間。

フェーズCloudflare PagesVercelNetlify
ビルド18秒22秒25秒
デプロイ5秒8秒12秒
合計23秒30秒37秒
CDN伝播即時(300+拠点)即時数秒
TTFB(東京)12ms18ms25ms

関連記事

A

Agentive 編集部

AIエージェントを実際に使い倒す個人開発者。サイト制作の自動化を実践しながら、その知見を発信しています。