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

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

React Router (ранее Remix)

Начало из CLI: Создайте каркас full-stack приложения с React Router v8 ↗ и Cloudflare Vite plugin для молниеносно быстрой разработки.

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

Или просто разверните: Создайте full-stack приложение на React Router v8: CI/CD и превью уже настроены за вас.

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

узел Framework
React RouterОбнаружено
Коннектор: Framework to Config
элементы конфигурации
Сгенерированная конфигурация
wrangler.jsonc
main:build/server/index.js
wrangler.jsonc
assets:directory: build/client
wrangler.jsonc
compatibility_flags:nodejs_compat
wrangler.jsonc
наблюдаемость:enabled: true
Коннектор: Config to Workers
WorkersРазвернуто
Индикатор статуса
Wrangler настраивает конфигурацию автоматически

Что такое React Router?

React Router v8 ↗ представляет собой full-stack фреймворк на основе React для создания веб-приложений. Он сочетается с Cloudflare Vite plugin чтобы обеспечить полноценный опыт разработки, сборки и развёртывания приложений на Cloudflare.

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

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

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

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

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

    • my-react-router-app
      • приложение
        • маршруты
          • ...
        • entry.server.ts
        • root.tsx
        • routes.ts
      • workers
        • app.ts
      • react-router.config.ts
      • vite.config.ts
      • wrangler.jsonc

    react-router.config.ts это ваш Файл конфигурации React Router ↗. В этом файле:

    • ssr имеет значение true, то есть ваше приложение будет использовать серверный рендеринг.

    vite.config.ts это ваш Файл конфигурации Vite ↗. Плагины React Router и Cloudflare входят в plugins массив. Поле Cloudflare Vite plugin запускает код вашего сервера в среде выполнения Workers, поэтому локальная среда разработки максимально приближена к продакшену.

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

    • main указывает на ./workers/app.ts. Это входной файл вашего Worker. Экспорт по умолчанию включает fetch обработчик, который передаёт запрос React Router.
    • Если вы хотите добавить привязки к ресурсам платформы разработчика Cloudflare, вы настраиваете их здесь.

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

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

    npm run dev

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

    Этот проект использует React Router в сочетании с Cloudflare Vite plugin. Это означает, что ваше приложение выполняется в среде Cloudflare Workers runtime, как и в продакшене, и даёт доступ к локальным эмуляциям привязок.

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

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

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

    npm run deploy

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

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

После настройки привязок (bindings) в конфигурационном файле Wrangler они становятся доступны в context.cloudflare в ваших функциях loader или action:

app/routes/home.tsx
export function loader({ context }: Route.LoaderArgs) {
	return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
}

export default function Home({ loaderData }: Route.ComponentProps) {
	return <Welcome message={loaderData.message} />;
}

Поскольку у вас есть прямой доступ к входному файлу Worker (workers/app.ts), можно также добавить дополнительные экспортируемые значения, например Durable Objects и Workflows

Пример: использование Workflows

Ниже приведён пример настройки простого Workflow в файле точки входа Worker.

workers/app.ts
import { createRequestHandler } from "react-router";
import { WorkflowEntrypoint, type WorkflowStep, type WorkflowEvent } from 'cloudflare:workers';

declare global {
	interface CloudflareEnvironment extends Env {}
}

type Env = {
	MY_WORKFLOW: Workflow;
};

export class MyWorkflow extends WorkflowEntrypoint<Env> {
	override async run(event: WorkflowEvent<{ hello: string }>, step: WorkflowStep) {
		await step.do("first step", async () => {
			return { output: "First step result" };
		});

		await step.sleep("sleep", "1 second");

		await step.do("second step", async () => {
			return { output: "Second step result" };
		});

		return "Workflow output";
	}
}

const requestHandler = createRequestHandler(
	() => import("virtual:react-router/server-build"),
	import.meta.env.MODE
);

export default {
	async fetch(request, env, ctx) {
		return requestHandler(request, {
			cloudflare: { env, ctx },
		});
	},
} satisfies ExportedHandler<CloudflareEnvironment>;

Настройте это в файле конфигурации Wrangler:

{
  "workflows": [
    {
      "name": "my-workflow",
      "binding": "MY_WORKFLOW",
      "class_name": "MyWorkflow"
    }
  ]
}
[[workflows]]
name = "my-workflow"
binding = "MY_WORKFLOW"
class_name = "MyWorkflow"

А затем используйте его в своём приложении:

app/routes/home.tsx
export async function action({ context }: Route.ActionArgs) {
	const env = context.cloudflare.env;
	const instance = await env.MY_WORKFLOW.create({ params: { "hello": "world" } })
	return { id: instance.id, details: await instance.status() };
}

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

Bindings

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