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

2020年12月に提供がはじまった Cloudflare のベータ版サービスです。

Cloudflare のサーバで静的サイトを直接公開する方法としては
他に Cloudflare Workers の機能である Workers Sites を用いる方法もあります。

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

Cloudflare Pages と Cloudflare Workers は統合が検討されているため、
この 2 サービスは後に仕様が変わる可能性があります。

目次

公式・関連サイト

 Cloudflare Pages
 Cloudflare Pages documentation | Cloudflare Docs

使用するための準備

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

 Cloudflare

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

 GitHub

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

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

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

 Pages - Getting started | Cloudflare Docs

この手順は URL が分かれば誰でも参照できる Web サイトになります。
ここでは robots.txt を生成していないので、クローラーが参照し、
検索結果に反映される Web サイトになる事にご注意下さい。

 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 の動作を有効にしてあれば、
Cloudflare Pages で CNAME レコードを作成します。

Cloudflare のサイト登録していない場合は、
CNAME レコードを設定します。
もちろんサブドメインを使用する事もできます。

サブドメイン 種類 値
使用するドメイン名 CNAME custom.pages.dev

🎈 EU,org など独自ドメインのように使えるサブドメインは
Domain contains invalid TLD (Code: 8000015) の下部表示で
あえて設定できないようになっている事を確認しています。
同じ理由で一部のドメインも設定できないとの報告があります。
Cloudflare そのものにはサイト登録できても
Cloudflare Pages ではドメイン設定使えないケースがある事になります。
🎈 Workers Sites は使えるので、こちらを試してみて下さい。

設定

次の項目があります。

  • 一般 - プロジャクトの詳細・メンバー・Access ポリシー・プロジェクトを削除
    プロジェクト名をここで変更できますが、 プロジェクト名.pages.dev は変更されません。
  • ビルド & デプロイ - プランチ・リポジトリおよびビルドコマンドなどを変更できます。
  • 環境変数 - 任意の環境変数を設定できます。

ビルド

 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 よりも
高速な表示を実現できるため、メリットになりえる場合があるでしょう。

GitHub Pages と比べてのメリットは？

ビルド機能が備わっていて、簡単な設定で使用できます。
静的サイトジェネレータなどを使用している場合はメリットがあるでしょう。

GitHub Pages の制限とは制限が別になる、というメリットもあります。

SSL は機能しますか？

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

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

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

2021年3月現在、 404.html 固定で表示するようになっています。

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

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

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

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

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

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

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

 検索 site:pages.dev | Google

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

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

User-agent: *
Disallow: /

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

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

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

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

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

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

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

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

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

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

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

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

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