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

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

目次

公式・関連サイト

 Cloudflare Pages
 Cloudflare Pages documentation | Cloudflare Docs

特徴・他の選択肢

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

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

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

Cloudflare Workers も CLI wranglers を用いてデプロイできます。

使用するための準備

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

 Cloudflare

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

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

 Pages - Getting started | Cloudflare Docs

とりあえずわかりやすく index.html だけ簡単に生成してみると良いでしょう。

 Cloudflare

Cloudflare をログインすると左サイドバー ⚡ Pages の表示があります。
ここを選びます。

ページ の表示になったら プロジェクトを作成 を選びます。
3 種類の方法があります。

Git プロジェクトと連携する

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

Git 側で生成するレポジトリは任意の名前で生成できます。
プライベートリポジトリでも使用可能です。

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

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

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

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

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

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

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

アップロードする

プロジェクト名を入力した後、
index.html や画像ファイルなどを含めたフォルダまたは .zip ファイルを
Web 上にドラッグ＆ドロップしてデプロイできます。

この方法はビルド作業を行いませんが、
Web 上で比較的簡単に Web 公開を完結できます。

wrangler でデプロイする

2022年5月より 🎈 Cloudflare Workers 向けの CLI wrangler が
Version 2 になり、wrangler pages ～ の
Cloudflare Pages 向けコマンドが追加されました。

node.js をインストールしている状態で、次のコマンドでインストールします。

npm install -g wrangler

プロジェクトを生成します。
独自ドメインを設定しない場合 プロジェクト.pages.dev です。

wrangler pages project create プロジェクト --production-branch main

node_modules/.cache/wrangler/pages.json が生成されます。
この pages.json にはアカウント ID が含まれています。
この部分はデプロイの対象外ですが、
不特定多数が参照するところへファイルを公開しないで下さい。

あとは次のコマンドでデプロイし、公開できます。

wrangler pages publish フォルダ

ここで表示される URL は確認用の一時的なものです。
例えば 🎈 Hugo を使用する場合は、次のようになります。

hugo
wrangler pages publish public

この方法はビルド作業を行いませんので、別途ビルドコマンドが必要です。

設定画面

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

デプロイ

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

カスタム ドメイン

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

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

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

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

設定

次の項目があります。

転送

 Pages - Redirects | Cloudflare Docs

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

/example1 / 301
/example2 /file.html 302
/example https://example.net.eu.org
/site/* /404.html 301
/weblog/* /news/:splat 301
/blog/:year/:month/:date/:slug /news/:year/:month/:date/:slug 301

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

ヘッダ

 Headers - Redirects | Cloudflare Docs

_headers を用いて任意のヘッダを付加する事ができます。

#コメント
URL
  名前: 値
  名前: 値

URL
  名前: 値

:

URL は https://ドメイン名 を外して指定しますが、
複数のドメインを割り当てている場合は https://ドメイン名 も付加できます。

/*
  Access-Control-Allow-Origin: *

このプロジェクトで Access-Control-Allow-Origin: * を付与し、
外部からの参照を完全に許可します。（CORS）

ビルド

 Pages - Build configuration | Cloudflare Docs

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

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

制限

 Pages - Platform - Limits | Cloudflare Docs

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

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

ビルドが「月 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-- ではじまる文字列）で設定可能で、
問題なく使用できる事を確認しています。他言語はもぢろん、絵文字も可能です。

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

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

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

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

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