Netlify Edge アダプター

Qwik City Netlify Edge アダプターを使用すると、Qwik City をNetlify Edge Functionsに接続できます。

インストール

netlify-edge アダプターを統合するには、add コマンドを使用します。

npm run qwik add netlify-edge

これにより、Netlify CLIを含む必要な依存関係が自動的にインストールされます。

アダプターはadapters/ディレクトリ内に新しいvite.config.tsを追加し、新しいエントリファイル（例：〜）が作成されます。

└── adapters/
    └── netlify-edge/
        └── vite.config.ts
└── src/
    └── entry.netlify-edge.tsx

さらに、package.json内のbuild.serverとdeployスクリプトが更新されます。

本番ビルド

アプリケーションを本番環境用にビルドするには、buildコマンドを使用します。このコマンドは、npm run build.serverとnpm run build.clientを自動的に実行します。

npm run build

完全なガイドはこちらをご覧ください。

開発デプロイ

アプリケーションを開発環境にデプロイするには、〜

npm run deploy

この手順を完了するには、Netlifyアカウントが必要になる場合があります。

本番デプロイ

npm run qwik add netlify-edgeを使用して統合をインストールした後、プロジェクトはNetlifyにデプロイする準備が整います。ただし、Gitリポジトリを作成し、コードをプッシュする必要があります。

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

高度な設定

Netlify Edge エントリミドルウェア

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

import { createQwikCity } from '@builder.io/qwik-city/middleware/netlify-edge';
import qwikCityPlan from '@qwik-city-plan';
import render from './entry.ssr';
 
export default createQwikCity({ render, qwikCityPlan });

コンパイルされたミドルウェアは、.netlify/edge-functionsディレクトリにビルドされます。

Netlify Edge Functions 宣言

Netlify Edge Functions 宣言は、特定のURLパターンで実行するように構成できます。各エッジファンクション宣言は、パスに一致するリクエストで実行する1つの関数に、1つのサイトパスパターンを関連付けます。単一のリクエストは、一連の宣言からエッジファンクションのチェーンを実行できます。単一のエッジファンクションは、さまざまな宣言にわたる複数のパスに関連付けることができます。

これは、ページレスポンスがサーバーサイドレンダリング（SSR）されるべきか、代わりに静的サイト生成（SSG）index.htmlファイルを使用するべきかを判断するのに役立ちます。

デフォルトでは、Netlify Edge アダプターは.netlify/edge-middleware/manifest.jsonファイルを生成します。これは、Netlifyデプロイメントによってエッジ関数を使用するパスと使用しないパスを決定するために使用されます。

生成されたマニフェストをオーバーライドするには、[[edge_functions]]設定を使用してnetlify.tomlに宣言を追加できます。例：

[[edge_functions]]
  path = "/admin"
  function = "auth"

Netlify リクエストコンテキスト

Netlify コンテキストは、エンドポイントメソッドのplatformパラメーターで使用できます。

export const onRequest = async ({ platform }) => {
  platform.log('requested ip:', platform.ip);
};

環境変数

export const onRequest = async ({ env }) => {
  platform.log('netlify serverless env read from Netlify UI or CLI', env.get('API_KEY'));
};

• Netlify 環境変数
• Netlify Edge ミドルウェアソース