Drizzle 与 Netlify Edge Functions 和 Neon Postgres 结合使用

本教程演示了如何将 Drizzle ORM 与 Netlify Edge 函数 和 Neon Postgres 数据库一起使用。

This guide assumes familiarity with:

  • 你应该已经安装了最新版本的 Netlify CLI。

  • 你应该已经安装了 Drizzle ORM 和 Drizzle 套件。你可以通过运行以下命令来实现：

npm
yarn
pnpm
bun 
npm i drizzle-orm -D drizzle-kit
  • 你应该已经安装了用于管理环境变量的 dotenv 包。如果你使用 Node.js v20.6.0 或更高版本，则无需安装它，因为 Node.js 原生支持 .env 文件。了解更多关于 此处 的信息。
npm
yarn
pnpm
bun 
npm i dotenv
  • 你也可以选择安装 @netlify/edge-functions 包来导入稍后将要使用的 Context 对象的类型。
npm
yarn
pnpm
bun 
npm i @netlify/edge-functions
IMPORTANT

这些已安装的软件包仅用于在 创建表、设置 Drizzle 配置文件 和 应用更改到数据库 步骤中在数据库中创建表。这些软件包不会影响 Netlify Edge Functions 中运行的代码。我们将使用 import_map.json 导入 Edge Functions 所需的包。

设置 Neon Postgres

登录 Neon 控制台 并导航到“项目”部分。选择一个项目或点击 New Project 按钮创建一个新项目。

你的 Neon 项目附带一个名为 neondb 的即用型 Postgres 数据库。我们将在本教程中使用它。

设置连接字符串变量

在“项目仪表板”部分中，单击“Connect”按钮并复制数据库连接字符串。它应该类似于以下内容：

postgres://username:password@ep-cool-darkness-123456.us-east-2.aws.neon.tech/neondb?sslmode=require

将 DATABASE_URL 环境变量添加到你的 .env 文件中，你将使用该文件连接到 Neon 数据库。

DATABASE_URL=NEON_DATABASE_CONNECTION_STRING

设置 Netlify Edge 函数

在项目根目录中创建 netlify/edge-functions 目录。这是你存储 Edge 函数的地方。

在 netlify/edge-functions 目录中创建一个函数 user.ts。

netlify/edge-functions/user.ts
import type { Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  return new Response("User data");
};
IMPORTANT

Request 和 Response 对象的类型位于全局范围内。

设置导入

在项目根目录中创建一个 import_map.json 文件并添加以下内容：

import_map.json
{
  "imports": {
    "drizzle-orm/": "https://esm.sh/drizzle-orm/",
    "@neondatabase/serverless": "https://esm.sh/@neondatabase/serverless"
  }
}

在 Netlify Edge Functions 此处 中了解更多关于 import_map.json 的信息。

创建 Netlify 配置文件

在项目根目录中创建一个 netlify.toml 文件并添加以下内容：

netlify.toml
[functions]
  deno_import_map = "./import_map.json"

[[edge_functions]]
  path = "/user"
  function = "user"

此配置告知 Netlify 使用 import_map.json 文件进行 Deno 导入，并将请求路由到 /user 路径并发送到 user.ts 函数。在 netlify.toml 和 此处 中了解更多关于 netlify.toml 的信息。

创建表

在 netlify/edge-functions/common 目录中创建一个 schema.ts 文件并声明表模式：

netlify/edge-functions/common/schema.ts
import { pgTable, serial, text, integer } from "drizzle-orm/pg-core";

export const usersTable = pgTable('users_table', {
  id: serial('id').primaryKey(),
  name: text('name').notNull(),
  age: integer('age').notNull(),
  email: text('email').notNull().unique(),
})

设置 Drizzle 配置文件

Drizzle 配置 - Drizzle 套件 使用的配置文件，包含有关数据库连接、迁移文件夹和模式文件的所有信息。

在项目根目录中创建一个 drizzle.config.ts 文件并添加以下内容：

drizzle.config.ts
import 'dotenv/config'; // remove this line if you use Node.js v20.6.0 or later
import type { Config } from "drizzle-kit";

export default {
  schema: './netlify/edge-functions/common/schema.ts',
  out: './drizzle',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
} satisfies Config;

在本教程中，我们将使用 Drizzle 工具包将更改推送到 Neon 数据库。

应用更改到数据库

npx drizzle-kit push
IMPORTANT
Push command is good for situations where you need to quickly test new schema designs or changes in a local development environment, allowing for fast iterations without the overhead of managing migration files.

或者，你可以使用迁移工作流。点击此处了解详情：迁移。

将 Drizzle ORM 连接到你的数据库

更新你的 netlify/edge-functions/user.ts 文件并设置数据库配置：

netlify/edge-functions/user.ts
import type { Context } from "@netlify/edge-functions";
import { usersTable } from "./common/schema.ts";
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';

export default async (request: Request, context: Context) => {
  const sql = neon(Netlify.env.get("DATABASE_URL")!);
  const db = drizzle({ client: sql });

  const users = await db.select().from(usersTable);

  return new Response(JSON.stringify(users));
};
IMPORTANT

如果你使用的是 VS Code，你可能会在导入语句下方看到一条红色下划线。Edge Function 仍将执行。要去除红色下划线，你可以在下一步中配置 VS Code 以使用 Edge Functions。

本地测试你的代码

运行以下命令启动 Netlify 开发服务器：

netlify dev

首次运行该命令时，系统会建议将 VS Code 配置为使用 Edge Function。点击 Yes 进行配置。settings.json 文件将在 .vscode 目录中创建。如果你仍然看到红色下划线，则可以重新启动 Deno 语言服务器。

打开浏览器并导航至路由 /user。你应该看到从 Neon 数据库返回的用户数据：

[]

如果你尚未向 users_table 表添加任何数据，它可能是一个空数组。

初始化新的 Netlify 项目

运行以下命令初始化新的 Netlify 项目：

netlify init

在 CLI 中回答问题以创建一个新的 Netlify 项目。在本教程中，我们将选择 Yes, create and deploy site manually -> <YOUR_TEAM> -> <SITE_NAME>。

设置 Netlify 环境变量

运行以下命令将环境变量导入 Netlify：

netlify env:import .env

在 此处 中了解更多关于 Netlify 环境变量的信息。

部署你的项目

运行以下命令部署项目：

netlify deploy

请按照 CLI 中的说明将你的项目部署到 Netlify。在本教程中，我们的发布目录是 '.'。

默认情况下，它是 部署草稿 版本。要进行生产部署，请运行以下命令：

netlify deploy --prod

最后，你可以使用已部署网站的 URL 并导航到你创建的路由 (e.g. /user) 来访问你的边缘函数。