Vercel 与 Azure Cosmos DB 集成

Vercel 为 Web 应用程序的开发和部署提供了用户友好且可靠的平台。 这种新的集成提高了工作效率,因为开发人员现在可以轻松创建已配置后端数据库的 Vercel 应用程序。 此集成可帮助开发人员实时将想法转化为现实。

将 Azure Cosmos DB 与 Vercel 集成入门

本文档专为寻求将 Azure Cosmos DB 的强大功能(多区域分布式多模型数据库服务)与 Vercel 的高性能部署和托管解决方案相结合的开发人员设计。

此集成使开发人员能够应用通用且高性能的 NoSQL 数据库的优势,同时利用 Vercel 的无服务器体系结构和开发平台。

可通过两种方法集成 Azure Cosmos DB。

通过集成市场将 Cosmos DB 与 Vercel 集成

如果已知道要将哪些 Vercel 项目与 Azure Cosmos DB 集成或想要将现有 Vercel 项目连接到 Azure Cosmos DB,请使用本指南。

先决条件

将 Azure Cosmos DB 与 Vercel 集成的步骤

  1. 选择要与 Azure Cosmos DB 集成的 Vercel 项目。 准备好先决条件后,请访问 Vercel 市场上的 Cosmos DB 集成页,然后选择“添加集成”

    显示 Vercel 市场上的 Azure Cosmos DB 集成页的屏幕截图。

  2. 选择所有项目或特定项目进行集成。 在本指南中,我们继续选择特定项目。 选择“安装” 即可继续。

    屏幕截图显示如何选择 vercel 项目。

  3. 登录到现有的 Microsoft 帐户,或者如果没有帐户,请按照下一步所述创建一个新帐户。

    屏幕截图显示了如何登录到 Azure 帐户。

  4. 选择“创建一个”以创建新的Microsoft帐户。

    注释

    Microsoft帐户不同于 Azure Cosmos DB 帐户。 我们将在以下步骤中创建 Azure Cosmos DB 帐户。

    屏幕截图显示了如何创建新的Microsoft帐户。

  5. 如果要使用现有的 Azure Cosmos DB 帐户,请选择现有的目录、订阅和 Azure Cosmos DB 帐户,然后跳到步骤 9。 若要创建新的 Azure Try Cosmos DB 帐户,请选择“ 创建新帐户”。

    屏幕截图显示如何创建新的 Azure Try Cosmos DB 帐户。

  6. 选择 API 类型(目前仅支持 NOSQL 和 MongoDB API),然后选择 “创建帐户”。

    屏幕截图显示如何选择 Azure Cosmos DB 帐户的 API 类型。

  7. 成功尝试创建 Azure Cosmos DB 帐户后,选择 “继续”。

    屏幕截图显示了如何继续集成。

  8. 在弹出窗口中选择 “接受” 以访问试用 Azure Cosmos DB 帐户。

    屏幕截图显示了如何接受访问权限。

  9. 选择“集成”,即可完成操作。

    屏幕截图显示如何确认集成。

通过 npm 和命令行将 Cosmos DB 与 Vercel 集成

  1. 使用 npm、yarn 或 pnpm 执行 create-next-app 以启动示例:

    npx create-next-app --example with-azure-cosmos with-azure-cosmos-app
    
    yarn create next-app --example with-azure-cosmos with-azure-cosmos-app
    
    pnpm create next-app --example with-azure-cosmos with-azure-cosmos-app
    
  2. 修改 pages/index.tsx 以添加你的代码。 根据需要对 pages/index.tsx 进行更改。 可以查看 lib/cosmosdb.ts 处的代码,了解 @azure/cosmos JavaScript 客户端的初始化情况。

  3. 将更改推送到 GitHub 存储库。

设置环境变量

  • COSMOSDB_CONNECTION_STRING - 需要 Cosmos DB 连接字符串。 可以在“ 密钥 ”部分的 Azure 门户中找到此凭据。

  • COSMOSDB_DATABASE_NAME - 计划使用的数据库的名称。 此值应已存在于 Azure Cosmos DB 帐户中。

  • COSMOSDB_CONTAINER_NAME - 计划使用的容器的名称。 此值应已存在于上一个数据库中。

使用市场模板将 Cosmos DB 与 Vercel 集成

我们有一个 Azure Cosmos DB Next.js Starter,它是一个出色的即用型模板,具有指导结构和配置,可以为你节省在设置初始项目设置时的时间和精力。 选择“部署到 Vercel”和“查看存储库”以查看 源代码

  1. 选择要克隆入门存储库的 GitHub 存储库。 创建存储库的屏幕截图。

  2. 选择集成以设置 Cosmos DB 连接密钥,上一部分详细介绍了这些步骤。

    屏幕截图显示了所需的权限。

  3. 设置数据库名称和容器名称的环境变量,最后选择“部署”

    屏幕截图显示与 Azure Cosmos DB 建立连接所需的变量的屏幕截图。

  4. 成功完成后,完成页面将包含已部署应用的链接,或者你可以转到 Vercel 项目的仪表板以获取应用的链接。 现在,应用已成功部署到 Vercel。

后续步骤