← Cloudflare Workers / workers / framework-guides / web-apps / more-web-frameworks

Waku

В этом руководстве вы создадите новый Waku ↗ приложение и разверните его в Cloudflare Workers (с новым Ресурсы Workers). Waku представляет собой минималистичный React-фреймворк, созданный для React 19 ↗ и React Server Components ↗. Использование Server Components полностью необязательно. Можно настроить выполнение Server Components во время сборки с выводом статического HTML, а можно настроить динамический серверный рендеринг React. В основе лежит Hono ↗ и Vite ↗.

Уже есть проект Waku?

Запустите wrangler deploy в проекте без файла конфигурации Wrangler, и Wrangler автоматически определит Waku, сгенерирует необходимую конфигурацию и развернёт ваш проект.

npx wrangler deploy

Подробнее о автоматическая настройка проекта.

узел Framework

WakuОбнаружено

Коннектор: Framework to Config

элементы конфигурации

Сгенерированная конфигурация

wrangler.jsonc

main:dist/worker.js

wrangler.jsonc

assets:directory: dist/public

wrangler.jsonc

compatibility_flags:nodejs_compat

wrangler.jsonc

наблюдаемость:enabled: true

Коннектор: Config to Workers

WorkersРазвернуто

Индикатор статуса

Wrangler настраивает конфигурацию автоматически

1. Настройте новый проект

Используйте create-cloudflare ↗ CLI (C3) для настройки нового проекта. C3 создаст каталог нового проекта, запустит официальный инструмент настройки Waku и предложит возможность мгновенного развертывания.

Чтобы использовать create-cloudflare чтобы создать новый проект Waku с Workers Assets, выполните следующую команду:

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

Для настройки выберите следующие параметры:

Для С чего вы хотите начать?, выберите Framework Starter.
Для Какой фреймворк для разработки вы хотите использовать?, выберите Waku.
Пройдите собственный CLI-мастер фреймворка.
Для Хотите использовать git для контроля версий?, выберите Yes.
Для Хотите развернуть приложение?, выберите No (мы внесём некоторые изменения перед развёртыванием).

После настройки проекта перейдите в нужный каталог, выполнив следующую команду:

cd my-waku-app

2. Локальная разработка

После создания проекта выполните следующую команду в каталоге проекта, чтобы запустить локальный сервер. Это позволит просматривать проект локально в процессе разработки.

npm run dev

3. Развёртывание вашего проекта

Ваш проект можно развернуть в *.workers.dev поддомен или Custom Domain, с собственного компьютера или из любой системы CI/CD, включая Собственная разработка Cloudflare.

Следующая команда собирает и разворачивает ваш проект. Если вы используете CI, не забудьте обновить "deploy command" конфигурацию должным образом.

npm run deploy

Bindings

Ваше приложение на Waku можно полностью интегрировать с Cloudflare Developer Platform как в локальной разработке, так и в продакшене, с помощью привязок продуктов. Документация Waku по Cloudflare ↗ содержит информацию о настройке привязок и о том, как получить к ним доступ в React Server Components.

Static Assets

Статические ресурсы в приложении Waku можно раздавать, добавив их в ./public/ каталог. Типичные примеры: изображения, таблицы стилей, шрифты и веб-манифесты.

В процессе сборки Waku копирует .js, .css, .html, а также .txt файлы из этого каталога в итоговый вывод ресурсов. .txt файлы используются для хранения данных, применяемых Server Components, которые рендерятся во время сборки.

По умолчанию Cloudflare сначала пытается сопоставить путь запроса со статическим путём ресурса, определяемым структурой файлов загруженного каталога ресурсов. Это либо каталог, заданный в assets.directory в конфигурации Wrangler или, в случае Cloudflare Vite plugin, каталог вывода клиентской сборки. Если его нет, вызывается Worker, если он присутствует. Если Worker отсутствует, либо Worker использует привязку assets, Cloudflare переключится на поведение, заданное not_found_handling.

См. документация по маршрутизации с дополнительной информацией о том, как работает маршрутизация со статическими ресурсами и как настроить это поведение.