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 Workers の CLI wrangler が
2022年5月よりバージョン 2 になりました。
これに合わせて管理 Web・CLI 周りが変化しています。
このページでは wrangler バージョン 2 の説明にしてあります。

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

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

2022年5月より wrangler がバージョン 2 になりました。

npm install -g @cloudflare/wrangler

Version 1 を使用していた影響でインストールがエラーになる場合は
--force を付けて下さい。

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

wrangler login

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

wrangler whoami

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

サイトの生成

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

git clone --depth=1 --branch=wrangler2 https://github.com/cloudflare/worker-sites-template プロジェクト名

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

すでに存在している Web サイトを Workers Sites にする

🎈 Hugo などの静的サイトがあれば、そのルート、
単純な HTML などであれば index.html などがあるフォルダを
public などのフォルダに入れて、その上層に移動します。

wrangler init -y

とすると必要なファイルが生成できます。

node パッケージ kv-asset-handler をインストールしておきます。
過去インストール済の場合でも、更新されている場合があるので、
都度実行した方が良いでしょう。同じコマンドで更新されます。

npm i -D @cloudflare/kv-asset-handler

生成されたファイルのうち src/index.ts は次に置き換えて下さい。

import { getAssetFromKV } from "@cloudflare/kv-asset-handler";

addEventListener("fetch", (event) => {
  event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
  try {
    // Add logic to decide whether to serve an asset or run your original Worker code
    return await getAssetFromKV(event);
  } catch (e) {
    let pathname = new URL(event.request.url).pathname;
    return new Response(`"${pathname}" not found`, {
      status: 404,
      statusText: "not found",
    });
  }
}

フォルダ構成

必要なファイル・フォルダは次のとおりです。

public/ フォルダ

public/ フォルダ内が公開される中身のファイルそのものです。
Hugo 以外を使用する場合は他のフォルダを使用できます。

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

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

wrangler.toml

プロジェクト名.サブドメイン.workers.dev で動作させたい場合は
次の wrangler.toml になります。

name = "プロジェクト名"
main = "src/index.ts"
compatibility_date = "YYYY-MM-DD"

[site]
bucket = "./public"

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

独自ドメインを使用する場合は更に route を追加します。

name = "プロジェクト名"
main = "src/index.ts"
compatibility_date = "YYYY-MM-DD"
route = "https://example.com/*"

[site]
bucket = "./public"

その他

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

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

プレビュー

プレビューは次で確認用の Web サーバが起動します。
http://localhost:8787/ で参照できます。

wrangler dev

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

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

サイトの公開

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

hugo

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

wrangler publish

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

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

制限

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

項目	制限
1 日のリクエスト	1 日 100000 リクエスト
1 分のリクエスト	1 分 1000 リクエスト

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

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

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

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

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

一度入れたファイルが更新される場合、
ファイル単位で書き込みを使用します。
ファイルの更新が多くなると使用数が増えるので、
特に短時間で更新するファイルが多くなる 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 統合後は制限が生じる可能性があります。

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 = "2022-06-24"

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

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

compatibility_date = "2022-06-24"

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

Cloudflare Workers Sites（workers.dev）

目次

公式・関連サイト

前準備