使用 Vercel 和 Prisma Postgres 进行即时应用部署

介绍

本指南向您展示如何使用 Vercel 的 API 结合集成的 Prisma Postgres 数据库来实现即时应用部署。您将学习如何通过单个 API 调用以编程方式创建、部署和转移全栈应用程序。

即时应用部署解决了 AI 编码平台、无代码工具和教育平台的一个关键问题：如何将生成的代码变为可投入生产的实时应用程序。您无需要求用户手动设置托管基础设施，而是可以提供一键部署，同时包含应用程序和数据库。

通过本指南，您将了解如何将 Vercel 的部署 API 与 Prisma Postgres 集成，为您的用户创造流畅的部署体验。

尝试在线演示

通过我们的交互式演示体验即时部署流程。您可以部署并认领真实应用程序，亲眼目睹整个过程。

Vercel App Deployment Demo

可用示例

Next.js + Prisma：带数据库集成的基础全栈应用程序
Next.js + Prisma + Better Auth：使用 Better Auth 的完整应用程序，包含身份验证

演示功能

一键部署应用程序
生成用于用户转移的认领代码
体验完整的认领流程
查看源代码和实现细节

访问演示的 GitHub 仓库.

适用人群

本指南专为以下开发者设计

需要即时部署生成完整应用程序的 AI 驱动开发平台
希望提供托管而无需管理基础设施的 无代码/低代码工具
学生需要快速部署项目的 教育平台
需要编程部署能力的 CI/CD 系统
将想法转化为已部署应用程序的 快速原型工具

核心概念

在实现部署流程之前，让我们了解一下关键概念

Vercel 部署架构

项目：包含您的应用程序代码和配置的容器
部署：部署到 Vercel 边缘网络的特定项目实例
团队：拥有项目和管理账单的组织单位
集成：连接到您项目的第三方服务（如 Prisma）

Prisma 集成组件

集成配置：您的团队与 Prisma 服务的连接
授权：代表您的团队创建资源的权限
数据库存储：独立的 Prisma Postgres 实例
资源连接：数据库和 Vercel 项目之间的链接

API 端点概览

部署过程使用几个关键的 Vercel API 端点

POST /v10/projects - 创建新的 Vercel 项目
POST /v1/integrations/billing/authorization - 授权 Prisma 集成
POST /v1/storage/stores/integration - 创建 Prisma Postgres 数据库
POST /v13/deployments - 部署应用程序代码
POST /v9/projects/{id}/transfer-request - 生成用于用户转移的认领代码

所需 API 密钥和环境变量

请联系我们以获取更高的合作伙伴级别数据库创建权限

默认情况下，每个新合作伙伴都处于我们的免费计划，每个账户限制创建 5 个数据库。因此，如果您正在试用此 API 并需要更高的数据库创建限制（我们预计大多数人都会需要），请联系我们以获取合作伙伴级别的访问权限。

Vercel 访问令牌

您用于 Vercel API 调用的主要身份验证令牌。

如何获取

前往 Vercel 账户设置
点击 创建令牌
命名它（例如，“即时部署 API”）
将范围设置为您的团队（而非个人账户）
立即复制令牌（您不会再看到它）

提示

您需要对 Vercel 团队拥有“所有者”级别访问权限，以确保 ACCESS_TOKEN 适用于所有 API 调用。

ACCESS_TOKEN="vercel_token_here"

信用卡要求

Vercel 要求您的账户绑定信用卡（即使是 Hobby 计划），才能使用部署 API。请务必在继续之前在 Vercel 账户设置中添加支付信息。

团队 ID

您的 Vercel 团队标识符，用于 API 请求。

如何获取

前往 Vercel 仪表板
切换到您的团队（而非个人账户）
前往 团队设置
复制顶部显示的团队 ID（格式：team_abc123xyz）

TEAM_ID="team_abc123xyz"

Prisma 集成配置 ID

您的团队的 Prisma 集成配置标识符。

如何获取

