Cloudflare Workers（クラウドフレアワーカーズ）で静的サイトを公開できる Workers Sites（ワーカーズサイト）についてまとめています。

Cloudflare Workers は JavaScript で記載された動的処理を
Cloudflare のエッジサーバで行う事ができます。
そのため、近場のサーバから得られるため、レスポンスの速さを期待できます。
KVS 型のデータベース Workers KV が付随しています。
この KV に静的サイトを入れて公開するのが Workers Sites です。

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

直接 Cloudflare サーバから Web 公開する方法として、
GitHub プロジェクトを用いる Cloudlfare Pages が
2020年12月から公開されています。
Cloudlfare Pages はビルド回数の制限がありますが、公開後は無制限です。

🎈 Cloudflare Pages | ふうせん🎈 FU-SEN

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

Cloudflare へログインした後、右サイドバーにある Workers を選びます。
ここでサブドメインを決めます。プロジェクトは更にサブドメインを付与し、
https://プロジェクト.サブドメイン.workers.dev/ というアドレスになります。
このサブドメインは後に変更できますが、すでにプロジェクトを公開している場合は、
これらの URL も変化する事にご注意下さい。
この workers.dev を用いた URL の代わりに独自ドメインを使用する事も可能です。

Workers CLI として wrangler をインストールします。

npm install -g @cloudflare/wrangler

続いて Cloudflare の認証を行います。次を入れます。

wrangler login

次の表示になるので y を選びます。

Allow Erangler to open a page in your browser? [y/n]

ブラウザが起動するので、認証してトークンを渡します。

wrangler login でうまくいかない場合、（例えば複数環境から使用する場合）
もう一つの認証方法があります。次を入力します。

wragler config

API トークンの入力になります。
Cloudflare の Web サイトへログインし、
右上 - マイプロフィール から上 API トークン を選択し、
「API トークン」の *トークンを作成する+ を選択します。
「API ロークンテンプレート」として Cloudflare Workers を編集する を選択し、
あとは手順のまま進めて下さい。API トークンが表示されるので、
これをコピーし、シェルの入力部分へ貼り付けます。

wrangler whoami

を入力し、Account Name ・ Account ID が表示されればログインできています。

サイトの生成

Workers Sites でのサイト生成は次のコマンドになります。

wrangler generate --site プロジェクト

プロジャクト は英数と - _ が使用できます。

この時 プロジェクト のフォルダとは別に
後ろに文字列が付加されたフォルダができる場合がありますが、
こちらは不要なので削除しても構いません。

次のコマンドでも同じです。こちらは必要なフォルダだけが生成されます。

wrangler generate プロジェクト https://github.com/cloudflare/worker-sites-template

実体は GitHub で公開されているテンプレートのプロジェクトを clone し、
プロジェクト名に合わせて修正しています。

cloudflare/worker-sites-template | GitHub

したがって上の wrangler コマンドがエラーになる場合は単に

git clone https://github.com/cloudflare/worker-sites-template

として worker-sites-template フォルダを名前を変えても構いません。
あとは wrangler.toml を変更すれば、同じ状態になります。

この プロジェクト が URL に影響し、
https://プロジェクト.サブドメイン.workers.dev/ となります。
ドメイン名を使用する場合、そのままだと . が使えないので _ に変更します。

フォルダ構成

できた プロジェクト フォルダの中にファイル・フォルダができています。

public/ フォルダ

public/ フォルダ内が公開される中身のファイルそのものです。

index.html などがありますので、これを編集して下さい。
404.html が Not Found の表示です。画像ファイルは置き換え・削除できます。
試しに作成している場合は、robots.txt や meta タグの付与で、
クローラが見つけてもインデックスしないようにして下さい。

なお、運営者が試したところでは、漢字などの全角文字が含まれている場合は
参照ができない事を確認しています。他の方法での公開を検討して下さい。

wrangler.toml

設定ファイルとなります。編集が必要ですので、開いて下さい。

account_id にシェルで表示されていたものをコピー→貼り付けしておきます。
なくしてしまった場合は次のコマンドで再度表示するか、
Cloudflare の各ドメインで右サイドバーに「アカウント ID」で表示されています。

wrangler whoami

