在 Azure 中构建 Node.js 和 MongoDB Web 应用

Azure Web 应用提供高度可缩放、自修补的 Web 托管服务。 本教程演示如何在 Azure 中创建 Node.js Web 应用,并将其连接至 MongoDB 数据库。 完成本教程后,将获得一个在 Azure App Service 中运行的 MEAN(MongoDB、Express、AngularJS 和 Node.js)应用程序)。 为简单起见,示例应用程序使用了 MEAN.js web 框架

在 Azure 应用服务中运行的 MEAN.js 应用

学习内容:

  • 在 Azure 中创建 MongoDB 数据库
  • 将 Node.js 应用连接到 MongoDB
  • 将应用部署到 Azure
  • 更新数据模型并重新部署应用
  • 从 Azure 流式传输诊断日志
  • 在 Azure 门户中管理应用

先决条件

完成本教程:

  1. 安装 Git
  2. 安装 Node.js 和 NPM
  3. 安装 Gulp.js (MEAN.js 要求的)
  4. 安装并运行 MongoDB 社区版

Note

如果没有 Azure 订阅,可在开始前创建一个试用帐户

如果选择在本地安装并使用 CLI,本主题要求运行 Azure CLI 2.0 版或更高版本。 运行 az --version 即可查找版本。 如果需要进行安装或升级,请参阅安装 Azure CLI 2.0

测试本地 MongoDB

打开终端窗口并cd打开到bin MongoDB 安装的目录。 可使用此终端窗口运行本教程中的所有命令。

在终端运行 mongo 以连接到本地 MongoDB 服务器。

mongo

如果连接成功,那么 MongoDB 数据库已经开始运行。 如果连接不成功,那么请确保本地 MongoDB 数据库按安装 MongoDB 社区版中的步骤来启动。 通常,MongoDB 已安装,但是仍需要运行 mongod 来启动它。

完成 MongoDB 数据库测试后,请在终端键入 Ctrl+C

创建本地 Node.js 应用

在此步骤中,将设置本地 Node.js 项目。

克隆示例应用程序

在终端窗口中,通过 cd 转到工作目录。

运行下列命令,克隆示例存储库。

git clone https://github.com/Azure-Samples/meanjs.git

此示例存储库包含 MEAN.js 存储库的副本。 它修改为在应用服务上运行(有关详细信息,请参阅 MEAN.js 存储库 README 文件)。

运行应用程序

运行以下命令以安装所需安装包并启动应用程序。

cd meanjs
npm install
npm start

当应用完全加载后,会看见类似下方所示的消息:

--
MEAN.JS - Development Environment

Environment:     development
Server:          http://0.0.0.0:3000
Database:        mongodb://localhost/mean-dev
App version:     0.5.0
MEAN.JS version: 0.5.0
--

在浏览器中导航到 http://localhost:3000。 在顶部菜单点击“注册”并创建一个测试用户。

MEAN.js 示例应用程序将用户数据存储在数据库中。 如果成功创建用户并登陆,那么应用会将数据写入本地 MongoDB 数据库。

MEAN.js 成功连接到 MongoDB

选择“管理员”>“管理文章”以添加一些文章。

若要随时停止 Node.js,请在终端中按 Ctrl+C

创建生产 MongoDB

此步骤在 Azure 中创建一个 MongoDB 数据库。 将应用部署到 Azure 后,它会使用此云数据库。

对于 MongoDB,本教程使用了 Azure Cosmos DB。 Cosmos DB 支持 MongoDB 客户端连接。

创建资源组

使用 az group create 命令创建资源组。

资源组是在其中部署和管理 Azure 资源(例如 Web 应用、数据库和存储帐户)的逻辑容器。

以下示例在“chinanorth”位置创建名为“myResourceGroup”的资源组。 若要查看应用服务支持的所有位置,请运行 az appservice list-locations 命令。

az group create --name myResourceGroup --location chinanorth

