在 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 客户端连接。

登录 Azure

将使用 Azure CLI 2.0 创建在 Azure 中托管应用所需的资源。 使用 az login 命令登录到 Azure 订阅,并按照屏幕上的说明进行操作。

az login 

Note

在 Azure 中国区使用 Azure CLI 2.0 之前,请先运行 az cloud set -n AzureChinaCloud 来改变云环境。如果想切回国际版 Azure,请再次运行 az cloud set -n AzureCloud

创建资源组

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

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

以下示例在中国北部区域中创建一个资源组。

az group create --name myResourceGroup --location "China North"

使用 az appservice list-locations Azure CLI 命令来列出可用位置。

创建 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/production.js

db 对象中,更新 uri 的值:

  • 用 Cosmos DB 数据库名替换两个 <cosmosdb_name> 占位符。
  • 用上一步复制的键替换 <primary_master_key> 占位符。

以下代码展示 db 对象:

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/production.js 中配置的连接字符串。

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 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/00000000-0000-0000-0000-000000000000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan", 
  "kind": "app",
  "location": "China North",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  ...
  < Output has been truncated for readability >
} 

创建 Web 应用

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

该 Web 应用提供托管空间用于部署代码,并提供一个 URL 用于查看已部署的应用程序。 用于创建 Web 应用。

在以下命令中, 将 <app_name> 占位符替换为唯一的应用名称。 此名称用作 Web 应用默认 URL 的一部分,所以此名称应在 Azure App Service 的所有应用中具有唯一性。

az webapp create --name <app_name> --resource-group myResourceGroup --plan myAppServicePlan

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

{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.chinacloudsites.cn",
  "enabled": true,
  ...
  < Output has been truncated for readability >
}

配置环境变量

在本教程的前面部分,已在 config/env/production.js 中硬编码了数据库连接字符串。 为遵循最佳安全实践,建议将这些敏感数据保留在 Git 存储库之外。 对于在 Azure 中运行的应用,需改用环境变量。

在应用服务中,使用 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 访问此应用设置,如同访问任何环境变量那样。

现在,使用以下命令撤消对 config/env/production.js 的更改:

git checkout -- .

再次打开 config/env/production.js。 请注意,默认 MEAN.js 应用已配置为使用所创建的 MONGODB_URI 环境变量。

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

配置本地 Git 部署

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

可以通过不同的方法将应用程序部署到 Azure 应用服务,包括 FTP、本地 Git、GitHub、Visual Studio Team Services 和 BitBucket。 对于 FTP 和本地 Git 部署,需在服务器上配置一个部署用户,用于对部署进行身份验证。 此部署用户是帐户级别并且不同于 Azure 订阅帐户。 只需配置此部署用户一次。

在以下命令中,将 <user-name> 和 <password> 替换为新的用户名和密码。 用户名必须唯一。 密码长度必须至少为 8 个字符,其中包含以下 3 种元素中的两种:字母、数字、符号。 如果收到 'Conflict'. Details: 409 错误,请更改用户名。 如果收到 'Bad Request'. Details: 400 错误,请使用更强的密码。

az appservice web deployment user set --user-name <username> --password <password>

记录用户名和密码以便在以后部署应用时使用。

使用 az webapp deployment source config-local-git 命令以配置对 Azure Web 应用的本地 Git 访问。

az webapp deployment source config-local-git --name <app_name> --resource-group myResourceGroup

配置部署用户后,Azure CLI 将使用以下格式显示 Azure Web 应用的部署 URL:

https://<username>@<app_name>.scm.chinacloudsites.cn:443/<app_name>.git 

复制终端的输出,因为下一步骤将要用到。

从 Git 推送到 Azure

将 Azure 远程功能添加到本地 Git 存储库。

git remote add azure <paste_copied_url_here> 

推送到 Azure remote 以部署 Node.js 应用程序。 系统将提示你输入前面在创建部署用户期间提供的密码。

git push azure master

在部署期间,Azure 应用服务会向 Git 告知其进度。

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>

在本地测试更改

保存所有更改。

再次在生产模式下测试更改。

gulp prod
NODE_ENV=production node server.js

Note

请记住 config/env/production.js 已还原,且仅在 Azure Web 应用中设置了 MONGODB_URI 环境变量,而未在本地计算机中设置。 看一看配置文件,将发现生产配置默认使用本地 MongoDB 数据库。 这可确保在本地测试代码更改时,不会接触生产数据。

在浏览器中导航至 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 名称。