在 Vercel 仪表板中，前往您的团队
点击集成选项卡
找到 Prisma 并点击管理（如果需要，请先安装）
在浏览器 URL 中，复制配置 ID：https://vercel.com/teams/your-team/integrations/icfg_abc123xyz
复制 icfg_abc123xyz 部分

INTEGRATION_CONFIG_ID="icfg_abc123xyz"

Prisma 产品 ID

Prisma 产品 ID 用于在 Vercel API 中标识 Prisma 集成，其常量值为：iap_yVdbiKqs5fLkYDAB 或 prisma-postgres。

PRISMA_PRODUCT_ID="iap_yVdbiKqs5fLkYDAB"

Prisma Postgres 区域

您的 Prisma Postgres 数据库将部署的区域。选择靠近您用户的区域以获得最佳性能。

可用区域

iad1 - 美国东部（弗吉尼亚）
fra1 - 欧洲（法兰克福）
sfo1 - 美国西部（旧金山）
sin1 - 亚太地区（新加坡）
hnd1 - 亚太地区（东京）
cdg1 - 欧洲（巴黎）

PRISMA_POSTGRES_REGION="iad1"

请参阅支持的 Prisma Postgres 区域及其对应的Vercel 区域代码的完整列表。

Prisma 账单计划

账单计划决定了数据库限制和功能。可用计划：

free - 限制为 5 个数据库，适用于开发
pro - 更高的限制，带有连接池和缓存
business - 具有优先支持的企业功能
enterprise - 自定义限制和专用支持
partnerEntry - 具有高数据库限制的合作伙伴级别访问

PRISMA_BILLING_PLAN="partnerEntry"

建议合作伙伴访问

对于需要多个数据库的生产部署，我们推荐 partnerEntry 计划，它提供更高的数据库创建限制。申请合作伙伴访问以解锁这些功能。

完整部署示例

下面的代码片段展示了完整的部署流程

const CONFIG = {
  ACCESS_TOKEN: process.env.ACCESS_TOKEN,
  TEAM_ID: process.env.TEAM_ID,
  INTEGRATION_CONFIG_ID: process.env.INTEGRATION_CONFIG_ID,
  PRISMA_PRODUCT_ID: process.env.PRISMA_PRODUCT_ID || "iap_yVdbiKqs5fLkYDAB", // or can be `prisma-postgres`
  PRISMA_POSTGRES_REGION: process.env.PRISMA_POSTGRES_REGION || "iad1",
  PRISMA_BILLING_PLAN: process.env.PRISMA_BILLING_PLAN || "partnerEntry",
  VERCEL_API_URL: "https://api.vercel.com",
};

async function deployApp() {
  console.log("🚀 Starting instant deployment...");

  // 1. Create project
  const project = await createProject();

  // 2. Authorize Prisma integration
  const auth = await createPrismaAuthorization();

  // 3. Create database
  const database = await createPrismaDatabase(
    project.name,
    auth.id,
    auth.configId
  );

  // 4. Connect database to project
  await connectDatabaseToProject(project.id, database.id, auth.configId);

  // 5. Deploy application (assumes files already uploaded)
  const deployment = await deployApplication(project.name, fileSha);

  // 6. Generate claim code
  const transfer = await createProjectTransfer(project.id);

  console.log("🎉 Deployment completed!");
  console.log(`Live URL: https://${deployment.url}`);
  console.log(`Claim URL: ${transfer.claimUrl}`);

  return {
    projectId: project.id,
    deploymentUrl: `https://${deployment.url}`,
    claimCode: transfer.code,
    claimUrl: transfer.claimUrl,
  };
}

分步部署流程

上面的完整示例演示了整个部署过程。现在让我们详细分解每个步骤。

步骤 1：创建 Vercel 项目

每次部署都从创建项目容器开始。

async function createProject(): Promise<{ id: string; name: string }> {
  const projectName = `demo-project-${Date.now()}`;
  
  const response = await fetch(
    `${CONFIG.VERCEL_API_URL}/v10/projects?teamId=${CONFIG.TEAM_ID}`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${CONFIG.ACCESS_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ name: projectName }),
    }
  );

  const project = await response.json();
  console.log(`✅ Project created: ${project.name} (${project.id})`);
  
  return { id: project.id, name: project.name };
}

