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

将 Node.js + MongoDB Web 应用部署到 Azure

Azure 应用服务使用 Linux 操作系统,提供高度可缩放的自修补 Web 托管服务。 本教程介绍如何在连接到 Azure Cosmos DB for MongoDB 数据库的 Azure 应用服务中创建安全的 Node.js 应用。 完成本教程后,Linux 上的 Azure 应用服务中将会运行一个 Express.js 应用。

图示显示了如何将 Express.js 应用部署到 Azure 应用服务以及 MongoDB 数据将托管在 Azure Cosmos DB 中。

本文假设你已熟悉 Node.js 开发,并在本地安装了 Node 和 MongoDB。 你还需要一个具有有效订阅的 Azure 帐户。 如果没有 Azure 帐户,可以免费创建一个

示例应用程序

要继续学习本教程,请从资源库中克隆或下载示例应用程序 https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

若要在本地运行应用程序,请执行以下操作:

  • 运行 npm install 安装包依赖项。
  • .env.sample 文件复制到 .env,并使用你的 MongoDB URL 填充 DATABASE_URL 值(例如 mongodb://localhost:27017/)。
  • 使用 npm start 启动应用程序。
  • 若要查看应用,请浏览到 http://localhost:3000

1. 创建应用服务和 Azure Cosmos DB

此步骤创建 Azure 资源。 本教程中使用的步骤创建一组默认安全的资源,其中包括应用服务和 Azure Cosmos DB for MongoDB。 此创建过程中,你将指定:

  • Web 应用的名称。 此名称用作 Web 应用的 DNS 名称的一部分,其格式为 https://<app-name>.azurewebsites.net
  • “区域”,在世界上以物理方式运行应用。
  • 应用的运行时堆栈。 在此处选择要用于应用的 Node 版本。
  • 应用的托管计划。 它是定价层,包括应用的一组功能和缩放容量。
  • 应用的资源组。 使用资源组可将应用程序所需的所有 Azure 资源分组到一个逻辑容器中。

登录到 Azure 门户并按照以下步骤创建 Azure 应用服务资源。

步骤 1。 在 Azure 门户中:

  1. 在 Azure 门户顶部的搜索栏中,输入“Web 应用数据库”。
  2. 选择“市场”标题下标记为“Web 应用 + 数据库”的项目。 还可以直接导航到创建向导

显示如何使用顶部工具栏中的搜索框查找“Web 应用 + 数据库”创建向导的屏幕截图。

步骤 2. 在“创建 Web 应用 + 数据库”页上,按如下所述填写表单。

  1. 资源组 → 选择“新建”,并使用名称 msdocs-expressjs-mongodb-tutorial。
  2. 区域 → 与你靠近的任何 Azure 区域。
  3. 名称 → msdocs-expressjs-mongodb-XYZ,其中 XYZ 是任意三个随机字符。 该名称在 Azure 中必须唯一。
  4. 运行时堆栈 → Node 16 LTS。
  5. 托管计划 → 基本。 准备就绪后,可以稍后纵向扩展到生产定价层。
  6. 默认选择 Azure Cosmos DB for MongoDB 作为数据库引擎。 Azure Cosmos DB 是一个云原生数据库,提供 100% 与 MongoDB 兼容的 API。 请注意为你生成的数据库名称 (<app-name>-database)。 稍后需要用到此信息。
  7. 选择“查看 + 创建”。
  8. 验证完成后,选择“创建”。

显示如何在“Web 应用 + 数据库”向导中配置新应用程序和数据库的屏幕截图。

步骤 3. 部署需要数分钟才能完成。 部署完成后,选择“转到资源”按钮。 这将直接转到应用服务应用,但会创建以下资源:

  • 资源组 → 所有已创建资源的容器。
  • 应用服务计划 → 定义应用服务的计算资源。 将创建基本层中的 Linux 计划。
  • 应用服务 → 表示应用,且在应用服务计划中运行。
  • 虚拟网络 → 与应用服务应用集成,并隔离后端网络流量。
  • 专用终结点 → 虚拟网络中数据库资源的访问终结点。
  • 网络接口 → 表示专用终结点的专用 IP 地址。
  • Azure Cosmos DB for MongoDB → 只能从专用终结点后面访问。 你的数据库和用户创建于此服务器上。
  • 专用 DNS 区域 → 在虚拟网络中启用 Azure Cosmos DB 服务器的 DNS 解析。

屏幕截图显示已完成的部署过程。

2. 设置数据库连接

创建向导已经为你生成了 MongoDB URI,但应用需要一个 DATABASE_URL 变量和一个 DATABASE_NAME 变量。 在此步骤中,你将使用应用所需的格式创建应用设置

步骤 1。 在左侧菜单的“应用服务”页面中,选择“配置”。

显示如何在“应用服务”中打开配置页面的屏幕截图。

步骤 2. 在“配置”页的“应用程序设置”选项卡中,创建 DATABASE_NAME 设置:

  1. 选择“新应用程序设置”。
  2. 在“名称”字段中,输入“DATABASE_NAME”。
  3. 在“值”字段中,输入创建向导中自动生成的数据库名称,类似于 msdocs-expressjs-mongodb-XYZ-database。
  4. 选择“确定”。

显示如何查看自动生成的连接字符串的屏幕截图。

步骤 3.

  1. 滚动到页面底部,然后选择连接字符串 MONGODB_URI。 它是由创建向导生成的。
  2. 在“值”字段中,选择“复制”按钮,然后将该值粘贴到文本文件中供下一步使用。 它采用 MongoDB 连接字符串 URI 格式
  3. 选择“取消” 。

显示如何创建应用设置的屏幕截图。

步骤 4.

  1. 使用步骤 2 中的相同步骤,创建一个名为“DATABASE_URL”的应用设置,并将值设置为从 MONGODB_URI 连接字符串复制的值(即 mongodb://...)。
  2. 在顶部的菜单栏中,选择“保存”。
  3. 出现提示时,选择“继续”

屏幕截图显示如何在配置页中保存设置。

3. 部署示例代码

在此步骤中,你将使用 GitHub Actions 配置 GitHub 部署。 这只是部署到应用服务的许多方法之一,也是一种在部署过程中持续集成的好方法。 默认情况下,GitHub 存储库的每个 git push 都会启动生成和部署操作。

步骤 1。 在新浏览器中:

  1. 登录到 GitHub 帐户。
  2. 导航到 https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app
  3. 选择“Fork”。
  4. 选择“创建分支”。

显示如何创建示例 GitHub 存储库分支的屏幕截图。

步骤 2. 在 GitHub 页中,按 . 键在浏览器中打开 Visual Studio Code。

显示如何在 GitHub 中打开 Visual Studio Code 浏览器体验的屏幕截图。

步骤 3. 在浏览器中的 Visual Studio Code 中,在资源管理器中打开 config/connection.js。 在 getConnectionInfo 函数中,查看是否使用了之前为 MongoDB 连接创建的应用设置(DATABASE_URLDATABASE_NAME)。

显示浏览器中 Visual Studio Code 和已打开文件的屏幕截图。

步骤 4. 返回“应用服务”页,在左侧菜单中,选择“部署中心”。

显示如何在“应用服务”中打开部署中心的屏幕截图。

步骤 5。 在“部署中心”页中:

  1. 在“源”中,选择“GitHub”。 默认情况下,选择 GitHub Actions 作为生成提供程序。
  2. 登录到 GitHub 帐户,并按照提示授权 Azure。
  3. 在“组织”中,选择你的帐户。
  4. 在“存储库”中,选择 msdocs-nodejs-mongodb-azure-sample-app。
  5. 在“分支”中,选择“主”。
  6. 在顶部菜单中,选择“保存”。 应用服务会将工作流文件提交到所选 GitHub 存储库中(在 .github/workflows 目录中)。

显示如何使用 GitHub Actions 配置 CI/CD 的屏幕截图。

步骤 6. 在“部署中心”页中:

  1. 选择“日志”。 部署运行已启动。
  2. 在部署运行的日志项中,选择“生成/部署日志”。

显示如何在部署中心打开部署日志的屏幕截图。

步骤 7. 你已转到 GitHub 存储库,并看到 GitHub Action 正在运行。 工作流文件定义两个单独的阶段,即生成和部署阶段。 等待 GitHub 运行以显示“完成”状态。 大约需要 15 分钟。

屏幕截图显示 GitHub 正在运行。

4. 浏览到应用

步骤 1。 在“应用服务”页中:

  1. 从左侧菜单中选择“概述”。
  2. 选择应用的 URL。 你也可以直接导航到 https://<app-name>.azurewebsites.net

显示如何从 Azure 门户中启动应用服务的屏幕截图。

步骤 2. 将一些任务添加到列表。 恭喜,你已在 Azure 应用服务中运行了一个安全的数据驱动的 Node.js 应用。

在应用服务中运行的 Express.js 应用的屏幕截图。

5. 流式传输诊断日志

Azure 应用服务捕获已记录到控制台的所有消息,以帮助你诊断应用程序的问题。 示例应用在其每个终结点中输出控制台日志消息,以演示此功能。 例如,get 终结点输出有关从数据库中检索的任务数量的消息,如果出现问题,则它会输出一条错误消息。

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

步骤 1。 在“应用服务”页中:

  1. 从左菜单中选择“应用服务日志”。
  2. 在“应用程序日志记录”下,选择“文件系统”。

显示如何在 Azure 门户的应用服务中启用本机日志的屏幕截图。

步骤 2. 在左侧菜单中,选择“日志流”。 将显示应用的日志,包括平台日志和容器内部的日志。

显示如何在 Azure 门户中查看日志流的屏幕截图。

6. 使用 Kudu 检查部署的文件

Azure 应用服务提供了一个名为 Kudu 的基于 Web 的诊断控制台,用于检查 Web 应用的服务器托管环境。 使用 Kudu 可以查看部署到 Azure 的文件、查看应用程序的部署历史记录,甚至可以打开 SSH 会话以进入托管环境。

步骤 1。 在“应用服务”页中:

  1. 从左侧菜单中,选择“高级工具”。
  2. 选择“转到”。 你也可以直接导航到 https://<app-name>.scm.azurewebsites.net

屏幕截图显示如何导航到应用服务 Kudu 页。

步骤 2. 在 Kudu 页中,选择“部署”。

Kudu SCM 应用中主页的屏幕截图,其中显示了有关托管环境的不同可用信息。

如果已使用 Git 或 zip 部署将代码部署到应用服务,则会看到 Web 应用的部署历史记录。

屏幕截图显示 JSON 格式的应用服务应用的部署历史记录。

步骤 3. 返回 Kudu 主页,然后选择“Site wwwroot”。

屏幕截图显示已选择“site wwwroot”。

可以看到已部署的文件夹结构,单击以浏览和查看文件。

wwwroot 目录中已部署的文件的屏幕截图。

7.清理资源

完成后,可以通过删除资源组从 Azure 订阅中删除所有资源。

步骤 1。 在 Azure 门户顶部的搜索栏中:

  1. 输入资源组名称。
  2. 选择前面创建的资源组。

显示如何在 Azure 门户中搜索和导航到资源组的屏幕截图。

步骤 2. 在资源组页上,选择“删除资源组”。

显示 Azure 门户中“删除资源组”按钮位置的屏幕截图。

步骤 3.

  1. 输入资源组名称以确认删除。
  2. 选择“删除”。

Azure 门户中删除资源组确认对话框的屏幕截图。

常见问题

此设置花费有多大?

创建资源的定价如下所示:

  • 应用服务计划在基本层中创建,可以进行纵向扩展或缩减。 请参阅应用服务定价
  • Azure Cosmos DB 服务器是在单个区域中创建的,可以分发到其他区域。 请参阅 Azure Cosmos DB 定价
  • 除非配置额外的功能(例如对等互连),否则虚拟网络不会产生费用。 请参阅 Azure 虚拟网络定价
  • 专用 DNS 区域会产生少量费用。 请参阅 Azure DNS 定价

如何使用其他工具连接到在虚拟网络后面受保护的 Azure Cosmos DB 服务器?

  • 要从命令行工具进行基本访问,可以从应用的 SSH 终端运行 mongosh。 应用的容器不附带 mongosh,因此必须手动安装它。 请记住,已安装的客户端不会在应用重启时持久保存。
  • 若要从 MongoDB GUI 客户端进行连接,计算机必须位于虚拟网络中。 例如,它可以是连接到其中某个子网的 Azure VM,也可以是与 Azure 虚拟网络建立站点到站点 VPN 连接的本地网络中的计算机。
  • 要从门户中的 Azure Cosmos DB 管理页从 MongoDB shell 进行连接,计算机还必须位于虚拟网络中。 可以改为为本地计算机的 IP 地址打开 Azure Cosmos DB 服务器的防火墙,但这会增加配置的攻击面。

本地应用开发如何处理 GitHub Actions?

以应用服务自动生成的工作流文件为例,每个 git push 文件都会启动新的生成和部署运行。 从 GitHub 存储库的本地克隆中,将所需的更新推送到 GitHub。 例如:

git add .
git commit -m "<some-message>"
git push origin main

为什么 GitHub Actions 部署速度这么慢?

应用服务自动生成的工作流文件定义生成后部署的双作业运行。 由于每个作业都在自己的干净环境中运行,因此工作流文件可确保 deploy 作业有权从 build 作业访问文件:

两个作业过程的大部分时间都是花费在上传和下载项目上。 如果需要,可以通过将这两个作业合并为一个作业来简化工作流文件,省去了上传和下载步骤。

后续步骤