Netlify Edge 中间件

Qwik City Netlify Edge 中间件允许您将 Qwik City 连接到 Netlify Edge。

添加到 Qwik 项目

运行此命令将 netlify-edge 与您的应用程序集成：

npm run qwik add netlify-edge

前面的命令将使用app中的内置中间件创建 src/entry.netlify-edge.tsx。

手动添加 Netlify Edge

If want to add Netilify Edge manually, you can add or modify files like below:

src/entry.netlify-edge.tsx

import { qwikCity } from '@builder.io/qwik-city/middleware/netlify-edge';
import render from './entry.ssr';

const qwikCityHandler = qwikCity(render);

export default qwikCityHandler;

vite.config.ts

import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import tsconfigPaths from "vite-tsconfig-paths";
+import netlifyEdge from "@netlify/vite-plugin-netlify-edge";

export default defineConfig(() => {
  return {
    plugins: [
      qwikCity(),
      qwikVite({
+        ssr: {
+          outDir: "netlify/edge-functions",
+        },
      }),
      tsconfigPaths(),
+      netlifyEdge({
+        functionName: "entry.netlify-edge",
+      }),
    ],
  };
});

Configure netlify.toml

[[edge_functions]]
path = "/*"
function = "entry.netlify-edge"

Usage

Use Netlify CLI to preview or deploy. Read the full guide here

vite build --ssr src/entry.netlify-edge.tsx
netlify dev

Context

Netlify context is available in endpoint method's platform param:

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

Environment variables

export const onRequest = async ({ platform }) => {
  platform.log('Vite env read from .dev file', import.meta.env.VITE_DEV)
  platform.log('netlify serverless env read from Netlify UI or CLI', Deno.env.toObject())
  return {}
};