また bucket = "./public" を変更して公開フォルダを変更できます。
🎈 Hugo はそのまま使用できますが、
🎈 Jekyll は ./_site 、🎈 MkDocs は ./site と必要に応じて変更する事ができます。
ビルドはしませんので、別途ビルド操作が必要です。

その他

workers-site/ フォルダには index.js などがあります。
Workers Sites として静的ファイルを公開する前提の場合、
これら他のファイルは触れる必要ありません。

Git 関連のファイルが生成されています。
必要な場合、そのままプロジェクト使用できます。

プレビュー

プレビューは次で行えます。ブラウザが起動します。

wrangler preview --watch

または次で確認用の Web サーバが起動します。
http://127.0.0.1:8787/ で参照できます。

wrangler dev

静的サイトジェネータで公開 URL を入れている場合はうまく動作しません。
静的サイトネェネータのプレビュー機能を用いて下さい。

なお、ファイルを保存しちいる KV は
プラビュー用は公開用とは別に生成されます。

サイトの公開

まず静的サイトネェネータを使用している場合はビルドして
HTML ファイルなどを生成します。例えば Hugo であれば、次のコマンドです。

hugo

公開する場合は次になります。アップロード後、公開 URL が表示されます。

wrangler publish

ページ運営者が試してみたところ、差分アップロードになっていて、
ファイル数が多くても、更新するファイルが少ない場合は短時間に反映されます。

通常近くのエッジサーバで処理されて、すぐに変化を確認できますが、
まれに他所のエッジサーバが処理する場合があり、
この場合反映に 1 分程度要する場合があります。

独自ドメインを使用する

Cloudflare の Web サイトへログインし、
適用したいドメイン名を選択しておきます。

wrangler.toml をテキストエディタで開いて次を編集します。

デフォルトでは プロジェクト.サブドメイン.workers.dev で公開されるよう
次の行が存在しているので削除するか、行頭に # を付けてコメントにします。

workers_dev = true