关键参数

name：唯一的项目标识符（自动生成带时间戳）
teamId：您的团队 ID，用于正确的项目所有权

在 Vercel 项目 API 文档中了解更多信息。

步骤 2：授权 Prisma 集成

在创建数据库之前，您需要授权代表您的团队使用 Prisma。

async function createPrismaAuthorization(): Promise<{
  id: string;
  configId: string;
}> {
  const response = await fetch(
    `${CONFIG.VERCEL_API_URL}/v1/integrations/billing/authorization?teamId=${CONFIG.TEAM_ID}`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${CONFIG.ACCESS_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        integrationIdOrSlug: "prisma",
        productId: CONFIG.PRISMA_PRODUCT_ID,
        billingPlanId: CONFIG.PRISMA_BILLING_PLAN,
        metadata: JSON.stringify({ region: CONFIG.PRISMA_POSTGRES_REGION }),
        integrationConfigurationId: CONFIG.INTEGRATION_CONFIG_ID,
      }),
    }
  );

  const authData = await response.json();
  
  return {
    id: authData.authorization.id,
    configId: authData.authorization.integrationConfigurationId,
  };
}

关键参数

billingPlanId：账单计划（生产环境建议使用“partnerEntry”）
region：数据库区域，以获得最佳性能
metadata：包含区域和其他配置的 JSON 字符串

在 Vercel 集成 API 文档中了解更多信息。

步骤 3：预置 Prisma Postgres 数据库

创建一个新的数据库实例，带有自动连接池和缓存功能。

async function createPrismaDatabase(
  projectName: string,
  authId: string,
  configId: string
): Promise<{ id: string; }> {
  const response = await fetch(
    `${CONFIG.VERCEL_API_URL}/v1/storage/stores/integration?teamId=${CONFIG.TEAM_ID}`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${CONFIG.ACCESS_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        metadata: { region: CONFIG.PRISMA_POSTGRES_REGION },
        billingPlanId: CONFIG.PRISMA_BILLING_PLAN,
        name: `postgres-${projectName}`,
        integrationConfigurationId: configId,
        integrationProductIdOrSlug: CONFIG.PRISMA_PRODUCT_ID,
        authorizationId: authId,
        source: "marketplace",
      }),
    }
  );

  const storageData = await response.json();
  
  return {
    id: storageData.store.id
  };
}

关键参数

name：数据库标识符（通常与项目名称匹配）
source：“marketplace”表示 Vercel marketplace 集成
billingPlanId：决定功能和限制的账单计划

在 Vercel 存储 API 文档中了解更多信息。

步骤 4：将数据库连接到项目

将数据库链接到您的 Vercel 项目，以自动注入环境变量。

async function connectDatabaseToProject(
  projectId: string,
  storeId: string,
  configId: string
): Promise<void> {
  await fetch(
    `${CONFIG.VERCEL_API_URL}/v1/integrations/installations/${configId}/products/${CONFIG.PRISMA_PRODUCT_ID}/resources/${storeId}/connections?teamId=${CONFIG.TEAM_ID}`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${CONFIG.ACCESS_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ projectId }),
    }
  );

  console.log("✅ Database connected to project");
}

此连接会自动将 DATABASE_URL 和其他环境变量添加到您的项目中。

在 Vercel 集成资源文档中了解更多信息。

步骤 5：部署应用程序

将您的应用程序代码部署到 Vercel。

async function deployApplication(
  projectName: string,
  fileSha: string
): Promise<{ id: string; url: string }> {
  const response = await fetch(
    `${CONFIG.VERCEL_API_URL}/v13/deployments?teamId=${CONFIG.TEAM_ID}`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${CONFIG.ACCESS_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        files: [{ file: ".vercel/source.tgz", sha: fileSha }],
        name: `deployment-${Date.now()}`,
        projectSettings: { framework: "nextjs" },
        project: projectName,
      }),
    }
  );

  const deploymentData = await response.json();
  
  return {
    id: deploymentData.id,
    url: deploymentData.alias?.[0] || deploymentData.url,
  };
}

