Drizzle 与 Netlify 边缘函数和 Supabase 数据库的结合

创建新的 Supabase 项目

你可以在 dashboard 中创建新的 Supabase 项目，也可以按照 link 的步骤操作。

设置连接字符串变量

你可以通过点击仪表板顶部栏中的“连接”找到 Project connect details，并从 Transaction pooler 部分复制 URI。请记住将密码占位符替换为你的实际数据库密码。

将 DATABASE_URL 变量添加到你的 .env 文件中。

DATABASE_URL=<YOUR_DATABASE_URL>

在 documentation 中了解更多关于连接到 Supabase 数据库的信息。

设置 Netlify Edge 函数

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

在 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/",
    "postgres": "https://esm.sh/postgres"
  }
}

在 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.toml 的信息。

创建表

在 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 文件并添加以下内容：

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

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

将 Drizzle ORM 连接到你的数据库

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

import type { Context } from "@netlify/edge-functions";
import { usersTable } from "./common/schema.ts";
import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';

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

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

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

本地测试你的代码

运行以下命令启动 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