使用 Prisma ORM 和 Cloudflare D1 构建应用程序

自 2017 年推出 Workers 以来,Cloudflare 一直引领边缘计算领域。Cloudflare 最近通过 D1 发布了本机无服务器数据库。我们现在可以使用 Prisma ORM 与 D1 一起构建应用程序。

将数据库部署到边缘

Cloudflare Workers 是一种分布在全球范围内的轻量级无服务器计算形式。它们允许您尽可能靠近最终用户部署和运行应用程序。

D1 是 Cloudflare 用于边缘环境的本机无服务器数据库,它基于 SQLite,可在通过 Cloudflare 部署应用程序时使用。D1 最初于 2022 年推出。

遵循 Cloudflare 的地理分布原则并使计算和数据更接近应用程序用户,D1 支持自动读取复制,它根据数据库获取的查询数量和来自数据库的查询数量,来动态管理数据库实例的数量和只读副本的位置。

这意味着读取查询是针对最接近发出查询的位置的 D1 实例执行的。

虽然您也可以将 Prisma ORM 与其他数据库提供商一起使用只读副本,但这通常需要您使用只读副本客户端扩展。使用 D1 时,开箱即用地支持只读副本,无需专用的客户端扩展。

另一方面,对于写入操作,查询仍然会传输到单个主实例,以便将更改传播到所有读取副本并确保数据一致性。

Prisma ORM 支持 D1

在 Prisma,我们相信 Cloudflare 处于构建应用程序构建和部署方式未来的最前沿。支持 D1 一直是 GitHub 上 Prisma ORM 最受欢迎的功能请求之一。

作为 Cloudflare 作为技术提供商的坚定拥护者,我们很高兴与大家分享,您现在可以在 Cloudflare Workers(和 Pages)内使用 Prisma ORM 来访问 D1 数据库。

请注意,此功能基于当前处于预览版的驱动程序适配器,因此我们认为 D1 支持也处于预览版。

Prisma ORM 和 D1 入门

在下文中,您将找到设置和部署带有 D1 数据库的 Cloudflare Worker 的分步说明,该数据库完全从头开始通过 Prisma ORM 访问。

截至此版本,Prisma Migrate 尚未与 D1 完全兼容。在本教程中,您将结合使用 D1 的迁移系统和 prisma migrate diff 命令来生成并运行迁移。

先决条件

  • 已安装 Node.js 和 npm
  • 一个 Cloudflare 帐户

创建 Cloudflare Worker

第一步,继续使用 npm create 引导普通版本的 Cloudflare Worker(使用 Cloudflare 的 hello-world 模板)。在终端中运行以下命令:

bash 复制代码
npm create cloudflare@latest prisma-d1-example -- --type hello-world

这将打开一个 CLI 向导,每次出现问题时按回车键选择所有默认选项。

在向导结束时,您应该在域 prisma-d1-example.USERNAME.workers.dev 中部署了一个 Cloudflare Worker,它只是在浏览器中呈现「Hello World」:

初始化 Prisma ORM

当您的 Worker 就位后,让我们继续设置 Prisma ORM。首先,导航到项目目录并安装 Prisma CLI:

bash 复制代码
cd prisma-d1-example
npm install prisma --save-dev

接下来,安装 Prisma 客户端包以及 D1 的驱动程序适配器:

bash 复制代码
npm install @prisma/client
npm install @prisma/adapter-d1

最后,使用以下命令引导 Prisma ORM 所需的文件:

bash 复制代码
npx prisma init --datasource-provider sqlite

这个命令做了两件事:

  1. 它创建了一个名为 prisma 的新目录,其中包含您的 Prisma 架构文件
  2. 它创建了一个 .env 文件,该文件通常用于配置 Prisma CLI 读取的环境变量

在本教程中,您不需要 .env 文件,因为 Prisma ORM 和 D1 之间的连接将通过绑定进行。您将在下一步中找到有关设置此绑定的说明。

由于您将使用当前处于预览版的驱动程序适配器功能,因此您需要通过 generator 块上的 previewFeatures 字段显式启用它。

打开 schema.prisma 文件并调整 generator 块,如下所示:

js 复制代码
generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

创建 D1 数据库

在此步骤中,您将设置 D1 数据库,通常有两种方法:使用 Cloudflare 仪表板 UI 或通过 wrangler CLI。您将在本教程中使用 CLI。

打开终端并运行以下命令:

bash 复制代码
npx wrangler d1 create prisma-demo-db

如果一切顺利,您应该看到类似以下的输出:

shell 复制代码
✅ Successfully created DB 'prisma-demo-db' in region EEUR
Created your database using D1's new storage backend. The new storage backend is not yet recommended for production workloads, but backs up your data via
point-in-time restore.

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "prisma-demo-db"
database_id = "__YOUR_D1_DATABASE_ID__"

现在,您的 Cloudflare 帐户中有一个 D1 数据库,并绑定到您的 Cloudflare Worker。

复制命令输出的最后一部分并将其粘贴到 wrangler.toml 文件中。它应该类似于:

