2-4 静的アセットを載せる
毎回本社から取り寄せなくても、よく渡すパンフレットは受付の棚に置けます。お客さんが来たら、用意してある物をそのまま渡せます。
いま読んでいるこのサイト（Cloudflare Lab）の HTML、CSS、画像も、用件ごとに一から作る必要はありません。Astro が完成品を作り、Cloudflare の棚から配ります。
ただし、棚の品をお客さんが自分で取るか、スタッフが一度受けて手渡すかは選べます。Cloudflare Lab は、すべてに対応済みの印を付けるため後者を選びました。
Learning goals
この節でできるようになること
- Static Assets をパンフレット棚として説明できる
- お客さんが自分で取る道とスタッフが手渡す道を比べられる
- スタッフが棚から取る窓を説明できる
- 棚にない物への返事を確かめられる
1. 窓口のパンフレット棚（Static Assets）
Section titled “1. 窓口のパンフレット棚（Static Assets）”営業時間や案内図のように、来客ごとに内容を作り直さない物は棚へ置けます。棚に同じ物があれば、すぐに渡せます。
Cloudflare では、この棚を Static Assets（静的アセット） と呼びます。HTML、CSS、画像などのファイルを Worker と一緒に配れます。
実物では、Astro が dist に完成したファイルを作ります。wrangler.jsonc の assets.directory が、その棚へ送る元の場所です。
棚のパンフレットは、あらかじめ完成しています。お客さんごとに本文を書き直す品ではありません。
つまり、Static Assets は完成済みのページや画像を置く棚です。
2. 棚の品もスタッフが手渡すか（run_worker_first）
Section titled “2. 棚の品もスタッフが手渡すか（run_worker_first）”棚に品があるとき、お客さんが自分で取って帰る店もあります。すべての品へ対応済みの印を押す店なら、必ずスタッフが手渡します。
Cloudflare では、この順番を run_worker_first で決めます。false では一致する asset を先に返し、true では Worker を先に実行します。
Cloudflare Lab は true です。そのため、ページが棚にあっても Worker が先に受け、x-clf-lab: 1 の対応済みスタンプを付けられます。
上段はお客さんが棚から自分で取り、下段はスタッフが一度受けて手渡します。どちらが正しいかではなく、必要な対応で選びます。
ここからは正式な名前で確認します。
つまり、Cloudflare Lab は棚の品も必ずスタッフが手渡します。
3. スタッフが棚から取る窓（ASSETS binding）
Section titled “3. スタッフが棚から取る窓（ASSETS binding）”スタッフは棚を探し回りません。専用の窓へ用件票を渡すと、その向こうから合う品が出てきます。
Cloudflare では、この窓を ASSETS binding と呼びます。Worker は env.ASSETS.fetch(request) で asset の Response を受け取れます。
実物では、binding: "ASSETS" という登録と、コードの env.ASSETS が同じ名前です。Request を渡すと、その URL に対応する棚の返事が戻ります。
図の取り出し口がこの窓で、コードと棚をつなぐ決められた口です。スタッフがファイルの置き場所を自分で組み立てる必要はありません。
つまり、ASSETS binding が Worker とパンフレット棚をつなぎます。
4. Cloudflare Lab での使われ方（設定）
Section titled “4. Cloudflare Lab での使われ方（設定）”ここで紹介した棚と窓が、いま読んでいる Cloudflare Lab でどう設定されているかを見ます。
店舗登録票には、棚へ送る場所、窓の名前、スタッフが先に受けるかを書きます。マニュアル側は同じ名前でその窓を使います。
次の設定は「dist を棚にし、ASSETS という窓を作り、必ずスタッフが先に受ける」という意味です。読めなくても大丈夫です。
"assets": { "directory": "./dist", "binding": "ASSETS", "run_worker_first": true}次の一行は「お客さんの用件票を棚の窓へ渡す」命令です。読めなくても大丈夫です。
const assetResponse = await env.ASSETS.fetch(request);棚から返った内容を新しい Response へ移し、x-clf-lab: 1 を加えます。だから静的なページにも、対応済みの印が付きます。
つまり、店舗登録票とマニュアルで窓の名前を揃えています。
5. 無いものを頼まれたら（404 Not Found）
Section titled “5. 無いものを頼まれたら（404 Not Found）”棚にないパンフレットを頼まれたら、スタッフは別の品を黙って渡しません。「見つからない」という返事を返します。
Web の返事では、この状態を 404 Not Found（見つからない） と呼びます。Cloudflare Lab では /nope/ を頼み、404 が返ることを実測しました。
次の命令は、存在しない道への返事の番号だけを見ます。読めなくても大丈夫です。
curl -s -o /dev/null -w '%{http_code}' "$LAB_BASE_URL/nope/"実行結果は 404 でした。
空の棚でも、run_worker_first: true ならスタッフは先に用件を受けます。スタッフを通ることと、品があることは別です。
料金について、公式ページは Static Assets への requests を free and unlimited としています。一方、Worker script を実行する requests は Workers の扱いです。
Free plan で run_worker_first の対象が上限を超えると、公式ページは 429 の返事になると説明しています。棚へ自動で迂回するわけではありません。経路を選ぶときは、必要な処理と利用量を一緒に見ます。
つまり、無い物も受付を通りますが、返事は正しく「見つからない」になります。
つまずきやすいところ
Section titled “つまずきやすいところ”この節のまとめ
Section titled “この節のまとめ”- Static Assets は、完成済みのページや画像を置く棚です。
- run_worker_first で、棚の品もスタッフが手渡すか決めます。
- 棚にない物を頼むと、Cloudflare Lab では 404 が返ります。
この節で出てきた言葉を、つながりの順に並べると次のようになります。
図のラベル: パンフレット棚 Static Assets / スタッフが手渡す run_worker_first: true / お客さんが自分で取る run_worker_first: false / 棚から取る窓 ASSETS binding / 棚に無い品 404 Not Found / 棚への request は 無料・無制限
次の節では、表の入口と内覧用の裏口を使い分けます。
この節のチェック
© 2026 osdse