route にドメイン名を ドメイン名/* という感じに設定します。
ドメイン名はサブドメインも可能です。
* を変えて、適用範囲を指定できるため、
ドメインの一部だけ Workers Site から配信し、
他のところは他のサーバから配信する、という事もできます。

zone_id は Cloudflare のサイトから該当ドメインを選択した時に
右サイドバーに表示されている「ゾーン ID」になります。下は変更しています。

route = "example.com/*"
zone_id = "89ad6912dd7bdscvfbhgbgfddf3332daf25e8f"

これでデプロイしてみます。

wrangler publish

Cloudflare の Web サイトより、ドメイン内の Workers を参照すると、
ルートに route の指定、Worker にプロジェクト名が入ります。

Web サービスでビルドする場合

wrangler.toml に設定する ID と認証代わりの API トークンは
環境変数を用いて値を渡す事ができます。
ソースを公開している場合は必ず環境変数で設定して下さい。

次の値を環境変数で設定できます。
wrangler.toml からは該当項目を丸ごと削除して下さい。

名称	設定する値
CF_API_TOKEN	API トークン
CF_ACCOUNT_ID	`wrangler.toml` の `account_id`
CF_ZONE_ID	`wrangler.toml` の `zone_id` (独自ドメインの場合)

CF_API_TOKEN の代わりに次の設定も可能ですが、
Cloudflare アカウント全体に影響するので、使用を推奨しません。
API トークンはテンプレートの使用で Cloudflare Workers に制限され、
特定ゾーンのみなど、更に範囲を制限して、セキュリティを強化できます。

名称	設定する値
CF_EMAIL	Cloudflare 認証メールアドレス
CF_API_KEY	Global API Key

制限

Cloudflare Workers の制限として、無料使用の場合は次が存在します。
ここでは Workers Sites に影響しそうな項目だけに限定しています。

項目	制限
1 日のリクエスト	1 日 100000 リクエスト
1 分のリクエスト	1 分 1000 リクエスト
同時発信接続	1 リクエスト毎に 6 接続

リクエストは単純に Web の参照数と考えて良いです。
1 リクエストで 1 ファイルの内容を得ます。

上記の制限は UTC 午前 0 時にリセットされます。
日本時間にすると午前 9 時となります。

また KV として、無料プランでは次の制限があります。
KV にファイル内容が入るため、この制限も影響を受けます。
KV の制限は Key・Value 毎＝ファイル毎に時間を管理しているため、
異なるカウント・制限になる事にご注意下さい。
（KV 本来の機能として有効期間を設けた書き込みが可能です）

項目	制限
読み取り	1日 100000
書き込み	1日 1000
リスト	1日 1000
削除	1日 1000
ストレージ	1GB

KV の読み込みは配信サーバ代わりとなり、
Cloudflare エッジキャッシュから読まれる分は対象外のため、
Workers Sites のみの使用であれば、
リクエスト数よりも KM 読み取り分が減ってきます。

一度入れたファイルが更新される場合、
ファイル単位で書き込み・削除を使用します。
ファイルの更新が多くなると使用数が増えるので、
特に短時間で更新するファイルが多くなる Web サイト・ブログは
Workers Sites が不向きになってきます。
例えば静的サイトジェネレータを使用する場合は、
次がファイル更新が多くなるタイミングになります。

静的サイトジェネレータのバージョン更新
（meta タグなどでバージョンを入れている事が多いです）
全ページに関係するテーマ・テンプレートや設定ファイルの更新
minify の設定・解除

公開用とプレビュー用は異なる名前空間で生成されますので、
プレビューを使用した場合はカウントが増えますので、ご注意下さい。

制限を超えた場合、独自ドメインを設定している場合は
エラー表示にするか、CDN として本来の処理を行うかを選択します。
したがって別のサーバにもデプロイをして、
Cloudflare Workers の制限を使い切ったら
別サーバを参照するようにできます。
.workers.dev 使用時はエラーになります。

ファイルは 25MB までの制限があります。
したがって大きなファイルのダウンロードには向きません。

Q&A

Cloudflare の Web 上から編集できないのですか？

Cloudflare Workers として一覧表示があり、クイック編集が存在しますが、
ここから編集できるのは .js ファイルに限られ、
公開する Web の内容は変更できません。
パソコンで編集し、wrangler コマンドで公開する前提となります。

workers.dev は Google などの検索結果に表示されますか？

検索 site:workers.dev

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

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

User-agent: *
Disallow: /

サブドメイン.workers.dev では公開できますか？

できません。必ず https://プロジェクト.サブドメイン.workers.dev/ になります。
ただし、現在 Chrome では一番左のサブドメインが www の時は非表示にするため、
プロジェクトを www にする事で非表示にする手段があります。

EU.org などのサブドメインは使用できますか？

Cloudflare でサイト登録できるサイトであれば、Workers Sites で使用できます。
🎈 EU.org は Cloudflare のサイト登録が可能なので、Workers Sites も使用可能です。
運営者が実際に確認できています。

🎈 CLoudflare Pages では使用できないため、
Cloudflare Pages 統合後は制限が生じる可能性があります。

一部のファイルが Not Found になります。

/(non-ascii)/index.html cannot be referenced if index.html is omitted #169 | GitHub cloudflare/kv-asset-handler Issues
Non ASCII path returned 404 #99 | GitHub cloudflare/kv-asset-handler Pull requests

/日本語/index.html で index.html が省略された時に参照できませんでした。
例えば 🎈 Hugo がデフォルトでこのようなファイルを生成します。
具体的な発生パターンがわかり、issues で報告したところ、
2021年5月、ソースの改修が行われ、正常に表示できるようになりました。
したがって日本語フォルダ（ディレクトリ）を用いた Web サイトを
Cloudflare Workers Site で構築し、正常に表示可能になっています。

wrangler で追加メッセージが出てくるようになりました。

cloudflare/wrangler releases v1.19.3 | GitHub

 Your configuration file is missing compatibility_date, so a distant past date is assumed. To get the latest possibly-breaking bug fixes, add this line to your wrangler.toml:

    compatibility_date = "2021-09-21"

 For more information about compatibility dates, see: https://developers.cloudflare.com/workers/platform/compatibility-dates

wrangler.toml へ compatibility_date が追加されたので、
この追加を促されています。
記載されているように wrangler.toml へ追加します。

compatibility_date = "2021-09-21"

値は "年4桁-月-日" と今日の日付です。
日本のフォーマットですが、日本に関係なくこの並びです。

Cloudflare Workers Sites（workers.dev）

目次

公式・関連サイト

Node.js 17 で wrangler が動作しない

前準備