Создание легковесных API, работающих где угодно, с помощью Hono

Узнайте о методах маршрутизации в Hono, управлении контекстом, паттернах middleware, серверном рендеринге с использованием JSX и о том, как развернуть приложение в Cloudflare Workers.

В этой статье мы представляем Hono, мультирантайм-веб-фреймворк, который является чрезвычайно быстрым и легковесным. Мы познакомимся с методами маршрутизации Hono, управлением контекстом, паттернами middleware, серверным рендерингом с JSX, а также с тем, как развернуть наше приложение в Cloudflare Workers. Мы создадим API для конвертации различных валют, которое локально работает на Node.js и разворачивается в Cloudflare Workers на бесплатном тарифе.

Предварительные требования

• Node.js
• Базовое знакомство с TypeScript
• Аккаунт Cloudflare (бесплатный тариф)

Что такое Hono?

Hono — это небольшой, быстрый и простой веб-фреймворк, созданный на основе веб-стандартов, поэтому он может работать где угодно. Это альтернатива Express, созданная специально для современных бессерверных сред и среды edge-вычислений. Он имеет встроенную поддержку TypeScript и отлично совместим с Cloudflare, так как создатель разрабатывал его с учетом особенностей Cloudflare.

Что такое Cloudflare Workers?

Cloudflare — это бессерверная среда edge-вычислений, которая упрощает создание, развертывание и масштабирование приложений в глобальной сети. Вместо использования тяжелых виртуальных машин или контейнеров в ней применяются изоляции движка Google V8, что исключает время «холодного старта». Когда поступает запрос API, Cloudflare Workers перехватывают его и выполняют ваш код на ближайшем к вам сервере, минимизируя задержку.

Настройка проекта

Для начала выполните эту команду в терминале:

Будет создана новая директория проекта с рекомендуемой структурой и конфигурационными файлами.

Затем выполните эту команду в терминале, чтобы перейти в созданную директорию:

Чтобы запустить локальный сервер разработки, выполните эту команду:

Wrangler — это интерфейс командной строки (CLI) от Cloudflare, который поставляется вместе с вашим проектом. Он помогает управлять вашим Hono-приложением и развертывать его.

Как создавать маршруты и управлять контекстом

Создание маршрутов

Как и Express, Hono имеет методы app.get(), app.post() и другие методы HTTP. Вы также можете использовать регулярные выражения для настройки маршрутов. Например, вы можете ограничить маршрут определенными кодами валют, как показано ниже:

Вы можете также определять маршруты для соответствия нескольким путям с помощью подстановочного знака *:

Или определять необязательные параметры с помощью ?:

Наконец, вы можете сгруппировать связанные маршруты с общим префиксом с помощью app.route():

Управление контекстом

В то время как в Express используются req и res, в Hono применяется единый объект контекста под названием c. Этот объект передается в каждый обработчик middleware и маршрута.

Вы также можете использовать c для передачи данных между middleware и обработчиками с помощью c.set() и c.get():

Мы воспользуемся этим паттерном позже при создании пользовательского middleware.

Паттерны middleware

Функции middleware выглядят как обработчики маршрутов, но с дополнительным аргументом next.

Путь определяет, где запускается middleware. В примере выше мы использовали подстановочный знак, поэтому оно запускается на всех маршрутах.

Вызов await next() передает управление следующему middleware или обработчику маршрута в цепочке. Код после await next() не выполняется до тех пор, пока ответ не будет сформирован. Это делает такой подход идеальным для логирования, добавления заголовков и других задач постобработки.

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

Как только ответ сформирован, выполнение раскручивается в обратном порядке. Последнее middleware, выполнившееся перед обработчиком маршрута, возобновляет работу после завершения этого обработчика, после чего выполнение продолжается дальше по остальному стеку middleware.

Вы можете также определить middleware отдельно с помощью фабричного паттерна и зарегистрировать его там, где это необходимо:

Затем зарегистрируйте его с помощью:

В Hono уже встроено несколько middleware. Вот два наиболее часто используемых примера:

Вы также можете найти стороннее middleware here.

Создание демо-конвертера валют

Сначала откройте tsconfig.json и добавьте "WebWorker" в массив lib. Сохраните файл перед продолжением. Это предоставит TypeScript доступ к типам, доступным в рантайме Cloudflare Workers:

Затем создайте файл src/types.ts для определения типа контекста, который будет общим для всех экземпляров Hono. Мы делаем это потому, что любое значение, прикрепляемое к контексту с помощью c.set(), должно быть предварительно объявлено:

Далее создадим файл src/middleware/logger.ts для определения нашего пользовательского middleware логирования с использованием фабричного паттерна:

Далее создадим файл src/views/Home.tsx для определения нашего JSX-компонента, который мы отрендерим в нашем корневом маршруте. Любой файл, содержащий JSX, должен иметь расширение .tsx:

Затем создайте файл src/routes/index.tsx для настройки рендеринга JSX. Мы зарегистрируем middleware jsxRenderer(), которое добавляет метод render() к нашему объекту контекста. Этот метод позволяет нам отдавать компонент Home в качестве HTML:

В этом маршруте мы не использовали определенный нами тип контекста, так как переменная requestId нам не требуется. Мы применим ее в следующем маршруте.

Затем создайте файл src/routes/converter.ts, чтобы объединить все наши концепции маршрутизации: ограничения регулярными выражениями, подстановочные знаки, необязательные параметры и доступ к контексту:

Обратите внимание, что поскольку этот экземпляр Hono использует переменную контекста requestId, его необходимо типизировать с помощью Variables:

Наконец, в src/index.ts мы сводим все воедино. Мы регистрируем наше пользовательское middleware, подключаем группы маршрутов и экспортируем приложение:

Обратите внимание, что export default app — это то, чего ожидают Cloudflare Workers. Это точка входа, которую рантайм вызывает при поступлении запроса.

Развертывание приложения

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

Затем выполните команду ниже и войдите в свой аккаунт Cloudflare:

Вот и все! Ваше приложение теперь запущено на Cloudflare Workers.

Вы увидите ответ об успешном завершении, похожий на этот:

Заключение

В этой статье мы рассмотрели методы маршрутизации Hono, управление контекстом, паттерны middleware, серверный рендеринг с использованием JSX и развертывание вашего Hono-приложения в Cloudflare Workers.

Для дальнейшего улучшения приложения вы можете использовать другие встроенные или сторонние middleware от Hono, реализовать стратегии тестирования и применить функцию RPC (удаленного вызова процедур) Hono для совместного использования спецификаций API между сервером и клиентом.