Адаптер для страниц Cloudflare

Адаптер Cloudflare Pages из Qwik City позволяет подключить Qwik City к Cloudflare Pages.

Установка

Чтобы интегрировать адаптер cloudflare-pages, используйте команду add:

npm run qwik add cloudflare-pages

Адаптер добавит новый файл vite.config.ts в каталог adapters/, и создаст файл точки входа, как показано ниже:

└── 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 Advanced Mode. Файл просто реэкспортирует созданный обработчик fetch, как показано ниже.

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

• Cloudflare Pages Middleware Source
• Cloudflare Pages Advanced Mode
• Function Invocation Route Config

Маршруты вызова функций Cloudflare Pages

Параметры function-invocation-routes config Cloudflare Page можно использовать для включения или исключения определенных путей, которые будут использоваться рабочими функциями. Наличие файла _routes.json даёт разработчикам более детальный контроль над тем, когда вызывается ваша функция.

Это используется для определения того, должен ли ответ быть рендерен сервером (SSR) или вместо этого использовать статический файл index.html (SSG).

По умолчанию адаптер Cloudflare Pages не включает файл конфигурации public/_routes.json, она автоматически генерируется из сборки адаптером. Пример автоматически генерируемого 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.

Контекст

Вы можете получить доступ к переменным окружения Cloudflare Pages в параметре platform методов конечной точки:

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 }) => {
  //...
};