Drizzle 与 Netlify Edge Functions 和 Neon Postgres

设置 Neon Postgres

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

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

设置连接字符串变量

在项目仪表板部分，点击 `Connect` 按钮并复制您的数据库连接字符串。它应该类似于：

postgres://username:[email protected]/neondb?sslmode=require

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

DATABASE_URL=NEON_DATABASE_CONNECTION_STRING

设置 Netlify Edge Functions

在项目根目录中创建 `netlify/edge-functions` 目录。这是您存储 Edge Functions 的位置。

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

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

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

设置导入

在项目根目录中创建一个 `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` 文件并添加以下内容：

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

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

此配置告诉 Netlify 使用 `import_map.json` 文件进行 Deno 导入，并将对 `/user` 路径的请求路由到 `user.ts` 函数。在此处阅读有关 `netlify.toml` 的更多信息：此处。

创建表

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

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 config - 由 Drizzle Kit 使用的配置文件，包含有关你的数据库连接、迁移文件夹和 schema 文件的所有信息。

在项目的根目录中创建 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 Kit 将更改推送到 Neon 数据库。

将更改应用于数据库

npx drizzle-kit push

或者，您可以使用迁移工作流。在此处阅读更多信息：迁移。

将 Drizzle ORM 连接到您的数据库

更新您的 `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));
};

在本地测试您的代码

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

netlify dev

当您第一次运行该命令时，它会建议配置 VS Code 以使用 Edge Functions。点击 `Yes` 进行配置。`settings.json` 文件将在 `.vscode` 目录中创建。如果您仍然看到红色下划线，可以重新启动 Deno Language Server。

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

[]

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

初始化新的 Netlify 项目

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

netlify init

在 CLI 中回答问题以创建一个新的 Netlify 项目。在本教程中，我们将选择 `Yes, create and deploy site manually` -> `<您的团队>` -> `<站点名称>`。

设置 Netlify 环境变量

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

netlify env:import .env

在此处阅读有关 Netlify 环境变量的更多信息：此处。

部署您的项目

运行以下命令部署您的项目：

netlify deploy

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

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

netlify deploy --prod