在 Azure 中创建 Node.js Web 应用Create a Node.js web app in Azure

Azure 应用服务提供高度可缩放、自修补的 Web 托管服务。Azure App Service provides a highly scalable, self-patching web hosting service. 本快速入门演示如何将 Node.js 应用部署到 Azure 应用服务中。This quickstart shows how to deploy a Node.js app to Azure App Service. 使用 Azure CLI 创建 Web 应用,并使用 ZipDeploy 将 Node.js 代码示例部署到 Web 应用。You create the web app using the Azure CLI, and you use ZipDeploy to deploy the sample Node.js code to the web app.

在 Azure 中运行的示例应用

可以在 Mac、Windows 或 Linux 计算机上执行此处的步骤。You can follow the steps here using a Mac, Windows, or Linux machine. 安装先决条件后,大约需要五分钟完成这些步骤。Once the prerequisites are installed, it takes about five minutes to complete the steps.

如果没有 Azure 订阅,可在开始前创建一个试用帐户If you don't have an Azure subscription, create a trial account before you begin.

先决条件Prerequisites

若要完成本快速入门教程,需先执行以下操作:To complete this quickstart:

下载示例Download the sample

https://github.com/Azure-Samples/nodejs-docs-hello-world/archive/master.zip 下载示例 Node.js 项目并提取 ZIP 存档。Download the sample Node.js project from https://github.com/Azure-Samples/nodejs-docs-hello-world/archive/master.zip and extract the ZIP archive.

打开 index.js 并找到以下行:Open index.js and find the following line:

const port = process.env.PORT || 1337;

应用服务会将 process.env.PORT 注入应用程序,因此代码将使用该变量来获知要侦听的端口。App Service injects process.env.PORT into your application, so the code uses the variable to know which port to listen.

在一个终端窗口中,导航到示例 Node.js 项目的根目录(包含 index.js 的目录)。In a terminal window, navigate to the root directory of the sample Node.js project (the directory that contains index.js).

在本地运行应用Run the app locally

在本地运行应用程序,以便你能了解将它部署到 Azure 时它的外观应该是什么样的。Run the application locally so that you see how it should look when you deploy it to Azure. 打开一个终端窗口并使用 npm start 脚本启动内置的 Node.js HTTP 服务器。Open a terminal window and use the npm start script to launch the built in Node.js HTTP server.

npm start

打开 Web 浏览器并导航到 http://localhost:1337 处的示例应用。Open a web browser, and navigate to the sample app at http://localhost:1337.

页面中会显示该示例应用发出的 Hello World 消息。You see the Hello World message from the sample app displayed in the page.

在本地运行的示例应用

在终端窗口中,按 Ctrl+C 退出 Web 服务器。In your terminal window, press Ctrl+C to exit the web server.

Note

在 Azure 应用服务中,此应用在 IIS 中使用 iisnode 运行。In Azure App Service, the app is run in IIS using iisnode. 为了让应用能够使用 iisnode 运行,根应用目录包含一个 web.config 文件。To enable the app to run with iisnode, the root app directory contains a web.config file. 此文件可以由 IIS 读取,与 iisnode 相关的设置记录在 iisnode GitHub 存储库中。The file is readable by IIS, and the iisnode-related settings are documented in the iisnode GitHub repository.

创建一个项目 zip 文件Create a project ZIP file

在一个终端窗口中,导航到示例 Node.js 项目的根目录(包含 index.js 的目录)。Make sure you're still in the root directory of the sample project (the directory that contains index.js). 创建一个包含项目所有内容的 zip 文件。Create a ZIP archive of everything in your project. 以下命令使用您终端中的默认工具执行操作:The following command uses the default tool in your terminal:

# Bash
zip -r myAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myAppFiles.zip

命令执行完后将此 ZIP 文件上传到 Azure 并将其部署到应用服务。Later, you upload this ZIP file to Azure and deploy it to App Service.

创建资源组Create a resource group

资源组是在其中部署和管理 Azure 资源(例如 Web 应用、数据库和存储帐户)的逻辑容器。A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed.

在 Azure CLI 中,使用 az group create 命令创建资源组。In the Azure CLI, create a resource group with the az group create command. 以下示例在“中国北部” 位置创建名为“myResourceGroup” 的资源组。The following example creates a resource group named myResourceGroup in the China North location. 要查看“免费”层中应用服务支持的所有位置,请运行 az appservice list-locations --sku FREE 命令。 To see all supported locations for App Service in Free tier, run the az appservice list-locations --sku FREE command.

az group create --name myResourceGroup --location "china north"

通常在附近的区域中创建资源组和资源。You generally create your resource group and the resources in a region near you.

此命令完成后,JSON 输出会显示资源组属性。When the command finishes, a JSON output shows you the resource group properties.

创建 Azure 应用服务计划Create an Azure App Service plan

