Web サイトデプロイサービス Cloudflare Pages（クラウドフレアページ）についてまとめています。

Cloudflare の新サービスです。
2020年12月にベータ版として提供がはじまり、2021年5月に正式公開となりました。

目次

公式・関連サイト

 Cloudflare Pages
 Cloudflare Pages documentation | Cloudflare Docs

特徴・他の選択肢

  • CDN はもちろん、配信元サーバ（Origin サーバ）さえも Cloudflare にあり、
    通常の Cloudflare を用いた方法よりも更に素早い表示を期待できます。
  • GitHub 連携で、基本的に git push をするだけで、
    ビルド・デプロイされ、素早く Web 公開できます。
  • 多くの静的サイトジェネータを用いたビルドに対応しています。
    （🎈 GitHub Pages そのものは 🎈 Jekyll のみ）

一方、ビルド回数が月 500 回までやファイルサイズなどに制限があり、
更新が激しい Web サイトなど、使用をおすすめできない環境があります。
また Cloudflare Pages 独自の CLI を持ちません。Git を使用する必要があります。

Cloudflare のサーバで静的サイトを直接公開する方法としては
他に Cloudflare Workers の機能である Workers Sites を用いる方法もあります。
また Cloudflare Workers は CDN エッジサーバで動的処理ができるサービスです。
1 日のリクエスト数（＝参照数）などに制限がありますが、
1 日で更新回数があっても更新するファイルが少ない場合は、
Cloudflare Pages よりも Workers Sites の方が安定して使えるようになります。
また、Cloudflare Pages は一部使えないドメインがありますが、
Workers Sites は Cloudflare にサイト登録できるドメインは使用可能です。

🎈 Cloudflare Workers Sites | ふうせん🎈 FU-SEN

Cloudflare Pages と Cloudflare Workers は統合が検討されているため、
その辺を中心に仕様が変わる可能性があります。

使用するための準備

Cloudflare Pages を使用できるようにするために、いくつか準備が必要です。

 Cloudflare

Cloudflare Pages は現存のアカウントから使用できるようになるため、
CDN・ネームサーバ を使用できるアカウントが必要です。
すでに登録・使用している場合、このアカウントを使用できます。

 GitHub

必ず GitHub と連携して使用するため、GitHub アカウントが必要です。

なお、公開当初は申請を要しましたが、
2021年3月より、上記のアカウントがあれば、すぐに使用できるようになった模様です。

とりあえず Web サイトを作ってみる

 Pages - Getting started | Cloudflare Docs

まず GitHub 側でプロジェクトとしてページを作成します。

 GitHub

とりあえずわかりやすく index.html だけ簡単に生成してみると良いでしょう。
プライベートリポジトリで構いません。GitHub にコミットしておきます。

 Cloudflare

Cloudflare をログインすると右側に ⚡ ページ ベータ版 の表示があります。
ここを選びます。

ページ の表示になったら プロジェクトを作成 を選びます。

GitHub アカウントの連携になるので、作成したアカウントを選びます。
リポジトリは限定させる事もできますが、全てのリポジトリを許可しても
Cloudflare Pages 側でリポジトリを選択してデプロイするので、問題ありません。

GitHub のリポジトリ一覧になるので、作成しておいたリポジトリを選択します。

プロジェクト名 は プロジェクト名.pages.dev になります。
このサブドメインは後にプロジェクト名を変更しても変更されませんので、
ここで確実に設定して下さい。

プランチはデプロイを行うブランチです。
GitHub の初期状態では生成時期により main または master になっています。

ビルドの設定 になりますが、ここでは HTML で特にビルド不要のため、
なにも変更せず 保存してデプロイする をクリックします。

「ビルドおよびデプロイを実行しています」という画面になります。
1 分位で完了し、Web サイトが参照できるようになっています。

あとは GitHub へのコミットを行えば、Cloudflare Pages が検知して
ビルド・デプロイを行って更新を行います。

なお、この手順は 誰でも参照できる Web サイトになっています。
参照されなくない場合は Cloudflare Pages 側で
プロジェクトの削除 を行い、Web サイトの公開をなくして下さい。

設定画面

ビルド・デプロイが完了したプロジェクトは ページ で一覧表示されるようになります。

デプロイ