通常在附近的区域中创建资源组和资源。

创建 Cosmos DB 帐户

使用 az cosmosdb create 命令创建 Cosmos DB 帐户。

在下面命令中,将 <cosmosdb_name> 占位符替换为一个唯一的 Cosmos DB 名称。 此名称将用作 Cosmos DB 终结点 https://<cosmosdb_name>.documents.azure.cn/ 的一部分,因此这个名称需要在 Azure 中的所有 Cosmos DB 帐户中具有唯一性。 此名称只能包含小写字母、数字以及连字符 (-),同时长度必须为 3 到 50 个字符。

az cosmosdb create \
    --name <cosmosdb_name> \
    --resource-group myResourceGroup \
    --kind MongoDB

--Kind MongoDB 参数启用 MongoDB 客户端连接。

创建 Cosmos DB 帐户后,Azure CLI 将显示类似于以下示例的信息:

{
  "consistencyPolicy":
  {
    "defaultConsistencyLevel": "Session",
    "maxIntervalInSeconds": 5,
    "maxStalenessPrefix": 100
  },
  "databaseAccountOfferType": "Standard",
  "documentEndpoint": "https://<cosmosdb_name>.documents.azure.cn:443/",
  "failoverPolicies": 
  ...
  < Output truncated for readability >
}

将应用连接到生产 MongoDB

在此步骤中,使用 MongoDB 连接字符串将 MEAN.js 示例应用程序连接至刚创建的 Cosmos DB 数据库。

检索数据库密钥

若要连接到 Cosmos DB 数据库,需要数据库键。 使用 az cosmosdb list-keys 命令检索主键。

az cosmosdb list-keys --name <cosmosdb_name> --resource-group myResourceGroup

Azure CLI 显示类似于以下示例的信息:

{
  "primaryMasterKey": "RS4CmUwzGRASJPMoc0kiEvdnKmxyRILC9BWisAYh3Hq4zBYKr0XQiSE4pqx3UchBeO4QRCzUt1i7w0rOkitoJw==",
  "primaryReadonlyMasterKey": "HvitsjIYz8TwRmIuPEUAALRwqgKOzJUjW22wPL2U8zoMVhGvregBkBk9LdMTxqBgDETSq7obbwZtdeFY7hElTg==",
  "secondaryMasterKey": "Lu9aeZTiXU4PjuuyGBbvS1N9IRG3oegIrIh95U6VOstf9bJiiIpw3IfwSUgQWSEYM3VeEyrhHJ4rn3Ci0vuFqA==",
  "secondaryReadonlyMasterKey": "LpsCicpVZqHRy7qbMgrzbRKjbYCwCKPQRl0QpgReAOxMcggTvxJFA94fTi0oQ7xtxpftTJcXkjTirQ0pT7QFrQ=="
}

复制 primaryMasterKey 的值。 下一步骤需要用到此信息。

在 Node.js 应用程序中配置连接字符串

在本地 MEAN.js 存储库的 config/env/ 文件夹中,创建名为 local-production.js 的文件。 默认情况下,通过配置 .gitignore 确保此文件位于存储库之外。

将以下代码复制到该文件中。 请确保将两个 <cosmosdb_name> 占位符替换为 Cosmos DB 数据库名称,将 <primary_master_key> 占位符替换为在先前步骤中复制的键。

module.exports = {
  db: {
    uri: 'mongodb://<cosmosdb_name>:<primary_master_key>@<cosmosdb_name>.documents.azure.cn:10250/mean?ssl=true&sslverifycertificate=false'
  }
};

需要 ssl=true 选项,因为 Cosmos DB 需要 SSL

保存所做更改。

在生产模式下测试应用程序

运行以下命令缩减和捆绑用于生产环境的脚本。 这一进程将生成生产环境所需的文件。

gulp prod

运行下列命令,以使用在 config/env/local-production.js 中配置的连接字符串。

# Bash
NODE_ENV=production node server.js

