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

Cloudflare Workers は JavaScript、Rust、C、C++ などのプログラミング言語を
Workers KV を用いて動作させ、Cloudflare サーバから公開できます。
これに静的サイトを公開できる Workers Sites があります。
Cloudflare の通常使用のように別途配信サーバを用いる必要なく、
Cloudflare のサーバから直接サイトを公開できる一手段となります。

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

🎈 Cloudflare Pages

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

この プロジェクト が 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 を入れている場合はうまく動作しません。
静的サイトネェネータのプレビュー機能を用いて下さい。

サイトの公開

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

hugo

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

wrangler publish

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

独自ドメインを使用する

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

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

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

workers_dev = true

route にドメイン名を ドメイン名/* という感じに設定します。
ドメイン名はサブドメインも可能です。 * を変えて、適用範囲を指定できます。

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

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

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

wrangler publish

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

制限

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

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

また KV として、無料プランでは次の制限があります。超えた場合はエラーになります。
リセットは UTC 午前 0 時（日本時間午前 9 時）です。
ここでの読み取りは上項目のリクエストに同じです。

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

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 も使用可能です。
運営者が実際に EU.org を用いて確認できています。

一部のファイルが 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 がデフォルトでこのようなファイルを生成します。

Pull Request で過去に報告があったのですが、
問題発生パターンを理解できていなかったように思われます。
具体的な発生パターンがわかり、日本語でも再現できたので、
issues に改めて報告してみました。

Cloudflare Workers Sites（workers.dev）

目次

公式・関連サイト

前準備