Cloudflare 集成

相关源文件

• integration/helpers/vite.ts
• integration/vite-basename-test.ts
• integration/vite-build-test.ts
• integration/vite-cloudflare-test.ts
• integration/vite-css-test.ts
• integration/vite-dev-custom-entry-test.ts
• integration/vite-dev-test.ts
• integration/vite-dot-client-test.ts
• integration/vite-dot-server-test.ts
• integration/vite-dotenv-test.ts
• integration/vite-hmr-hdr-test.ts
• integration/vite-loader-context-test.ts
• integration/vite-manifests-test.ts
• integration/vite-node-env-test.ts
• integration/vite-presets-test.ts
• integration/vite-server-bundles-test.ts
• packages/create-react-router/package.json
• packages/react-router-architect/package.json
• packages/react-router-cloudflare/package.json
• packages/react-router-dev/package.json
• packages/react-router-express/package.json
• packages/react-router-fs-routes/package.json
• packages/react-router-node/package.json
• packages/react-router-serve/package.json

本文档介绍如何将 React Router 与 Cloudflare Pages 和 Workers 集成，从而使用 Cloudflare 的基础设施在边缘实现服务器端渲染。此集成提供了一种在 Cloudflare 的全球网络上部署 React Router 应用程序的无缝方式，并内置了对 Cloudflare 特定功能（如 KV 存储）的支持。

Cloudflare 集成概述

React Router 的 Cloudflare 集成允许您在 Cloudflare 的边缘网络上运行服务器渲染的 React 应用程序。它提供了必要的适配器来处理进入 Cloudflare Pages Functions 或 Workers 的 HTTP 请求，并将其连接到 React Router 应用程序的路由系统。

来源

• packages/react-router-cloudflare/package.json
• integration/vite-cloudflare-test.ts64-74

软件包结构

Cloudflare 集成通过 @react-router/cloudflare 包提供，该包为在 Cloudflare 平台上运行 React Router 提供了定制化解决方案。

来源

• packages/react-router-cloudflare/package.json
• packages/react-router-dev/package.json28-31

设置和配置

安装

首先，您需要安装必要的包

开发时，您还应安装

Pages 函数配置

要处理 Cloudflare Pages 项目中的请求，您需要创建一个 Pages 函数。这通常是通过在项目中的 functions 目录中创建一个文件来完成的。

来源

• integration/vite-cloudflare-test.ts63-74

您的 Pages 函数的标准设置如下所示：

上下文设置

getLoadContext 函数为您的路由加载器和 action 提供对 Cloudflare 特定环境变量和上下文的访问。

来源

• integration/vite-cloudflare-test.ts27-61

请求流程

当请求到达您的 Cloudflare Pages 应用程序时，它会在生成响应之前经过多个层。

来源

• integration/vite-cloudflare-test.ts64-74
• integration/vite-cloudflare-test.ts89-115

在加载器和 Action 中访问 Cloudflare 服务

您的加载器和 Action 函数会收到 Cloudflare 上下文，允许您与 KV 存储等 Cloudflare 服务进行交互。

来源

• integration/vite-cloudflare-test.ts89-141

本地开发

React Router 提供了工具来简化构建 Cloudflare 应用程序时的本地开发体验。

使用 Cloudflare Dev Proxy

@react-router/cloudflare 中的 cloudflareDevProxy Vite 插件可在本地开发期间模拟 Cloudflare 环境。

来源

• integration/helpers/vite.ts12-17
• integration/vite-cloudflare-test.ts284-307

配置

为了设置本地开发，请将 cloudflareDevProxy 插件添加到您的 Vite 配置中。

您还需要一个 wrangler.toml 文件来定义您的 Cloudflare 绑定。

来源

• integration/vite-cloudflare-test.ts14-25
• integration/vite-cloudflare-test.ts75-79

运行开发服务器

您可以使用两种方法进行本地开发：

1. 使用 Vite 的开发服务器：运行 npx vite dev 时的默认选项。
2. 使用 Wrangler：运行 npx wrangler pages dev ./build/client。

这两种选项都受 cloudflareDevProxy 插件支持，并提供相似的开发体验。

来源

• integration/vite-cloudflare-test.ts284-307
• integration/vite-cloudflare-test.ts151-159

生产部署

要将您的 React Router 应用程序部署到 Cloudflare Pages：

1. 使用 react-router build 构建您的应用程序。
2. 使用 Wrangler 或 Cloudflare Dashboard 将构建部署到 Cloudflare Pages。

来源

• integration/vite-cloudflare-test.ts284-307
• integration/vite-cloudflare-test.ts421-425

最佳实践

1. 环境类型安全：为您的 Cloudflare 环境绑定定义正确的 TypeScript 类型。
2. 上下文分离：使用上下文对象访问 Cloudflare 特定 API，而不是直接导入它们。
3. 错误处理：为 Cloudflare API 调用实现适当的错误处理，因为网络操作可能会失败。
4. 测试：在完全部署之前，在本地和 Cloudflare 环境中测试您的应用程序。

局限性

1. Node.js API：Cloudflare Workers 环境不支持所有 Node.js API。请改用 Web 标准 API。
2. 执行时间限制：Cloudflare Workers 有执行时间限制（通常取决于您的计划，为 50ms 或 100ms）。
3. 内存限制：Workers 有内存限制（默认为 128MB），因此请注意内存使用情况。

相关页面

• 有关服务器端渲染的更一般信息，请参阅 服务器端渲染。
• 有关 Node.js 集成的信息，请参阅 Node.js 集成。
• 有关 Express 集成的信息，请参阅 Express 集成。

来源

• packages/react-router-cloudflare/package.json
• packages/react-router-dev/package.json28-31
• integration/vite-cloudflare-test.ts