Cloudflare Pagesとは?静的サイトホスティング

《 Cloudflare完全ガイド 目次へ 》

前ページのWorkersが「コードを動かす」サービスだったのに対し、このページで扱うCloudflare Pagesは「作ったサイトを置いて公開する」サービスです。HTMLやCSS、画像といったファイル一式をCloudflareに預けると、世界中へ高速に配信されるWebサイトになります。

Pagesは長らく、Cloudflareで静的サイトを公開するときの標準的な入口でした。ただし現在は、前ページで触れたとおりWorkers自身が静的ファイルの配信に対応しており、両者の関係が変わってきています。このページでは、Pagesの仕組みを理解したうえで、いまどちらを選ぶべきかまで整理します。

このページで分かること

  • 静的サイトとは何か、動的サイトと何が違うのか
  • Cloudflare Pagesが何をしてくれるサービスなのか
  • Git連携による自動デプロイと、プレビューデプロイ・ロールバックの仕組み
  • Pages Functionsで動的な処理を足す方法
  • 無料枠と主な制限
  • PagesとWorkersの現在の関係と、これから作るならどちらを選ぶか

静的サイトと動的サイト

Webサイトの作りは、大きく2つに分けられます。

静的サイトは、あらかじめ用意されたHTMLファイルをそのまま返すサイトです。誰がいつアクセスしても同じファイルが返ります。会社案内、ドキュメント、ブログ(記事を事前にHTML化しておく方式)などが該当します。

動的サイトは、アクセスのたびにサーバー側でHTMLを組み立てるサイトです。ログイン状態や検索条件によって内容が変わります。WordPressで作られたサイトは、この動的サイトの代表例です。

静的サイトはサーバー側で何も実行しないため、動作が速く、壊れにくく、攻撃されにくいという特徴があります。第1章のCDNと相性がよいのもこのためで、内容が変わらないファイルはキャッシュに置いてしまえば、世界中どこからでも即座に返せます。

近年は、ReactやVue、Astro、Hugoといったツールで開発し、公開時に静的なHTML一式へ書き出す作り方(静的サイトジェネレーター)が広く使われています。Pagesは、こうして書き出したファイルを預かって配信する場所です。

Cloudflare Pagesとは

Cloudflare Pagesは、静的サイトを預かってCloudflareの世界規模ネットワークから配信するホスティングサービスです。単なるファイル置き場との違いは、公開までの作業を丸ごと引き受けてくれる点にあります。

主な役割は次のとおりです。

  • GitHubやGitLabのリポジトリと連携し、コードを更新するだけで自動的に公開する
  • 必要ならビルド(元のソースから公開用のファイルを生成する処理)もCloudflare側で実行する
  • 生成されたファイルを全世界の拠点へ配信し、CDNとして高速に返す
  • 独自ドメインとHTTPS証明書を自動で設定する

サーバーの契約もFTPでのアップロード作業も要りません。転送量(帯域)の課金がなく、アクセスが増えても料金が跳ね上がらない点も特徴です。

デプロイの流れ

Pagesの中心にあるのはGit連携です。手順は次のように進みます。

Pagesのデプロイの流れ
図1:Pagesのデプロイの流れ
  1. GitHub(またはGitLab)のリポジトリをPagesのプロジェクトに接続する
  2. ビルドコマンド(例:npm run build)と出力先フォルダ(例:dist)を登録する
  3. コードをgit pushすると、Pagesが変更を検知してビルドを実行する
  4. 生成されたファイルが世界中の拠点へ配信され、サイトが更新される

一度設定してしまえば、以降の更新作業は「コードを書いてpushする」だけになります。ビルドの必要がない素のHTMLサイトなら、ファイルを直接アップロードする方法(Direct Upload)も選べます。

プレビューデプロイ

Pagesの便利な点として、本番以外のブランチにpushすると、そのブランチ専用のURLが自動で発行されます。これをプレビューデプロイと呼びます。

本番サイトには一切影響を与えないまま、実際に動く状態のサイトをその場で確認でき、URLを共有すればレビューを依頼することもできます。修正案を本番へ反映する前に、実物で確認できるわけです。

ロールバック

過去のデプロイは履歴として残り、管理画面から選ぶだけで以前の状態へ即座に戻せます。公開後に不具合が見つかっても、原因調査より先に「とりあえず前の状態へ戻す」判断が取れるのは、運用上の大きな安心材料です。

Pages Functions:静的サイトに動的処理を足す

静的サイトでも、フォームの送信先や、外部APIを呼び出す小さな処理が必要になることがあります。そのために用意されているのがPages Functionsです。

