你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

使用 Mongoose 通过 Azure Static Web Apps 访问 Azure Cosmos DB 中的数据

  • 项目

Mongoose 是 Node.js 最热门的 ODM（对象文档映射）客户端。 Mongoose 可用于设计数据结构并强制进行验证，并提供所需的所有工具与支持 MongoDB API 的数据库进行交互。 Cosmos DB 支持必要的 MongoDB API，并可在 Azure 上用作后端服务器选项。

先决条件

1. 创建 Cosmos DB 无服务器数据库

完成以下步骤以创建 Cosmos 无服务器 DB。

  1. 登录 Azure 门户。
  2. 选择“创建资源”。
  3. 在搜索框中输入“Azure Cosmos DB”。
  4. 选择“Azure Cosmos DB”。
  5. 选择“创建”。
  6. 如果收到提示，请在“Azure Cosmos DB API for MongoDB”下，选择“创建”。
  7. 为 Azure Cosmos DB 帐户配置以下信息：
    • 订阅：选择要用的订阅
    • 资源：单击“新建”，并将名称设置为“aswa-mongoose”
    • 帐户名：需要一个唯一值
    • 位置：美国西部 2
    • 容量模式：无服务器（预览版）
    • 版本：4.0显示用于创建新 Cosmos DB 实例的表单的屏幕截图。
  8. 选择“查看 + 创建”。
  9. 选择“创建”。

创建过程需要几分钟时间。 创建静态 Web 应用后，我们将返回到数据库以收集连接字符串。

2. 创建静态 Web 应用

本教程使用 GitHub 模板存储库来帮助你创建应用程序。

  1. 转到初学者模板。

  2. 选择“所有者”（如果使用组织而不是主帐户）。

  3. 将存储库命名为 aswa-mongoose-tutorial。

  4. 选择“从模板创建存储库”。

  5. 返回到 Azure 门户。

  6. 选择“创建资源”。

  7. 在搜索框中键入“静态 Web 应用”。

  8. 选择“静态 Web 应用”。

  9. 选择“创建”。

  10. 为 Azure 静态 Web 应用配置以下信息：

    • 订阅：选择与之前相同的订阅
    • 资源组：选择 aswa-mongoose
    • 名称：aswa-mongoose-tutorial
    • 区域：美国西部 2
    • 选择“使用 GitHub 登录”
    • 如果系统提示允许 Azure Static Web Apps 创建 GitHub 操作以启用部署，则选择“授权”
    • 组织：你的 GitHub 帐户名称
    • 存储库：aswa-mongoose-tutorial
    • 分支：main
    • 生成预设：选择 React
    • 应用位置：/
    • API 位置：api
    • 输出位置：生成已完成的 Azure Static Web Apps 窗体

  11. 选择“查看并创建”。

  12. 选择“创建” 。

  13. 创建过程需要一些时间，在预配静态 Web 应用后，选择“转到资源”。

3. 配置数据库连接字符串

为了允许 Web 应用与数据库通信，数据库连接字符串以应用程序设置的形式存储。 使用 process.env 对象可在 Node.js 中访问设置值。

  1. 选择 Azure 门户左上角的“主页”（或返回 https://portal.azure.com）。
  2. 选择“资源组”。
  3. 选择“aswa-mongoose”。
  4. 选择数据库帐户的名称 - 其帐户类型将为“Azure Cosmos DB API for Mongo DB”。
  5. 在“设置”下，选择“连接字符串”。
  6. 复制“主要连接字符串”下列出的连接字符串。
  7. 在痕迹导航中，选择“aswa-mongoose”。
  8. 选择“aswa-mongoose-tutorial”，返回到网站实例。
  9. 在“设置”下，选择“配置”。
  10. 选择“添加”，并使用以下值创建新应用程序设置：
    • 名称：AZURE_COSMOS_CONNECTION_STRING
    • 值：<粘贴前面复制的连接字符串>
  11. 选择“确定”。
  12. 选择“添加”，并使用以下值为数据库名称创建新应用程序设置：
    • 名称：AZURE_COSMOS_DATABASE_NAME
    • 值：待办事项
  13. 选择“确定”。
  14. 选择“保存”。

4. 转到你的站点

现在可以浏览静态 Web 应用。

  1. 在 Azure 门户中选择“概述”。
  2. 选择右上角显示的 URL。
    1. 此 URL 类似于 https://calm-pond-05fcdb.azurestaticapps.net。
  3. 选择“请登录以查看任务列表”。
  4. 选择“授予同意”以访问应用程序。
  5. 通过在标记为“创建新列表”的文本框中输入名称并选择“保存”来创建新列表。
  6. 通过在标记为“创建新项”的文本框中键入标题并选择“保存”来创建新任务。
  7. 确认任务已显示（可能需要一些时间）。
  8. 通过“选中该检查”将任务标记为已完成；任务将移动到页面的“完成项目”部分。
  9. 刷新页面以确认正在使用数据库。

清理资源

如果你不打算继续使用此应用程序，请按以下步骤删除资源组：

  1. 返回到 Azure 门户。
  2. 选择“资源组”。
  3. 选择“aswa-mongoose”。
  4. 选择“删除资源组”。
  5. 在文本框中输入“aswa-mongoose”。
  6. 选择“删除” 。

后续步骤

继续学习下一篇文章了解如何配置本地开发…

设置本地开发