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

はじめに#

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

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

この記事では Cloudflare Pages の仕組みと特徴を入門レベルで整理します。

基本的な仕組み#

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

flowchart LR
    A["git push"] --> B["Cloudflare Build"]
    B --> C["静的アセット"]
    C --> D["エッジ配信<br/>300+ 都市"]

GitHub / GitLab のリポジトリに push する
Cloudflare のビルド環境でフレームワークのビルドコマンド（npm run build など）を実行
出力された静的ファイル（HTML, CSS, JS, 画像）をエッジネットワークに配信

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

プロジェクトの作成#

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

ダッシュボードから#

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

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

CLI から#

$ 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 が自動的に発行されます。

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

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

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

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

カスタムドメイン#

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

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

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

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

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

環境変数#

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

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

ビルドキャッシュ#

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

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

Pages Functions#

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

1
export const onRequestGet: PagesFunction = async () => {
2
  return Response.json({ now: new Date().toISOString() });
3
};

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

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

他サービスとの比較#

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

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

まとめ#

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

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