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 腳本將會更新。

透過執行 node -v 指令，記下您本地環境中的 nodejs 版本

node -v
v20.11.1

當您使用 npm create qwik@latest 來設定您的 Qwik 應用程式時，它可能會使用與 Cloudflare Pages 預設使用的 nodejs 版本 (v16.20.2) 不同的版本。

生產環境建置

要為生產環境建置應用程式，請使用 build 指令，這個指令會自動執行 npm run build.server 和 npm run build.client

npm run build

請在此處閱讀完整指南

部署至 Cloudflare Pages

使用 npm run qwik add cloudflare-pages 安裝整合後，專案即可部署至 Cloudflare Pages。

如果您的環境中的 nodejs 版本與 Cloudflare Pages (v16.20.2) 不同，您需要新增一個 NODE_VERSION 環境變數，並將值設定為您在環境中執行 node -v 指令所獲得的版本

node -v
v20.11.1

要在 Cloudflare 中執行此操作，請前往 **Workers & 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 Page 的 函數呼叫路由設定 可用於包含或排除要由工作者函數使用的特定路徑。擁有 _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 }) => {
  //...
};