サンプル
zfb を実際にデプロイ可能なプロジェクトで示す、9 つのスタンドアロンな Cloudflare Workers リポジトリの比較表。
zfb には、スタンドアロンなサンプルリポジトリが 9 つ付属しています。それぞれが 小さくデプロイ可能なプロジェクトで、単一の Cloudflare レシピを端から端まで示します。 各リポジトリは独立して pnpm install でき、ローカルでの実行手順と Cloudflare の プロビジョニングコマンドを記した独自の README を備えています — スニペットを断片的に コピーするのではなく、いずれか 1 つをクローンして全体が組み上がった様子を確認して ください。
このページは比較表です。各行は レシピ にある詳しい解説ページに リンクしています。そのサンプルが何を示しているか、どう動くか、ローカルでどう実行するかは そちらを参照してください。
9 つとも Cloudflare Workers として takazudomodular.com のサブドメインに デプロイされています。7 つはサーバーコードを持ち、残り 2 つは Worker スクリプトを まったく持たないアセットのみの Worker です。
password-gate は意図的に 401 を返す
以下のデモはすべて稼働中ですが、1 つだけ意図的な例外があります。zfb-example-password-gate.takazudomodular.comはサイトの内容ではなくログインページと 401 Unauthorized を返します。これは壊れて いるのではなく、コンテンツをゲートすることこそがこのサンプルの目的だからです。
Worker を伴うサンプル
以下の 7 つは、自分が受け持つリクエストごとに実行される Worker スクリプトを出力するか、 自分で書いています。6 つは @takazudo/zfb-adapter-cloudflare を使って prerender = false のルートを実行します — SSR と Cloudflare バインディング で扱っているパターンです。残る 1 つの password-gate はアダプタを一切インストールせず、 静的ビルドの前段に自分で書いた Worker を置いています。
| サンプル | レンダリング | バインディングとシークレット | スタイリング | リンク |
|---|---|---|---|---|
| AI Summarizer | SSG と prerender = false の API ルート 1 つ（アダプタ） | Workers AI AI、名前付き環境 ai にのみ宣言 | Tailwind v4 | リポジトリ · デモ |
| JSON API | SSG と prerender = false の API ルート 2 つ（アダプタ） | なし | Tailwind v4 | リポジトリ · デモ |
| KV Guestbook | / を除く全ルートが SSR（アダプタ） | Workers KV GUESTBOOK、ADMIN_TOKEN シークレット | Tailwind v4 | リポジトリ · デモ |
| Password Gate | 純粋 SSG を手書き Worker の後ろに配置、run_worker_first = true、アダプタなし | SITE_PASSWORD シークレット | Tailwind v4 | リポジトリ · デモ |
| Reverse Proxy | SSG とキャッチオールの prerender = false ルート 1 つ（アダプタ） | なし、公開の PROXY_ORIGIN 変数が 1 つ | Tailwind v4 | リポジトリ · デモ |
| Webshop | 全ルート SSR、HTML は出力されない（アダプタ） | D1 DB | Tailwind v4 | リポジトリ · デモ |
| Workers Cache | 全ルート SSR、HTML は出力されない（アダプタ） | PURGE_TOKEN シークレット | Tailwind v4 | リポジトリ · デモ |
静的なサンプル
以下の 2 つは、Worker スクリプトを持たずに dist/ を Workers Static Assets として デプロイします。wrangler.toml には [assets] テーブルがあるだけで main キーは意図的に なく、@takazudo/zfb-adapter-cloudflare も依存に含まれていません。サーバーコードが まったく不要なサイトでは、この形をまねてください。
| サンプル | レンダリング | バインディングとシークレット | スタイリング | リンク |
|---|---|---|---|---|
| Blog | 純粋 SSG、アセットのみの Worker | なし | Tailwind v4 | リポジトリ · デモ |
| Corporate Website | 純粋 SSG、アセットのみの Worker | なし | CSS Modules、tailwind: { enabled: false } | リポジトリ · デモ |