Vercel Edge アダプター

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

インストール

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 Edge エントリミドルウェア

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 Edge Functions

Vercel Edge Functionsは、VercelのEdgeネットワーク上にグローバルにデプロイされ、サーバーサイドロジックをEdgeに、訪問者の発信元に近い場所に移動できます。

Edge Functionsは、Chromeブラウザで使用されているのと同じ高性能V8 JavaScriptおよびWebAssemblyエンジン上に構築されたVercel Edge Runtimeを使用します。この小さなランタイムを活用することで、Edge Functionsは、サーバーレス関数よりも高速なコールドブートと高いスケーラビリティを実現できます。

Edge Functionsはキャッシュの後に実行され、応答をキャッシュおよび返すことができます。

Vercel Edge Functions を使用した 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には、適切なアダプターを実装するための手順が記載されたセクションがあります。