# Windows PowerShell
$env:NODE_ENV = "production" 
node server.js

NODE_ENV=production 设置环境变量,用于指示 Node.js 在生产环境中运行。 node server.js 使用存储库根路径中的 server.js 启动 Node.js 服务器。 这就是 Node.js 应用程序在 Azure 中加载的方式。

在加载应用时请进行检查,确保它在生产环境中运行:

--
MEAN.JS

Environment:     production
Server:          http://0.0.0.0:8443
Database:        mongodb://<cosmosdb_name>:<primary_master_key>@<cosmosdb_name>.documents.azure.cn:10250/mean?ssl=true&sslverifycertificate=false
App version:     0.5.0
MEAN.JS version: 0.5.0

在浏览器中导航到 http://localhost:8443。 在顶部菜单点击“注册”并创建一个测试用户。 如果成功创建用户并登陆,那么应用会将数据写入 Azure 中的 Cosmos DB 数据库。

在终端中,通过键入 Ctrl+C 停止 Node.js。

将应用部署到 Azure

在此步骤中,要将 MongoDB 连接的 Node.js 应用程序部署到 Azure 应用服务。

配置部署用户

使用 az webapp deployment user set 命令创建部署凭据。

在 Web 应用中进行 FTP 和本地 Git 部署时需要一个部署用户。 用户名和密码都为帐户级别。 它们与 Azure 订阅凭据不同。

在以下命令中,将 <user-name> 和 <password> 替换为新的用户名和密码。 用户名必须唯一。 密码长度必须至少为 8 个字符,其中包含以下 3 种元素中的两种:字母、数字、符号。

az webapp deployment user set --user-name <username> --password <password>

如果收到 'Conflict'. Details: 409 错误,请更改用户名。 如果收到 'Bad Request'. Details: 400 错误,请使用更强的密码。

只创建此部署用户一次;可对所有 Azure 部署使用此用户。

Note

记录用户名和密码。 稍后需要使用它们来部署 Web 应用。

创建应用服务计划

使用 az appservice plan create 命令创建应用服务计划。

Note

应用服务计划表示用于托管应用的物理资源集合。 分配到应用服务计划的所有应用程序将共享该计划定义的资源。 托管多个应用时,此共享可让你节省资金。

应用服务计划定义:

  • 区域(中国东部和中国北部)。
  • 实例大小(小、中、大)
  • 规模计数(默认情况为 1 到 20 个实例)
  • SKU(免费、共享、基本、标准、高级)

以下示例在免费定价层中创建名为 myAppServicePlan 的应用服务计划:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

创建应用服务计划后,Azure CLI 将显示类似于以下示例的信息:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "China North",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "China North",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

创建 Web 应用

使用 az webapp create 命令在 myAppServicePlan 应用服务计划中创建一个 Web 应用。

在以下示例中,将 <app_name> 替换为全局唯一的应用名称(有效字符是 a-z0-9-)。 运行时设置为 NODE|6.9。 若要查看所有受支持的运行时,请运行 az webapp list-runtimes

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app_name> --runtime "NODE|6.9" --deployment-local-git

创建 Web 应用后,Azure CLI 会显示类似于以下示例的输出:

Local git is configured with url of 'https://<username>@<app_name>.scm.chinacloudsites.cn/<app_name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.chinacloudsites.cn",
  "deploymentLocalGitUrl": "https://<username>@<app_name>.scm.chinacloudsites.cn/<app_name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

已创建了一个空的 Web 应用并启用了 Git 部署。

Note

Git 远程的 URL 将显示在 deploymentLocalGitUrl 属性中,其格式为 https://<username>@<app_name>.scm.chinacloudsites.cn/<app_name>.git。 保存此 URL,因为稍后将需要它。

配置环境变量

默认情况下,MEAN.js 项目会在 Git 存储库外部保留 config/env/local-production.js。 因此对于 Azure Web 应用,请使用应用设置来定义 MongoDB 连接字符串。

