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

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

Hono

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

npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-template

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

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

Что такое Hono?

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

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

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

    npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-template

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

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

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

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

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

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

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

  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

Bindings

Документация Hono ↗ содержит информацию о том, как получить доступ к привязкам в вашем приложении Hono.

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

Bindings

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