Seu Dev Notes

Cloudflare Pages とは何か：静的サイトホスティングの実力

Cloudflare Pages は Git に push するだけで自動ビルドとエッジ配信が動く静的サイトホスティングです。ブランチプレビュー、カスタムドメイン、Pages Functions、Vercel・Netlify との帯域無制限の差まで入門レベルで整理します。

· 1,299 字 · 6 分
目次 9 sections
  1. 01 はじめに
  2. 02 基本的な仕組み
  3. 03 プロジェクトの作成
  4. ダッシュボードから
  5. CLI から
  6. 04 ブランチプレビュー
  7. 05 カスタムドメイン
  8. 06 ビルド設定のカスタマイズ
  9. 環境変数
  10. ビルドキャッシュ
  11. 07 Pages Functions
  12. 08 他サービスとの比較
  13. 09 まとめ

はじめに#

Cloudflare Pages は Cloudflare が提供する静的サイトホスティングサービスです。GitHub や GitLab のリポジトリと連携し、push するだけで自動ビルド・デプロイが実行されます。

Vercel や Netlify と同じカテゴリのサービスです。差別化ポイントは、Cloudflare のエッジネットワーク（世界 300 都市以上）上に直接配信される点と、無料枠の太さです。

基本的な仕組み#

Cloudflare Pages のデプロイフローは以下の通りです。

flowchart LR
    A["git push"] --> B["Cloudflare Build"]
    B --> C["静的アセット"]
    C --> D["エッジ配信<br/>300+ 都市"]
  1. GitHub / GitLab のリポジトリに push する
  2. Cloudflare のビルド環境でフレームワークのビルドコマンド（npm run build など）を実行
  3. 出力された静的ファイル（HTML, CSS, JS, 画像）をエッジネットワークに配信

開発者がやることは「push する」だけです。CI/CD の設定、CDN の構築、SSL 証明書の管理はすべて Cloudflare が担います。

プロジェクトの作成#

Cloudflare ダッシュボードから作成する方法と、CLI（wrangler）から作成する方法があります。

ダッシュボードから#

  1. Cloudflare ダッシュボード → Workers & Pages → Create
  2. Pages タブを選択
  3. GitHub アカウントを接続し、リポジトリを選択
  4. ビルド設定（フレームワーク、ビルドコマンド、出力ディレクトリ）を指定
  5. Deploy

主要なフレームワーク（Astro, Next.js, Nuxt, SvelteKit, Hugo, Gatsby など）にはプリセットが用意されています。リポジトリを選択すると、ビルドコマンドと出力ディレクトリが自動的に設定されます。

CLI から#

Terminal window
$ pnpm add -g wrangler
$ wrangler pages project create my-site
$ wrangler pages deploy dist

wrangler pages deploy は指定したディレクトリの中身をそのままアップロードします。Git 連携なしで使えるため、GitHub Actions など外部の CI からデプロイしたい場合に便利です。

ブランチプレビュー#

Cloudflare Pages の最も便利な機能の 1 つがブランチプレビューです。

main 以外のブランチに push すると、そのブランチ専用のプレビュー URL が自動的に発行されます。

本番:              my-site.pages.dev
プレビュー（ハッシュ）: abc123.my-site.pages.dev
プレビュー（ブランチ）: fix-api.my-site.pages.dev

プレビュー URL はコミットごとに変わるハッシュ形式と、ブランチ名を使った固定エイリアス形式の両方が同時に発行されます。ハッシュ形式は「このコミット時点」の URL としてリグレッション確認に、ブランチ形式は PR のレビュー URL として共有するのに向きます。

PR ごとにプレビュー環境が立ち上がるため、レビュアーがローカルでビルドしなくても変更内容を確認できます。GitHub にはコメントでプレビュー URL が自動投稿されます。

プレビューデプロイは本番と同じエッジネットワーク上で配信されるため、パフォーマンス面でもほぼ本番と同じ条件でテストできます。

カスタムドメイン#

my-site.pages.dev のデフォルトドメインに加えて、独自ドメインを設定できます。

  1. ダッシュボード → Pages プロジェクト → Custom domains
  2. ドメインを入力
  3. DNS レコードの追加を承認

Cloudflare の DNS を使っている場合は自動的に CNAME レコードが追加されます。SSL 証明書も自動で発行・更新されるため、手動での管理は不要です。

外部の DNS を使っている場合は、表示される CNAME レコードを手動で追加します。

ビルド設定のカスタマイズ#

環境変数#

ダッシュボードの Settings → Environment variables からビルド時の環境変数を設定できます。Production と Preview で異なる値を設定することも可能です。

Production:  API_URL = https://api.example.com
Preview:     API_URL = https://staging-api.example.com

ビルドキャッシュ#

Cloudflare Pages はビルド間で node_modules をキャッシュします。2 回目以降のビルドは依存のインストールがスキップされるため、その分ビルドが速くなります。

キャッシュが原因でビルドが失敗する場合は、ダッシュボードからキャッシュを手動でクリアできます。

Pages Functions#

functions/ ディレクトリにファイルを配置すると、サーバーサイドの処理を追加できます。ランタイムは Cloudflare Workers と同じ V8 Isolate 環境です。

functions/api/time.ts
export const onRequestGet: PagesFunction = async () => {
  return Response.json({ now: new Date().toISOString() });
};

ファイルパスがそのままルーティングになります。上の例では /api/time に GET リクエストを送ると JSON が返ります。

Pages Functions は静的サイトに動的機能を追加するオプションであり、複雑なバックエンドが必要なら Workers を別途使う方が適切です。

他サービスとの比較#

Cloudflare PagesVercelNetlify
無料枠のビルド数500 回/月6,000 分/月300 分/月
帯域無制限100 GB/月100 GB/月
エッジロケーション300+グローバル CDNグローバル CDN
サーバーサイドPages FunctionsServerless FunctionsNetlify Functions
プレビューデプロイ全ブランチ自動全ブランチ自動全ブランチ自動

Cloudflare Pages の突出したメリットは 帯域無制限 です。Vercel や Netlify では無料枠の帯域を超えると課金が始まります。Cloudflare Pages にはこの制限がありません。画像が多いサイトやアクセスが読めないサイトでは大きな差になります。なお、各サービスの料金体系は頻繁に変更されるため、最新の上限値は公式サイトで確認してください。

まとめ#

  • Cloudflare Pages は Git 連携の自動ビルド・デプロイ、ブランチプレビュー、SSL 自動管理が揃った静的サイトホスティング
  • 帯域無制限・月 500 ビルドの無料枠は個人開発には十分すぎる水準
  • Pages Functions で軽量なサーバーサイド処理も追加可能
  • より詳しい Workers との使い分けはこちらの記事を、無料枠の全体像はこちらの記事を参照

静的サイトのホスティング先を探しているなら、まずは Cloudflare Pages を試してみるのがおすすめです。GitHub リポジトリを接続して push するだけで動きます。