跳转到内容
搜索文档

Waku

最后更新 查看 MarkdownAgent 设置

本指南将帮助你创建新的 Waku 应用,并部署到 Cloudflare Workers(配合新版 Workers Assets)。Waku 是为 React 19React Server Components 构建的极简 React 框架。Server Components 的使用完全可选。它可以配置为在构建期间运行 Server Components 并输出静态 HTML,也可以配置为使用动态 React 服务端渲染。它基于 HonoVite 构建。

WakuDetected
Generated configuration
wrangler.jsonc
main:dist/worker.js
wrangler.jsonc
assets:directory: dist/public
wrangler.jsonc
compatibility_flags:nodejs_compat
wrangler.jsonc
observability:enabled: true
WorkersDeployed
Wrangler handles configuration automatically

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. 部署项目

你可以从本地机器或任何 CI/CD 系统(包括 Cloudflare 自有 系统)将项目部署到 *.workers.dev 子域或自定义域名

以下命令将构建并部署项目。若使用 CI,请确保相应更新你的 「deploy command」 配置。

npm run deploy

绑定(binding)

通过产品绑定(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 设置的行为。

请参阅路由文档,了解静态资源路由的工作原理以及如何自定义此行为。

这篇文档对您有帮助吗?