Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Waku

最終更新 Markdown で表示Agent セットアップ

このガイドでは、新しい Waku ↗ アプリケーションを作成し、Cloudflare Workers（新しい Workers Assets）にデプロイします。Waku は React 19 ↗ と React Server Components ↗ 向けに作られた、ミニマルな React フレームワークです。Server Components の利用は任意です。ビルド時に Server Components を実行して静的 HTML を出力する構成にも、動的な React サーバーレンダリングで動かす構成にもできます。Hono ↗ と Vite ↗ の上に構築されています。

Waku検出済み
生成された設定
wrangler.jsonc
main:dist/worker.js
wrangler.jsonc
assets:directory: dist/public
wrangler.jsonc
compatibility_flags:nodejs_compat
wrangler.jsonc
observability:enabled: true
Workersデプロイ済み
Wrangler が設定を自動で処理します

1. 新しいプロジェクトを用意する

create-cloudflare ↗ CLI（C3）で新しいプロジェクトを用意します。C3 は新しいプロジェクトディレクトリを作成し、Waku 公式のセットアップツールを起動し、すぐにデプロイするかどうかを選べます。

create-cloudflare で Workers Assets 付きの新しい Waku プロジェクトを作るには、次のコマンドを実行します。

npm create cloudflare@latest my-waku-app -- --framework=waku

セットアップでは、次のオプションを選びます。

  • What would you like to start with? では、Framework Starter を選びます。
  • Which development framework do you want to use? では、Waku を選びます。
  • フレームワーク本体の CLI ウィザードを完了します。
  • Do you want to use git for version control? では、Yes を選びます。
  • Do you want to deploy your application? では、No を選びます（デプロイ前にいくつか変更します）。

プロジェクトの用意が終わったら、次のコマンドでディレクトリを移動します。

cd my-waku-app

2. ローカルで開発する

プロジェクトを作成したら、プロジェクトディレクトリで次のコマンドを実行してローカルサーバーを起動します。開発中にプロジェクトをローカルでプレビューできます。

npm run dev

3. プロジェクトをデプロイする

プロジェクトは *.workers.dev サブドメインまたは カスタムドメイン にデプロイできます。自分のマシンからでも、Cloudflare の CI/CD を含む任意の CI/CD システムからでもデプロイできます。

次のコマンドでビルドとデプロイを実行します。CI を使う場合は、"deploy command" の設定を適切に更新してください。

npm run deploy

バインディング

Waku アプリケーションは、プロダクトのバインディングを使って、ローカル開発と本番の両方で Cloudflare Developer Platform と統合できます。バインディングの設定と、React Server Components からのアクセス方法は、Waku の Cloudflare ドキュメント ↗ を参照してください。

静的アセット

Waku アプリケーションで静的アセットを配信するには、./public/ ディレクトリに追加します。よくある例は、画像、スタイルシート、フォント、Web マニフェストです。

ビルド時に Waku は、このディレクトリの .js、.css、.html、.txt ファイルを最終的なアセット出力へコピーします。.txt ファイルは、ビルド時にレンダリングされる Server Components が使うデータの保存に使います。

デフォルトでは、Cloudflare はまずリクエストパスを静的アセットのパスと照合します。このパスは、アップロードしたアセットディレクトリのファイル構造に基づきます。対象は、Wrangler 設定の assets.directory で指定したディレクトリ、または Cloudflare Vite plugin の場合はクライアントビルドの出力ディレクトリです。一致しない場合は、Worker があれば呼び出します。Worker がない場合、または Worker がアセットバインディングを使う場合、Cloudflare は not_found_handling で設定した動作にフォールバックします。

静的アセットでのルーティングの仕組みと、この動作のカスタマイズについては、ルーティングのドキュメント を参照してください。

役に立ちましたか？