若要设置应用设置,请使用 az webapp config appsettings update

以下示例在 Azure Web 应用中配置 MONGODB_URI 应用设置。 替换 <app_name>、<cosmosdb_name> 和 <primary_master_key> 占位符。

az webapp config appsettings update \
    --name <app_name> \
    --resource-group myResourceGroup \
    --settings MONGODB_URI="mongodb://<cosmosdb_name>:<primary_master_key>@<cosmosdb_name>.documents.azure.cn:10250/mean?ssl=true"

在 Node.js 代码中,使用 process.env.MONGODB_URI 访问此应用设置,如同访问任何环境变量那样。

在本地 MEAN.js 存储库中,打开具有特定于生产环境的配置的 config/env/production.js(而不是 config/env/local-production.js)。 默认 MEAN.js 应用已配置为使用你所创建的 MONGODB_URI 环境变量。

db: {
  uri: ... || process.env.MONGODB_URI || ...,
  ...
},

从 Git 推送到 Azure

在本地终端窗口中,将 Azure 远程功能添加到本地 Git 存储库。

git remote add azure <deploymentLocalGitUrl-from-create-step>

使用以下命令推送到 Azure 远程功能以部署应用。 提示输入密码时,请确保输入在配置部署用户中创建的密码,而不是用于登录到 Azure 门户的密码。

git push azure master

此命令可能需要花费几分钟时间运行。 运行时,该命令会显示类似于以下示例的信息:

Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 489 bytes | 0 bytes/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '6c7c716eee'.
remote: Running custom deployment command...
remote: Running deployment command...
remote: Handling node.js deployment.
.
.
.
remote: Deployment successful.
To https://<app_name>.scm.chinacloudsites.cn/<app_name>.git
 * [new branch]      master -> master

可能已注意到,部署过程先运行 npm install,再运行 Gulp。 应用服务在部署期间不会运行 Gulp 或 Grunt 任务,因此该示例存储库的根目录中有两个额外文件用于启用它:

  • .deployment - 此文件告知应用服务将 bash deploy.sh 作为自定义部署脚本运行。
  • deploy.sh - 自定义部署脚本。 查看该文件可以发现,它先运行 npm installbower install,再运行 gulp prod

可以通过此方法向基于 Git 的部署添加任意步骤。 无论何时重新启动 Azure Web 应用,应用服务都不会重新运行这些自动化任务。

浏览到 Azure Web 应用

使用 Web 浏览器浏览到已部署的 Web 应用。

http://<app_name>.chinacloudsites.cn 

在顶部菜单中单击“注册”,然后创建一个虚构的用户。

如果操作成功,且应用自动登录到已创建的用户,则 Azure 中的 MEAN.js 应用已连接至 MongoDB (Cosmos DB) 数据库。

在 Azure 应用服务中运行的 MEAN.js 应用

选择“管理员”>“管理文章”以添加一些文章。

祝贺你! 现已在 Azure 应用服务中运行数据驱动的 Node.js 应用。

更新数据模型和重新部署

在此步骤中,将更改 article 数据模型,并将其发布至 Azure。

更新数据模型

打开 modules/articles/server/models/article.server.model.js

ArticleSchema 中,添加名为 commentString 类型。 完成后,架构代码应该如下所示:

var ArticleSchema = new Schema({
  ...,
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  },
  comment: {
    type: String,
    default: '',
    trim: true
  }
});

更新文章代码

更新剩余 articles 代码以使用 comment

需修改的文件有五个,分别是服务器控制器以及四个客户端视图。

打开 modules/articles/server/controllers/articles.server.controller.js

update 函数中,为 article.comment 赋值。 下面的代码显示了完整的 update 功能:

exports.update = function (req, res) {
  var article = req.article;

  article.title = req.body.title;
  article.content = req.body.content;
  article.comment = req.body.comment;

  ...
};

打开 modules/articles/client/views/view-article.client.view.html

