解决 ReactJS 项目 Vercel 部署上的 Prisma 错误 500

优化 Vercel 上的 Prisma 部署以获得稳定的数据库连接

使用 Prisma 进行错误处理和改进模块化的后端脚本

import { db } from "@/lib/db";
import { Prisma } from "@prisma/client";
import { NextResponse } from "next/server";
export async function POST(req: Request) {
    try {
        const { email } = await req.json();
        const contact = await db.contact.create({
            data: { email }
        });
        return NextResponse.json(contact);
    } catch (error) {
        if (error instanceof Prisma.PrismaClientKnownRequestError) {
            console.log("[CONTACT]", "Email already exists");
            return NextResponse.json({ message: "Email already exists" }, { status: 520 });
        } else {
            console.log("[CONTACT]", error);
            return NextResponse.json({ message: "Server error" }, { status: 500 });
        }
    }
}

使用 Prisma 进行后端配置并优化数据库连接管理

具有生产感知设置的数据库连接脚本

import { PrismaClient } from "@prisma/client";
declare global {
    var prisma: PrismaClient | undefined;
};
export const db = globalThis.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") globalThis.prisma = db;

Prisma 中 CockroachDB 的架构设置

用于 CockroachDB 集成的 Prisma 架构文件

generator client {
    provider = "prisma-client-js"
}
datasource db {
    provider      = "cockroachdb"
    url           = env("DATABASE_URL")
    relationMode  = "prisma"
}
model Contact {
    email         String  @id @unique
    creation      DateTime @default(now())
}

添加数据库连接和API路由的单元测试

数据库函数和 API 路由的 Jest 单元测试示例

import { db } from "@/lib/db";
import { POST } from "@/pages/api/contact";
import { NextResponse } from "next/server";
describe("POST /api/contact", () => {
    it("should create a new contact and return the data", async () => {
        const request = new Request("http://localhost/api/contact", {
            method: "POST",
            body: JSON.stringify({ email: "test@example.com" }),
        });
        const response = await POST(request);
        const data = await response.json();
        expect(data.email).toBe("test@example.com");
    });
    it("should handle known Prisma errors (e.g., duplicate email)", async () => {
        const request = new Request("http://localhost/api/contact", {
            method: "POST",
            body: JSON.stringify({ email: "duplicate@example.com" }),
        });
        const response = await POST(request);
        expect(response.status).toBe(520);
    });
});

使用 Vercel 部署 Prisma 的常见问题

1. 如何避免初始化多个 Prisma 客户端？
2. 为了防止多次初始化，请使用 globalThis 在非生产环境中设置单个 Prisma 实例。这减少了开发中的内存泄漏。
3. 为什么 Prisma 在 Vercel 上失败但在本地工作？
4. 这种情况经常发生，如果 DATABASE_URL Vercel 的环境变量中缺失或设置不正确。检查您的 Vercel 环境配置是否与您的本地设置匹配。
5. Prisma 的目的是什么 @id 属性？
6. 这 @id Prisma 模式中的属性定义了唯一的主键。它对于识别唯一记录（例如联系人列表中的用户电子邮件）至关重要。
7. 如何捕获特定的 Prisma 错误，例如重复项？
8. 使用 PrismaClientKnownRequestError 在 catch 块中，您可以处理已知错误（例如违反唯一约束）并显示用户友好的错误消息。
9. 怎么样 next/server 改善响应处理？
10. 使用 NextResponse.json() 从 next/server 提供了一种在 Next.js API 路由中返回 JSON 数据的简单方法，包括自定义 HTTP 状态。
11. 什么是 await req.json() 在 API 路由中做什么？
12. 此命令解析传入请求中的 JSON 正文，让您可以在路由处理程序中轻松访问数据，例如用户输入。
13. 怎么样 globalThis.prisma 帮助解决记忆问题？
14. 通过初始化 globalThis.prisma 在开发过程中，您可以避免使用多个 Prisma 客户端，这可能会导致 Vercel 内存使用率过高和崩溃。
15. 有什么作用 @default(now()) 在 Prisma 模型中？
16. 这 @default(now()) 属性设置字段的默认时间戳，这对于跟踪记录创建时间（例如日志或用户活动中的时间）很有用。
17. 为什么将 CockroachDB 与 Prisma 结合使用？
18. CockroachDB 与 Prisma 兼容，并提供强大的一致性和可扩展性，非常适合 Vercel 上的生产环境。
19. 如何在部署前测试 Prisma API？
20. Jest 等工具可以在开发过程中验证 Prisma 功能，确保 API 按预期工作并有效处理错误。

Prisma 和 Vercel 顺利集成的关键步骤

在 Vercel 上部署 Prisma 可能会暴露隐藏的问题，但这些问题可以通过正确的配置来克服。遵循环境设置和客户端实例化的最佳实践将使您的部署更加稳定并且能够响应用户操作。

在 API 路由中实施结构化错误处理并执行特定于环境的测试可进一步增强可靠性。通过这些策略，您将遇到更少的意外错误，并且您的应用程序将在开发和生产环境中顺利运行。 🚀