Netlify Edge 轉接器

Qwik City Netlify Edge 轉接器允許您將 Qwik City 連接到 Netlify Edge 函式。

安裝

要整合 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 邊緣入口中介軟體

新增 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 邊緣函數宣告

Netlify 邊緣函數宣告 可以設定為在特定的 URL 模式上執行。每個邊緣函數宣告會將一個網站路徑模式與一個函數關聯，以便在符合該路徑的請求上執行。單一請求可以執行來自一系列宣告的邊緣函數鏈。單一邊緣函數可以與多個宣告中的多個路徑關聯。

這對於判斷頁面回應是否應該進行伺服器端渲染 (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 邊緣中介軟體來源