INTEGRITY Документация

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

React + Vite

Начало из CLI - создайте каркас full-stack приложения с React SPA, Cloudflare Workers API и Cloudflare Vite plugin для молниеносно быстрой разработки.

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

Или просто разверните - создайте full-stack приложение на React, Workers API и Vite с уже настроенными CI/CD и предпросмотрами.

Развертывание в Workers

Что такое React?

React ↗ представляет собой фреймворк для построения пользовательских интерфейсов. Он позволяет создавать переиспользуемые UI-компоненты и эффективно управлять состоянием приложения. С помощью React можно создать одностраничное приложение (SPA) и объединить его с backend API, работающим на Cloudflare Workers, чтобы получить full-stack приложение.

Создание full-stack приложения с React

  1. Создайте новый проект с помощью create-cloudflare CLI (C3)

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

    Как устроен этот проект?

    Ниже приведено упрощённое дерево файлов проекта.

    • my-react-app
      • src/
        • App.tsx
      • worker/
        • index.ts
      • index.html
      • vite.config.ts
      • wrangler.jsonc

    wrangler.jsonc это ваш конфигурационный файл Wrangler. В этом файле:

    • main указывает на worker/index.ts. Это ваш Worker, который будет выполнять роль backend API.
    • assets.not_found_handling имеет значение single-page-application, это означает, что маршруты, которые обрабатывает ваш React SPA, не доходят до Worker и потому бесплатны.
    • Если вы хотите добавить привязки к ресурсам платформы разработчика Cloudflare, настройте их здесь. Подробнее о привязки.

    vite.config.ts настроен на использование Cloudflare Vite plugin. Это запускает ваш Worker в среде выполнения Cloudflare Workers, благодаря чему локальная среда разработки максимально приближена к продакшену.

    worker/index.ts это ваш серверный API, который содержит один эндпоинт, /api/, который возвращает текстовый ответ. В src/App.tsx, ваше приложение React обращается к этой конечной точке, чтобы получить сообщение в ответ и отобразить его.

  2. Локальная разработка с помощью Cloudflare Vite plugin

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

    npm run dev

    Что происходит при локальной разработке?

    Этот проект использует Vite для локальной разработки и сборки, поэтому в нём доступны все возможности Vite, включая горячую замену модулей (HMR).

    Кроме того, vite.config.ts настроен на использование плагина Vite для Cloudflare. Это запускает ваше приложение в среде выполнения Cloudflare Workers, точно как в production, и предоставляет доступ к локальным эмуляциям привязок.

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

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

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

    npm run deploy

Маршрутизация ресурсов

Если вы используете React как SPA, вам нужно будет указать not_found_handling = "single-page-application" в конфигурационном файле Wrangler.

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

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

Используйте привязки с React

Ваш новый проект также содержит Worker по адресу ./worker/index.ts, который можно использовать как backend API для вашего React-приложения. Хотя ваше React-приложение не может напрямую обращаться к привязкам Workers, оно может взаимодействовать с ними через этот Worker. Вы можете выполнять fetch() запросы из приложения React в Worker, который затем сможет обработать запрос и использовать привязки. Узнайте, как настроить привязки Workers.

Благодаря bindings ваше приложение можно полностью интегрировать с Cloudflare Developer Platform, получив доступ к вычислениям, хранилищу, AI и другим возможностям.

Bindings

Доступ к вычислениям, хранилищу, ИИ и другим возможностям.