本指南将帮助你创建新的 Waku ↗ 应用,并部署到 Cloudflare Workers(配合新版 Workers Assets)。Waku 是为 React 19 ↗ 和 React Server Components ↗ 构建的极简 React 框架。Server Components 的使用完全可选。它可以配置为在构建期间运行 Server Components 并输出静态 HTML,也可以配置为使用动态 React 服务端渲染。它基于 Hono ↗ 和 Vite ↗ 构建。
使用 create-cloudflare ↗ CLI(C3)设置新项目。C3 会创建新的项目目录,启动 Waku 官方搭建工具,并提供立即部署的选项。
要使用 create-cloudflare 创建配合 Workers Assets 的新 Waku 项目,请运行以下命令:
npm create cloudflare@latest my-waku-app -- --framework=wakuyarn create cloudflare@latest my-waku-app --framework=wakupnpm 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创建项目后,在项目目录中运行以下命令以启动本地服务器。这样可以在开发期间本地预览项目。
npm run devyarn run devpnpm run dev你可以从本地机器或任何 CI/CD 系统(包括 Cloudflare 自有 系统)将项目部署到 *.workers.dev 子域或自定义域名。
以下命令将构建并部署项目。若使用 CI,请确保相应更新你的 「deploy command」 配置。
npm run deployyarn run deploypnpm run deploy通过产品绑定(binding),Waku 应用可在本地开发和生产环境中与 Cloudflare Developer Platform 完全集成。Waku Cloudflare 文档 ↗ 介绍了如何配置绑定(binding)以及在 React Server Components 中如何访问它们。
你可以将静态资源添加到 ./public/ 目录,在 Waku 应用中提供静态资源。常见示例包括图片、样式表、字体和 Web manifest。
构建过程中,Waku 会将此目录中的 .js、.css、.html 和 .txt 文件复制到最终资源输出中。.txt 文件用于存储构建时渲染的 Server Components 所使用的数据。
默认情况下,Cloudflare 首先尝试将请求路径与静态资源路径匹配,该路径基于上传资源目录的文件结构。这要么是 Wrangler 配置中 assets.directory 指定的目录,要么在使用 Cloudflare Vite 插件时是客户端构建的输出目录。如果失败,且存在 Worker,则调用 Worker。如果没有 Worker,或者 Worker 随后使用 asset 绑定,Cloudflare 将回退到 not_found_handling 设置的行为。
请参阅路由文档,了解静态资源路由的工作原理以及如何自定义此行为。