shell 复制代码
name = "prisma-d1-example"
main = "src/index.ts"
compatibility_date = "2024-03-20"
compatibility_flags = ["nodejs_compat"]

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "prisma-demo-db"
database_id = "__YOUR_D1_DATABASE_ID__"

请注意,上面代码片段中的 __YOUR_D1_DATABASE_ID__ 是一个占位符,应替换为您自己的 D1 实例的数据库 ID。如果您无法从终端输出中获取此 ID,您还可以在 Cloudflare 仪表板中或通过在终端中运行 npx wrangler d1 info prisma-demo-db 来找到它。

接下来,您将在数据库中创建一个数据库表,以便能够使用 Prisma ORM 向 D1 发送一些查询。

在数据库中创建表

D1 通过 wrangler d1 migrate 命令自带了自己的迁移系统。该迁移系统与 Prisma CLI 完美配合,Prisma CLI 提供的工具允许您为架构更改生成 SQL 语句。所以你可以:

  • 使用 D1 的本机迁移系统创建迁移文件并将其应用到您的 D1 实例
  • 使用 Prisma CLI 为任何架构更改生成 SQL 语句

接下来,您将使用 D1 的迁移系统和 Prisma CLI 针对数据库创建和运行迁移。首先,使用 wrangler CLI 创建新的迁移:

bash 复制代码
npx wrangler d1 migrations create prisma-demo-db create_user_table

当提示该命令是否可以创建名为 migrations 的新文件夹时,请按回车进行确认。接下来,您需要将创建 User 表的 SQL 语句添加到该文件中。打开 schema.prisma 文件并向其中添加以下 User 模型:

js 复制代码
model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

现在,在终端中运行以下命令来生成 SQL 语句,该语句创建与上面的 User 模型等效的 User 表:

bash 复制代码
npx prisma migrate diff --from-empty --to-schema-datamodel ./prisma/schema.prisma --script > migrations/0001_create_user_table.sql

这会存储一条 SQL 语句,用于在之前的迁移文件中创建一个新的 User 表。

在本教程中,您将同时执行这两项操作:在本地测试 Worker,然后进行部署。因此,您需要运行这两个命令。打开终端并粘贴以下命令。

首先,对本地数据库执行架构更改:

bash 复制代码
npx wrangler d1 migrations apply prisma-demo-db --local

接下来,针对远程数据库:

bash 复制代码
npx wrangler d1 migrations apply prisma-demo-db --remote

当系统提示您确认是否应应用迁移时,请两次按回车键。您的本地和远程 D1 实例现在都包含 User 表。

我们还创建一些虚拟数据,以便在 Worker 运行后进行查询。这次,您将运行 SQL 语句而不将其存储在文件中。

针对本地数据库运行命令:

bash 复制代码
npx wrangler d1 execute prisma-demo-db --command "INSERT INTO  \"User\" (\"email\", \"name\") VALUES 
('jane@prisma.io', 'Jane Doe (Local)');" --local

针对远程数据库运行命令:

bash 复制代码
npx wrangler d1 execute prisma-demo-db --command "INSERT INTO  \"User\" (\"email\", \"name\") VALUES 
('jane@prisma.io', 'Jane Doe (Remote)');" --remote

现在,您的本地和远程数据库实例中都有一条虚拟记录。您可以在 .wrangler/state 中找到本地 SQLite 文件,而可以在 Cloudflare 仪表板中检查远程文件。

从 Worker 查询数据库

为了使用 Prisma ORM 从 Worker 查询数据库,您需要:

  1. 将 DB 添加到 Env 接口
  2. 使用 PrismaD1 驱动程序适配器实例化 PrismaClient
  3. 使用 Prisma 客户端发送查询并返回结果

打开 src/index.ts 并将整个内容替换为以下内容:

ts 复制代码
import { PrismaClient } from '@prisma/client'
import { PrismaD1 } from '@prisma/adapter-d1'

export interface Env {
  DB: D1Database
}

export default {
	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const adapter = new PrismaD1(env.DB)
    const prisma = new PrismaClient({ adapter })

    const users = await prisma.user.findMany()
    const result = JSON.stringify(users)
    return new Response(result);
		},
};

在运行 Worker 之前,需要使用 npx prisma generate 命令生成 Prisma Client。

本地运行 Worker

数据库查询到位并生成 Prisma 客户端后,您可以使用 npm run dev 继续在本地运行 Worker。现在您可以打开浏览器 http://localhost:8787 来查看数据库查询的结果:

js 复制代码
[{"id":1,"email":"jane@prisma.io","name":"Jane Doe (Local)"}]

部署 Worker

要部署 Worker,请运行命令 npm run deploy

和以前一样,您部署的 Worker 可以通过 https://prisma-d1-example.USERNAME.workers.dev 访问。如果您将浏览器导航到该 URL,您应该会看到从远程 D1 数据库查询的以下数据:

恭喜,您刚刚部署了一个使用 D1 作为数据库的 Cloudflare Worker 并通过 Prisma ORM 查询它 🎉

参考链接:www.prisma.io/blog/build-...

相关推荐
阿伟来咯~8 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端13 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱15 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai25 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨26 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js