Cloudflare Pages 适配器

Qwik City Cloudflare Pages 适配器允许您将 Qwik City 连接到 Cloudflare Pages。

安装

要集成 cloudflare-pages 适配器，请使用 add 命令：

npm run qwik add cloudflare-pages

适配器将在 adapters/ 目录下添加一个新的 vite.config.ts 文件，并创建一个新的入口文件，例如：

└── adapters/
    └── cloudflare-pages/
        └── vite.config.ts
└── src/
    └── entry.cloudflare-pages.tsx

此外，在 package.json 中，build.server 和 deploy 脚本将被更新。

生产构建

要为生产环境构建应用程序，请使用 build 命令，此命令将自动运行 npm run build.server 和 npm run build.client：

npm run build

阅读完整指南

部署到 Cloudflare Pages

在使用 npm run qwik add cloudflare-pages 安装集成后，项目已准备好部署到 Cloudflare Pages。

请参阅 Cloudflare Pages 文档 以获取有关如何部署您的站点的更多信息。

请注意，您需要一个 Cloudflare 账户 才能完成此步骤。

高级

Cloudflare Pages 入口中间件

当添加 cloudflare-pages 适配器时，将在 src/entry.cloudflare-pages.tsx 创建一个新的入口文件。以下是在入口文件中使用内置中间件的示例。

import {
  createQwikCity,
  type PlatformCloudflarePages,
} from '@builder.io/qwik-city/middleware/cloudflare-pages';
import qwikCityPlan from '@qwik-city-plan';
import { manifest } from '@qwik-client-manifest';
import render from './entry.ssr';
 
const fetch = createQwikCity({ render, qwikCityPlan, manifest });
 
export { fetch };

编译后的中间件将构建在 server/ 目录中。该目录还包含一个 _worker.js 文件，根据 Cloudflare Pages 高级模式 实现应用程序的请求处理。 该文件只是简单地重新导出生成的 fetch 处理程序，如下所示。

import { fetch } from "../server/entry.cloudflare-pages";
export default { fetch };

• Cloudflare Pages 中间件源代码
• Cloudflare Pages 高级模式
• 函数调用路由配置

Cloudflare Pages 函数调用路由

Cloudflare Pages 的 函数调用路由配置 可用于包含或排除某些路径供 worker 函数使用。拥有 _routes.json 文件可以让开发人员更精细地控制何时调用您的函数。

这对于确定页面响应是否应该进行服务器端渲染 (SSR)，还是响应应该使用静态站点生成 (SSG) 的 index.html 文件非常有用。

默认情况下，Cloudflare Pages 适配器 不会 包含一个 public/_routes.json 配置，而是由 Cloudflare 适配器从构建中自动生成。一个自动生成的 dist/_routes.json 的示例可能是：

{
  "include": ["/*"],
  "exclude": [
    "/_headers",
    "/_redirects",
    "/build/*",
    "/favicon.ico",
    "/manifest.json",
    "/service-worker.js",
    "/about"
  ],
  "version": 1
}

在上面的示例中，它表示 所有 页面都应该进行 SSR。然而，根目录下的静态文件，如 /favicon.ico 和 /build/* 中的任何静态资源，应该从函数中排除，并且作为静态文件处理。

在大多数情况下，生成的 dist/_routes.json 文件是理想的。然而，如果您需要对每个路径进行更精细的控制，您可以提供自己的 public/_routes.json 文件。当项目提供自己的 public/_routes.json 文件时，Cloudflare 适配器将不会自动生成路由配置，而是使用 public 目录中提交的配置。

上下文

您可以在端点方法的 platform 参数中访问 Cloudflare Pages 的环境变量：

export const onRequest = async ({ platform }) => {
  const secret = platform.env['SUPER_SECRET_TOKEN'];
};

此外，您可以导入 RequestHandler 和 PlatformCloudflarePages 类型，以在编辑器中获得类型补全。

import { type RequestHandler } from '@builder.io/qwik-city';
import { type PlatformCloudflarePages } from '@builder.io/qwik-city/middleware/cloudflare-pages';
 
export const onGet: RequestHandler<PlatformCloudflarePages> = ({ platform }) => {
  //...
};