最新のビルドとデプロイの進捗を表示します。

カスタム ドメイン

デフォルトでは プロジェクト名.pages.dev ですが、
独自ドメインを設定して使用する事が可能です。

ドメインを Cloudflare にサイト登録している場合、
Cloudflare の動作を有効にしてあれば、
自動的に DNS の該当レコードを変更します。

Cloudflare のサイト登録していないドメイン・サブドメインも
Cloudflare Pages でカスタムドメインの設定を行い、使用可能です。
CNAME レコードを設定します。
もちろんサブドメインを使用する事もできます。

サブドメイン 種類 値
使用するドメイン名 CNAME プロジェクト名.pages.dev

Punycode が使われているドメインや 🎈 EU.org など
設定しても「非アクティブ」状態になり、使用できない場合があります。
🎈 Workers Sites は使えるので、こちらを試してみて下さい。

設定

次の項目があります。

  • 一般 - プロジャクトの詳細・メンバー・Access ポリシー・Web Analtics・プロジェクトを削除
    プロジェクト名をここで変更できますが、 プロジェクト名.pages.dev は変更されません。
    Web Analytics は  Cloudflare  Cloudflare Web Analytics で表示されますが、
    Pages からの登録は Web Analytics 直接のサイト登録とは別に扱われます。
  • ビルド & デプロイ - プランチ・リポジトリおよびビルドコマンドなどを変更できます。
  • 環境変数 - 任意の環境変数を設定できます。

転送

 Pages - Redirects | Cloudflare Docs

_redirects ファイルで URL の転送を設定できます。ビルド後のルートに置いて下さい。
行毎に 転送元 転送先 ステータスコード です。最大は 100 行までです。
ワイルドカードなどは非対応です。

/example1 / 301
/example2 /file.html 302
/example https://example.net.eu.org

設定 - カスタムドメイン で独自ドメインを設定している場合、
Cloudflare の他手段を用いた転送も可能です。これは無料プランでも可能です。

ビルド

 Pages - Build configuration | Cloudflare Docs

Cloudflare Pages の魅力はフレームワークや静的サイトジェネレータなどを
Cloudflare Pages のサーバでビルドして公開できる事になります。
ビルド コマンド は空白にできるので、HTML ファイルなどをプロジェクトに入れ、
Cloudflare Pages でのビルド動作をしないようにもできますが、
ビルド環境は構築されているので、ビルドの回数としてはカウントされているようです。

なお、プログラミング言語も表示されていますが、これを用いてビルドできるのであって、
動的ファイルとしてプログラミング言語を実行できるわけではない事にご注意下さい。

制限

 Pages - Platform - Limits | Cloudflare Docs

Cloudlfare を無料プランで使用している場合、次の制限があります。

  • ビルド - 月 500 回まで
  • ドメイン割り当て - プロジェクト毎に 10 ドメインまで ※
  • ファイル数 - 20000 ファイル
  • ファイルサイズ - 最大 25MB

※「プロジェクト毎」の制限で、プロジェクト数は制限の記載がありません。

ビルドが「月 500 回まで」なので、日に換算するとおよそ 16 回となります。
まともに使うとすぐにビルド回数の制限に達する事になりますので、
特に更新頻度の多い Web サイト・ブログは Cloudflare Pages にしない方が良さそうです。
現在のところ GitHub プロジェクトへのコミット git push で毎回必ずビルドされます。

特定のファイルをダウンロードさせる目的のサイトとしても使いにくいでしょう。
おそらくウイルス・マルウェア対策だと思われます。

なお、次の項目は Cloudflare 自体からの継承で無制限です。

  • サイト数 - 無制限
  • 帯域幅 - 無制限
  • サイトの参照数 - 無制限

ただし、短時間で多数のデプロイを行った場合は
新たな Pages プロジェクトを無効にする場合があるようです。
これも悪用防止からの対策と思われます。

Q&A

Cloudflare Pages のサーバはどこにありますか？

 CloudflareのグローバルなAnycast Network

Cloudflare の CDN サーバがそのまま Cloudflare Pages でも採用されています。
日本では東京・大阪にサーバがあります。