关键参数

files：上传文件数组（需要先以 tgz 格式上传文件）
framework：“nextjs”、“react”、“vue”等，用于自动配置
projectSettings：框架特定的构建和运行时设置

在 Vercel 部署 API 文档中了解更多信息，或参阅 Vercel API 参考。

步骤 6：生成用户转移认领代码

创建一个转移代码，允许用户认领已部署项目的所有权。

async function createProjectTransfer(
  projectId: string
): Promise<{ code: string; claimUrl: string }> {
  const response = await fetch(
    `${CONFIG.VERCEL_API_URL}/v9/projects/${projectId}/transfer-request?teamId=${CONFIG.TEAM_ID}`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${CONFIG.ACCESS_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({}),
    }
  );

  const transferData = await response.json();
  const claimUrl = `https://vercel.com/claim-deployment?code=${transferData.code}&returnUrl=https://myapp.com/dashboard/projects`;

  return {
    code: transferData.code,
    claimUrl,
  };
}

主要细节

转移代码有效期为 24 小时
用户可以将项目认领到其 Vercel 账户中的任何团队
如果认领 URL 无效或已过期，returnUrl 会将用户重定向到特定页面

在 Vercel 认领部署文档中了解更多信息。

用户认领流程

部署后，用户可以通过安全的转移过程认领所有权

认领如何运作

用户收到认领 URL：您的平台提供生成的认领 URL
用户认证：如果未认证，Vercel 会提示登录
团队选择：用户选择哪个 Vercel 团队应拥有该项目
转移完成：项目和数据库转移到用户选择的团队
账单转移：用户的团队负责托管费用

认领 URL 结构

https://vercel.com/claim-deployment?code=xxx&returnUrl=https://myapp.com/dashboard/projects

参数

code：步骤 6 中的转移代码（有效期 24 小时）
returnUrl：如果认领 URL 无效或已过期，会将用户重定向到特定页面

转移内容

当用户认领部署时，他们将获得

完整的项目所有权，包括所有源代码和配置
数据库所有权，包括所有数据和连接字符串
为新团队自动更新的 环境变量
部署历史记录 和构建日志

在认领部署文档中了解更多信息。

错误处理和最佳实践

常见错误场景

async function handleApiErrors(response: Response, operation: string) {
  if (!response.ok) {
    const errorData = await response.text();
    
    // Handle specific error cases
    switch (response.status) {
      case 401:
        throw new Error(`Authentication failed: Check your ACCESS_TOKEN`);
      case 403:
        throw new Error(`Permission denied: Verify team access and scopes`);
      case 429:
        throw new Error(`Rate limit exceeded: Implement retry logic`);
      case 404:
        throw new Error(`Resource not found: Check IDs and configuration`);
      default:
        throw new Error(`${operation} failed: ${response.status} - ${errorData}`);
    }
  }
}

正确的错误处理可以防止部署失败，并为您的用户提供清晰的调试信息。

速率限制注意事项

Vercel 对 API 端点强制执行速率限制。您可以实现指数退避来处理速率限制

async function apiCallWithRetry(url: string, options: RequestInit, maxRetries = 3) {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);
      
      if (response.status === 429) {
        const waitTime = Math.pow(2, attempt) * 1000; // Exponential backoff
        await new Promise(resolve => setTimeout(resolve, waitTime));
        continue;
      }
      
      return response;
    } catch (error) {
      if (attempt === maxRetries) throw error;
    }
  }
}

重试逻辑确保您的部署服务在高流量时期保持可靠。

在 Vercel API 限制文档中了解更多信息。

安全最佳实践

安全存储令牌：切勿在客户端代码中公开 API 令牌
验证输入：清理项目名称和用户提供的数据
监控使用情况：跟踪 API 调用以防止滥用
实施超时：设置合理的请求超时以确保可靠性