在 Azure CLI 中,使用 az appservice plan create 命令创建一个应用服务计划。In the Azure CLI, create an App Service plan with the az appservice plan create command.

以下示例在免费 定价层中创建名为 myAppServicePlan 的应用服务计划:The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

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

创建应用服务计划后,Azure CLI 将显示类似于以下示例的信息:When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "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 应用Create a web app

在 Azure CLI 中,使用 az webapp create 命令在 myAppServicePlan 应用服务计划中创建一个 Web 应用。In the Azure CLI, create a web app in the myAppServicePlan App Service plan with the az webapp create command.

在以下示例中,将 <app_name> 替换为全局唯一的应用名称(有效字符是 a-z0-9-)。In the following example, replace <app_name> with a globally unique app name (valid characters are a-z, 0-9, and -).

# Bash and Powershell
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app_name>

创建 Web 应用后,Azure CLI 会显示类似于以下示例的输出:When the web app has been created, the Azure CLI shows output similar to the following example:

{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.chinacloudsites.cn",
  "enabled": true,
  < JSON data removed for brevity. >
}

设置 Node.js 运行时Set Node.js runtime

将 Node 运行时设置为 10.14.1。Set the Node runtime to 10.14.1. 若要查看所有受支持的运行时,请运行 az webapp list-runtimesTo see all supported runtimes, run az webapp list-runtimes.

# Bash and Powershell
az webapp config appsettings set --resource-group myResourceGroup --name <app_name> --settings WEBSITE_NODE_DEFAULT_VERSION=10.14.1

浏览到新建的 Web 应用。Browse to your newly created web app. <app_name> 替换为唯一应用名称。Replace <app_name> with a unique app name.

http://<app name>.chinacloudsites.cn

新 Web 应用应该如下所示:Here is what your new web app should look like:

空 Web 应用页面

部署 ZIP 文件Deploy ZIP file

在浏览器中,导航到 https://<app_name>.scm.chinacloudsites.cn/ZipDeployUIIn the browser, navigate to https://<app_name>.scm.chinacloudsites.cn/ZipDeployUI.

上传在创建一个项目 ZIP 文件中创建的 ZIP 文件,只需将其拖至网页的文件资源管理器区域即可。Upload the ZIP file you created in Create a project ZIP file by dragging it to the file explorer area on the web page.

部署正在进行的时候,右上角的图标会以百分比形式显示进度。When deployment is in progress, an icon in the top right corner shows you the progress in percentage. 该页还在资源管理器区域下方显示操作的详细消息。The page also shows verbose messages for the operation below the explorer area. 完成后,最后一个部署消息会显示:Deployment successfulWhen it is finished, the last deployment message should say Deployment successful.

浏览到应用Browse to the app

使用 Web 浏览器浏览到已部署的应用程序。Browse to the deployed application using your web browser.

http://<app_name>.chinacloudsites.cn

Node.js 示例代码正在 Azure 应用服务 Web 应用中运行。The Node.js sample code is running in an Azure App Service web app.

在 Azure 中运行的示例应用

祝贺你!Congratulations! 现已将第一个 Node.js 应用部署到应用服务。You've deployed your first Node.js app to App Service.

更新并重新部署代码Update and redeploy the code

使用文本编辑器在 Node.js 应用中打开 index.js 文件,然后对 response.end 调用中的文本稍微进行更改:Using a text editor, open the index.js file in the Node.js app, and make a small change to the text in the call to response.end:

response.end("Hello Azure!");

在本地终端窗口中,导航到你的应用程序的根目录(包含 index.js 的目录),为更新后的项目创建新的 ZIP 文件。In the local terminal window, navigate to your application's root directory (the directory that contains index.js), create a new ZIP file for your updated project.

# Bash
zip -r myUpdatedAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myUpdatedAppFiles.zip

将此新的 ZIP 文件部署到应用服务,使用的步骤与部署 ZIP 文件中的步骤相同。Deploy this new ZIP file to App Service, using the same steps in Deploy ZIP file.

切换回在“浏览到应用” 步骤中打开的浏览器窗口,然后刷新页面。Switch back to the browser window that opened in the Browse to the app step, and refresh the page.

已更新的在 Azure 中运行的示例应用

管理新的 Azure 应用Manage your new Azure app

转到 Azure 门户管理创建的 Web 应用。Go to the Azure portal to manage the web app you created.

在左侧菜单中单击“应用程序服务” ,然后单击 Azure 应用的名称。From the left menu, click App Services, and then click the name of your Azure app.

在门户中导航到 Azure 应用

随后会显示 Web 应用的概述页。You see your web app's Overview page. 在此处可以执行基本的管理任务,例如浏览、停止、启动、重启和删除。Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

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

左侧菜单提供用于配置应用的不同页面。The left menu provides different pages for configuring your app.

清理资源Clean up resources

若要清理资源,请运行以下命令:To clean up your resources, run the following command:

az group delete --name myResourceGroup

后续步骤Next steps