Cloudflare CDN との違いはビルド・デプロイされた全てのファイルが
Cloudflare サーバから配信されるようになる点です。
その点では特定場所に存在する配信サーバが参照される CDN よりも
高速な表示を実現できるため、メリットになりえる場合があるでしょう。

SSL は機能しますか？

～.pages.dev では SSL（TLS）が必ず適用されます。
Cloudflare 発行のサーバ証明書になります。
ちなみにデフォルトは ～.pages.dev となっていますが、
.dev ドメインは Web サイトは https 必須のドメインになっています。

独自ドメインを使用する場合も同様に SSL が適用されます。
ネームサーバも Cloudflare で管理している場合、
CDN 関連の機能は動作しません。（SSL・TLS、ページルール、Worker など）

日本語ドメイン・サブドメインは使用できますか？

日本語.pages.dev は Punycode（ xn-- ではじまる文字列）で設定可能で、
問題なく使用できる事を確認しています。

🎈 fu-sen/xn--ck8h.pages.dev | GitHub

他言語はもぢろん、絵文字も可能です。
運営者は実際に 🎈.pages.dev を使用しています。

一方、カスタムドメインでの指定は Punycode 指定で登録はできるのですが、
（Cloudflare 管理の場合、ネームサーバも正常に設定されます）
「非アクティブ」になり、表示できませんでした。

GitHub プロジェクトは公開する必要がありますか？

プライベートリポジトリのままで使用できます。
そのため、GitHub へのコミットは必要になりますが、
ソースなどをプロジェクト公開する事なく、Web サイトを公開する事が可能です。

Not Found は任意の表示が可能ですか？

404.html にする事で表示可能です。

GitHub Pages のように .html を省略したりできますか？

できます。例えば page.html を page で参照できます。

.html ファイルを表示した時に URL の .html が表示されません。

URL の末尾が file.html の時 file に変化します。
あえてそのような仕様にしていると思われます。
通常の Web サイト や ブログ では問題なく表示できると思われますが、
JavaScript で URL 操作する場合は注意を要します。

日本語のファイル・フォルダは正常に表示できますか？

運営者が試したところ、正常に表示できる事を確認できています。

サブドメインを誤って公開してしまいました。変更できますか？

設定からプロジェクト名の変更ができますが、ここでは変更されません。
一度 Cloudflare Pages 側のプロジェクトを削除して、再度生成して下さい。

サブドメイン.pages.dev は検索結果に表示されますか？

 検索 site:pages.dev | Google

制限されていませんので、Google などの検索結果に表示されます。
無料で使用できる自由度があり、悪用される可能性があるので、
まともな Web サイトを運用する場合は独自ドメインを設定するのが良いでしょう。

検索結果に出てほしくない Web サイトの場合、
クローラーの収集を避けるため、次を入れた robots.txt を含めて下さい。

User-agent: *
Disallow: /

新たに静的サイトジェネレータを使用しましたが、ビルドに失敗します。

設定 - ビルド & デプロイ の ビルドの構成 で
変更した静的サイトジェネータに変更して下さい。
変更し忘れてビルドされて失敗している場合、そのビルドを表示したところで
ビルド ログ の下に ビルドを再試行 があります。

Hugo はデフォルトのバージョンが 0.54.0 ととても古くなっていて、
テーマレベルで対応されていない場合が多くなっています。
環境変数 HUGO_VERSION でバージョンを指定できるので、
これで新しいバージョンに設定してビルドしなおしてみて下さい。

 0.84.3 breaks deployments on Cloudflare Pages #8714 | GitHub gohugoio/hugo issues

Hugo 0.84.3 は Cloudflare Pages でデプロイに失敗する事が分かっています。
Hugo 0.84.4 で対処されています。

ビルドの構成を変更したところ、コミットしても公開されなくなりました。

設定 - ビルド ＆ デプロイ で「ビルドの構成」を変更した時に
「ブランチのデプロイ」にある「本番環境のブらンチ」の項目が
消えているのを確認しています。
そのまま git push すると プレビュー 状態になり、公開 URL へ反映されません。

設定 - ビルド ＆ デプロイ を確認し、
「ブランチのデプロイ」にある「本番環境のブらンチ」の項目がなくなっている場合は
本番環境のブらンチを変更 を選択し、ブランチを選択しなおして下さい。
その後 git push で反映されるようになります。