</section> 结尾标记正上方,添加下列行以显示 comment 和其余文章数据:

<p class="lead" ng-bind="vm.article.comment"></p>

打开 modules/articles/client/views/list-articles.client.view.html

</a> 结尾标记正上方,添加下列行以显示 comment 和其余文章数据:

<p class="list-group-item-text" ng-bind="article.comment"></p>

打开 modules/articles/client/views/admin/list-articles.client.view.html

<div class="list-group"> 元素内,以及 </a> 结尾标记正上方,添加下列行以显示 comment 和其余文章数据:

<p class="list-group-item-text" data-ng-bind="article.comment"></p>

打开 modules/articles/client/views/admin/form-article.client.view.html

查找包含提交按钮的 <div class="form-group"> 元素,如下所示:

<div class="form-group">
  <button type="submit" class="btn btn-default">{{vm.article._id ? 'Update' : 'Create'}}</button>
</div>

在此标记的正上方,添加另一个 <div class="form-group"> 元素,它允许人们编辑 comment 字段。 新元素应如下所示:

<div class="form-group">
  <label class="control-label" for="comment">Comment</label>
  <textarea name="comment" data-ng-model="vm.article.comment" id="comment" class="form-control" cols="30" rows="10" placeholder="Comment"></textarea>
</div>

在本地测试更改

保存所有更改。

在本地终端窗口中,在生产模式下再次测试所做的更改。

# Bash
gulp prod
NODE_ENV=production node server.js

# Windows PowerShell
gulp prod
$env:NODE_ENV = "production" 
node server.js

在浏览器中导航至 http://localhost:8443,并确保已登录。

选择“管理员”>“管理文章” ,然后选择“+” 按钮以添加文章。

现在可看到新 Comment 文本框。

已向文章添加注释字段

在终端中,通过键入 Ctrl+C 停止 Node.js。

发布对 Azure 所做的更改

在本地终端窗口中,提交在 Git 中所做的更改,然后将代码更改推送到 Azure。

git commit -am "added article comment"
git push azure master

一旦 git push 完成,请导航至 Azure Web 应用,然后尝试新功能。

发布到 Azure 的模型和数据库更改

如果先前添加过任何文章,现在仍能看到它们。 Cosmos DB 中的现有数据没有丢失。 同时,对数据架构的更新和现有数据都将保持不变。

流式传输诊断日志

当 Node.js 应用程序在 Azure 应用服务中运行时,可以将控制台日志传输到终端。 这样可以获得相同的诊断消息,以帮助调试应用程序错误。

若要启动日志流式处理,请使用 az webapp log tail 命令。

az webapp log tail --name <app_name> --resource-group myResourceGroup

启动日志流式处理后,请立即在浏览器中刷新 Azure Web 应用,以获取一些 Web 通信流。 现在能看到控制台日志传送到终端。

通过键入 Ctrl+C,随时停止日志流式处理。

管理 Azure Web 应用

转到 Azure 门户查看已创建的 Web 应用。

从左侧菜单中单击“应用服务”,然后单击 Azure Web 应用的名称。

在门户中导航到 Azure Web 应用

默认情况下,门户将显示 Web 应用的“概述”页。 在此页中可以查看应用的运行状况。 在此处还可以执行基本的管理任务,例如浏览、停止、启动、重新启动和删除。 页面左侧的选项卡显示可以打开的不同配置页。

Azure 门户中的“应用服务”页

清理资源

若要删除通过此快速入门创建的所有资源,请运行以下命令:

az group delete --name myResourceGroup

后续步骤

现已了解:

  • 在 Azure 中创建 MongoDB 数据库
  • 将 Node.js 应用连接到 MongoDB
  • 将应用部署到 Azure
  • 更新数据模型并重新部署应用
  • 将日志从 Azure 流式传输到终端
  • 在 Azure 门户中管理应用

转到下一教程,了解如何向 Web 应用映射自定义 DNS 名称。