Vercel Edge 轉接器

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

安裝

要整合 vercel-edge 轉接器，請使用 add 命令

npm run qwik add vercel-edge

它會自動安裝所需的依賴項，包括 Vercel CLI。

轉接器會在 adapters/ 目錄中新增一個新的 vite.config.ts，並建立一個新的入口檔案，例如

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

此外，在 package.json 中，build.server 和 deploy 腳本將會被更新。

生產環境建置

要為生產環境建置應用程式，請使用 build 命令，此命令將自動執行 npm run build.server 和 npm run build.client

npm run build

在此閱讀完整指南

開發環境部署

要將應用程式部署到開發環境

npm run deploy

請注意，您可能需要一個 Vercel 帳戶 才能完成此步驟！

生產環境部署

使用 npm run qwik add vercel-edge 安裝整合後，專案就可以部署到 Vercel。但是，您需要建立一個 git 儲存庫並將程式碼推送到該儲存庫。

如需有關如何部署網站的更多資訊，請參閱 Vercel 文件：Vercel 文件

環境變數

您可以像這樣從 Vercel 存取環境變數 process.env['MY_ENV_VAR']

進階

Vercel 邊緣入口中介軟體

添加 vercel-edge 轉接器後，將在 src/entry.vercel-edge.tsx 建立一個新的入口檔案。以下是使用入口檔案中內建中介軟體的範例。

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

編譯後的中介軟體將建置在 .vercel/output 目錄中。

Vercel 邊緣函數

Vercel 邊緣函數 預設會部署在 Vercel 的邊緣網路中，讓您能夠將伺服器端邏輯移至靠近訪客來源的邊緣。

邊緣函數使用 Vercel 邊緣執行環境，該環境建立在 Chrome 瀏覽器使用的相同高效能 V8 JavaScript 和 WebAssembly 引擎上。藉由利用這個小型執行環境，邊緣函數可以比無伺服器函數更快地冷啟動和更高的可擴展性。

邊緣函數在快取後運行，並且可以快取和返回響應。

使用 Vercel 邊緣函數的 Drizzle

在邊緣運行 Postgres 需要與邊緣相容的驅動程式，因為 Postgres 依賴於 Node.js API。當沒有使用轉接器時，在部署過程中可能會出現以下錯誤

└── The Edge Function "_qwik-city" is referencing unsupported modules
└── Cannot bundle Node.js built-in "node:events" imported from "node_modules\postgres\cf\polyfills.js"

幸運的是，drizzle 有一個可以遵循的 章節 來實作正確的轉接器。