プロジェクト内のfunctionsフォルダにファイルを置くと、その配置がそのままURLの経路になります(ファイルベースルーティング)。たとえばfunctions/api/hello.jsを置けば、/api/helloへのアクセスでその処理が動きます。

中身はWorkersと同じ実行環境で動くため、書き方も前ページで見たものと同じです。KVやD1などのバインディングも利用できます。

料金と主な制限

Pagesは無料プランから使え、静的ファイルの配信そのものにリクエスト数や転送量の課金はありません(2026年8月時点)。主な制限は次のとおりです。

  • ビルド回数:Free 月500回まで(同時実行は1件。Proは5件、Businessは20件)
  • ファイル数:Free 1サイトあたり2万ファイル(有料プランは10万)
  • 1ファイルの上限:25MiB。大きな動画などはR2(第6章)に置く運用が推奨されています
  • プロジェクト数:1アカウントあたり100
  • ビルド時間:1回あたり最長20分
  • プレビューデプロイ:数の制限なし

Pages Functionsを使った場合、その実行回数はWorkersと同じ体系で課金されます。無料プランの範囲内であれば、個人サイトの運用は無料で完結します。

PagesとWorkersの関係

ここが現在もっとも混乱しやすい点です。

もともとPagesは「静的サイト向け」、Workersは「コードを動かす向け」と役割が分かれていました。しかしWorkersが静的ファイルの配信に対応したことで、Workersひとつでフロントエンドもバックエンドもまかなえるようになりました。

Cloudflareは現在、フルスタック開発の基盤としてWorkers側に開発資源を集中させる方針を示しています。実際、次の機能はWorkersにはあってPagesにはありません。

  • Durable Objects(次ページ)
  • Cron Triggers(定期実行)
  • 段階的デプロイ(新バージョンへ少しずつ切り替える機能)
  • Workers Logsなどの詳しい監視機能
  • Email Workers、Queuesの受信処理、Rate Limitingなど

一方でPagesにしかない利点も残っています。代表的なのは、Cloudflareでネームサーバーを管理していないドメインでもCNAMEレコードだけで独自ドメインを設定できる点と、前述のファイルベースルーティングです。

Pagesは廃止されたわけではなく、既存のサイトはそのまま動き続けます。ただしこれから新しく作るなら、静的サイトであってもWorkersを選んでおくほうが、後から機能を足すときに困りません。すでにPagesで運用しているサイトについては、不都合がないかぎり急いで移行する必要はありません。

初心者が注意するポイント

  • WordPressは載せられません:PagesはPHPやデータベースを動かす場所ではありません。WordPressサイトをCloudflareで扱う方法は、レンタルサーバー等に置いたまま前段にCloudflareを通す構成になります(第8章で扱います)
  • ビルド設定でつまずきやすい:デプロイが失敗する原因の多くは、ビルドコマンドの誤りか、出力先フォルダ名の指定ミスです。まずビルドログを確認してください
  • 無料枠はビルド回数で先に当たります:配信は無料でも、月500回というビルド回数の制限はあります。小さな修正を何十回もpushすると消費します
  • 公開範囲に注意:プレビューデプロイのURLは、知っていれば誰でも見られます。公開前の内容を守りたい場合は、第3章のCloudflare Accessで保護できます

関連サービス

  • Workers:静的アセット配信に対応し、現在のフルスタック開発の中心(前ページ)
  • CDN・キャッシュ:Pagesの配信を支える土台(第1章)
  • R2:25MiBを超える大きなファイルの置き場(第6章)
  • Cloudflare Access:公開前のサイトやプレビューに認証を掛ける(第3章)
  • Turnstile:静的サイトのフォームにスパム対策を足す(第2章)

まとめ

  • 静的サイトは、あらかじめ用意したHTMLをそのまま返す作り。速く、壊れにくく、CDNと相性がよい
  • Cloudflare Pagesは、その静的サイトをGit連携で自動的にビルド・公開・配信するホスティングサービス
  • ブランチごとのプレビューデプロイと、ワンクリックのロールバックが標準で使える
  • Pages Functionsを使えば、Workersと同じ実行環境で動的な処理も足せる
  • 無料プランで帯域無制限。制限はビルド回数(月500回)やファイル数(2万)などに掛かる
  • 現在Cloudflareは静的アセット対応のWorkersへ機能投資を集中している。新規に作るならWorkers、既存のPagesサイトはそのまま運用で問題ない

次のページでは、同じく「サーバーを持たずに使える実用サービス」であるEmail Routingを扱います。取得したドメインで、メールサーバーを立てずにメールアドレスを作る仕組みです。

次に読む

→ ガイドの目次に戻る

※本記事の情報は 2026年8月時点のものです。

タイトルとURLをコピーしました