这些实践可以保护您的集成免受常见的安全漏洞影响，并确保稳定运行。

生产环境注意事项

以下是您的部署服务的一些生产环境注意事项

与现有平台的集成

您可以将部署服务与现有平台集成，为用户提供流畅的体验

// Example integration with an AI coding platform
class DeploymentService {
  async deployGeneratedApp(code: string, userId: string) {
    // 1. Package generated code
    const packagedCode = await this.packageCode(code);
    
    // 2. Deploy with Vercel + Prisma
    const deployment = await this.deployApp(packagedCode);
    
    // 3. Store deployment info
    await this.storeDeployment(userId, deployment);
    
    // 4. Notify user
    await this.notifyUser(userId, deployment.claimUrl);
    
    return deployment;
  }
}

监控和分析

跟踪部署服务的关键指标

部署成功率：监控 API 失败和超时
认领转化率：跟踪认领其部署的用户数量
性能指标：衡量部署时间和用户体验
成本分析：监控 Vercel 和 Prisma 的使用成本

后续步骤

现在您已了解 Vercel 和 Prisma Postgres 的即时应用部署，您可以：

集成到您的平台：将部署功能添加到您现有的应用程序
自定义流程：根据您的特定用例和用户体验调整流程
扩展您的实现：通过适当的排队和错误处理来处理大批量部署
监控和优化：跟踪性能和用户采用指标

其他资源

有关集成的疑问或支持，请通过 Prisma 社区 Discord 或 Vercel 支持联系我们。

与 Prisma 保持联系

通过以下方式与我们保持联系，继续你的 Prisma 之旅：我们的活跃社区。保持信息灵通，参与其中，并与其他开发人员协作。

在 X 上关注我们获取公告、直播活动和实用技巧。
加入我们的 Discord 提问、与社区交流，并通过对话获得积极支持。
在 YouTube 上订阅获取教程、演示和直播。
在 GitHub 上参与加星收藏存储库、报告问题或为问题做出贡献。

我们真诚地感谢你的参与，并期待你成为我们社区的一部分！

介绍​

尝试在线演示​

适用人群​

核心概念​

Vercel 部署架构​

Prisma 集成组件​

API 端点概览​

所需 API 密钥和环境变量​

Vercel 访问令牌​

团队 ID​

Prisma 集成配置 ID​

Prisma 产品 ID​

Prisma Postgres 区域​

Prisma 账单计划​

完整部署示例​

分步部署流程​

步骤 1：创建 Vercel 项目​

步骤 2：授权 Prisma 集成​

步骤 3：预置 Prisma Postgres 数据库​

步骤 4：将数据库连接到项目​

步骤 5：部署应用程序​

步骤 6：生成用户转移认领代码​

用户认领流程​

认领如何运作​

认领 URL 结构​

转移内容​

错误处理和最佳实践​

常见错误场景​

速率限制注意事项​

安全最佳实践​

生产环境注意事项​

与现有平台的集成​

监控和分析​

后续步骤​

其他资源​

与 Prisma 保持联系

介绍

尝试在线演示

适用人群

核心概念

Vercel 部署架构

Prisma 集成组件

API 端点概览

所需 API 密钥和环境变量

Vercel 访问令牌

团队 ID

Prisma 集成配置 ID

Prisma 产品 ID

Prisma Postgres 区域

Prisma 账单计划

完整部署示例

分步部署流程

步骤 1：创建 Vercel 项目

步骤 2：授权 Prisma 集成

步骤 3：预置 Prisma Postgres 数据库

步骤 4：将数据库连接到项目

步骤 5：部署应用程序

步骤 6：生成用户转移认领代码

用户认领流程

认领如何运作

认领 URL 结构

转移内容

错误处理和最佳实践

常见错误场景

速率限制注意事项

安全最佳实践

生产环境注意事项

与现有平台的集成

监控和分析

后续步骤

其他资源