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) とは異なるバージョンの nodejs が使用される可能性があります。

本番ビルド

本番用にアプリケーションをビルドするには、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 > YOUR_PROJECT > Settings > Environment variables > Production (and Preview) > Add variables > Save** に移動します。

サイトのデプロイ方法の詳細については、Cloudflare Pages のドキュメントを参照してください。

この手順を完了するには、Cloudflare アカウントが必要であることに注意してください。

高度な設定

Cloudflare Pages エントリーミドルウェア

cloudflare-pages アダプターを追加すると、src/entry.cloudflare-pages.tsx に新しいエントリファイルが作成されます。以下は、エントリファイル内で組み込みのミドルウェアを使用する例です。

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/ ディレクトリに構築されます。このディレクトリには、Cloudflare Pages のアドバンスドモードに従ってアプリケーションのリクエスト処理を実装する _worker.js ファイルも含まれています。このファイルは、以下に示すように、生成された fetch ハンドラーを単純に再エクスポートします。

/dist/_worker.js

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

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 Page の環境変数にアクセスできます。

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

貢献者

このドキュメントの改善にご協力いただいたすべての貢献者に感謝します。