在 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.

先决条件Prerequisites

如果没有 Azure 帐户,请立即注册一个包含 1,500 Azure 额度的试用帐户,以试用任何服务组合。If you don't have an Azure account, sign up today for a trial account with 1,500 in Azure credits to try out any combination of services.

需要连同 Node.js 和 npm(Node.js 包管理器)一起安装 Visual Studio CodeYou need Visual Studio Code installed along with Node.js and npm, the Node.js package manager.

还需要安装 Azure 应用服务扩展,使用该扩展可在 Azure 平台即服务 (PaaS) 上创建、管理和部署 Web 应用。You will also need to install the Azure App Service extension, which you can use to create, manage, and deploy Web Apps on the Azure Platform as a Service (PaaS).

登录Sign in

安装该扩展后,登录到你的 Azure 帐户。Once the extension is installed, log into your Azure account. 选择“视图” > “命令面板...” 在顶部菜单中或使用热键 Ctrl+Shift+P,键入 >Azure: Sign In to Azure Cloud,然后选择 Azure China 登录到 Azure 帐户。Select View > Command Palette... In top menu or use hotkey Ctrl+Shift+P, typed >Azure: Sign In to Azure Cloud, then select Azure China to log into your Azure account.

故障排除Troubleshooting

如果出现错误“找不到名为 [订阅 ID] 的订阅”,原因可能是你使用了代理,因此无法访问 Azure API。 If you see the error "Cannot find subscription with name [subscription ID]", it might be because you're behind a proxy and unable to reach the Azure API. 在终端中使用 export 以代理信息配置 HTTP_PROXYHTTPS_PROXY 环境变量。Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

如果设置环境变量不能解决该问题,请选择下面的“我遇到了问题”按钮联系我们。 If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button below.

先决条件检查Prerequisite check

在继续之前,请确保已安装并配置了所有必备组件。Before you continue, ensure that you have all the prerequisites installed and configured.

在 VS Code 的状态栏中应会显示你的 Azure 电子邮件地址,“AZURE 应用服务”资源管理器中应会显示你的订阅。 In VS Code, you should see your Azure email address in the Status Bar and your subscription in the AZURE APP SERVICE explorer.

创建 Node.js 应用程序Create your Node.js application

接下来,创建可部署到云的 Node.js 应用程序。Next, create a Node.js application that can be deployed to the Cloud. 本快速入门使用一个应用程序生成器从终端快速搭建应用程序。This quickstart uses an application generator to quickly scaffold out the application from a terminal.

Tip

如果已完成 Node.js 教程,可直接跳转到部署到 AzureIf you have already completed the Node.js tutorial, you can skip ahead to Deploy to Azure.

使用快速生成器搭建新应用程序Scaffold a new application with the Express Generator

Express 是用于生成和运行 Node.js 应用程序的流行框架。Express is a popular framework for building and running Node.js applications. 可以使用 Express 生成器工具搭建(创建)新的 Express 应用程序。You can scaffold (create) a new Express application using the Express Generator tool. 快速生成器作为 npm 模块提供,可以使用 npm 命令行工具 npx 直接运行(无需安装)。The Express Generator is shipped as an npm module and can be run directly (without installation) by using the npm command-line tool npx.

npx express-generator myExpressApp --view pug --git

--view pug --git 参数告知生成器使用 pug 模板引擎(以前称为 jade)并创建 .gitignore 文件。The --view pug --git parameters tell the generator to use the pug template engine (formerly known as jade) and to create a .gitignore file.

若要安装应用程序的所有依赖项,请转到新文件夹并运行 npm installTo install all of the application's dependencies, go to the new folder and run npm install.

cd myExpressApp
npm install

运行应用程序Run the application

接下来,确保运行应用程序。Next, ensure that the application runs. 在终端中,使用 npm start 命令启动该应用程序以启动服务器。From the terminal, start the application using the npm start command to start the server.

npm start

现在,打开浏览器并导航到 http://localhost:3000,其中应会显示如下所示的内容:Now, open your browser and navigate to http://localhost:3000, where you should see something like this:

运行 Express 应用程序

“部署到 Azure”Deploy to Azure

在本部分中,将使用 VS Code 和 Azure 应用服务扩展部署 Node.js 应用。In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. 本快速入门使用最基本的部署模型,其中应用将压缩并部署到 Azure Web 应用。This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App.

使用 Azure 应用服务进行部署Deploy using Azure App Service

首先,在 VS Code 中打开应用程序文件夹。First, open your application folder in VS Code.

code .

在“AZURE 应用服务”资源管理器中,选择蓝色的向上箭头图标,将应用部署到 Azure。 In the AZURE APP SERVICE explorer, select the blue up arrow icon to deploy your app to Azure.

部署到 Web 应用

Tip

也可以从命令面板 (CTRL + SHIFT + P) 进行部署,方法是键入“deploy to web app”并运行“Azure App Service: Deploy to Web App”命令。You can also deploy from the Command Palette (CTRL + SHIFT + P) by typing 'deploy to web app' and running the Azure App Service: Deploy to Web App command.

  1. 选择当前已打开的目录 myExpressAppChoose the directory that you currently have open, myExpressApp.

  2. 根据要部署到的操作系统选择创建选项:Choose a creation option based on the operating system to which you want to deploy:

    • Windows:选择“创建新 Web 应用”,然后选择“高级”选项 。 Windows: Choose Create new Web App and select the Advanced option.
  3. 键入 Web 应用的全局唯一名称,然后按 ENTER。Type a globally unique name for your Web App and press ENTER. 应用名称的有效字符为“a-z”、“0-9”和“-”。Valid characters for an app name are 'a-z', '0-9', and '-'.

  1. 如果使用“高级” 选项定向 Windows,请按照其他提示操作:If targeting Windows using the Advanced option, follow the additional prompts:

    1. 选择“创建新的资源组” ,然后输入资源组的名称。Select Create a new resource group, then enter a name for the resource group.
    2. 选择 Windows 作为操作系统。Select Windows for the operating system.
    3. 选择现有的应用服务计划或创建新的计划。Select an existing App Service Plan or create a new one. 可以在创建新计划时选择定价层。You can select a pricing tier when creating a new plan.
    4. 当系统提示 Application Insights 时,选择“立即跳过” 。Choose Skip for now when prompted about Application Insights.
    5. 选择你附近或想要访问的资源附近的区域。Choose a region near you or near resources you wish to access.
  2. 响应所有提示后,通知通道将显示为应用创建的 Azure 资源。After you respond to all the prompts, the notification channel shows the Azure resources that are being created for your app.

  3. 当系统提示你更新配置以在目标服务器上运行 npm install 时,选择“是”。 Select Yes when prompted to update your configuration to run npm install on the target server. 随后将部署应用。Your app is then deployed.

    配置的部署

  4. 部署开始后,系统会提示更新工作区,使以后的部署自动针对相同的应用服务 Web 应用。When the deployment starts, you're prompted to update your workspace so that later deployments will automatically target the same App Service Web App. 选择“是”,以确保将更改部署到正确的应用。 Choose Yes to ensure your changes are deployed to the correct app.

    配置的部署

Tip

确保应用程序正在侦听 PORT 环境变量 process.env.PORT 提供的端口。Be sure that your application is listening on the port provided by the PORT environment variable: process.env.PORT.

在 Azure 中浏览应用Browse the app in Azure

部署完成后,选择提示中的“浏览网站”以查看全新部署的 Web 应用。 Once the deployment completes, select Browse Website in the prompt to view your freshly deployed web app.

故障排除Troubleshooting

如果看到错误“你无权查看此目录或页面”,则表示应用程序可能无法正常启动。 If you see the error "You do not have permission to view this directory or page.", then the application probably failed to start correctly. 请转到下一部分,查看日志输出以找到并修复错误。Head to the next section and view the log output to find and fix the error. 如果无法解决此问题,请选择下面的“我遇到了问题”按钮联系我们。 If you aren't able to fix it, contact us by selecting the I ran into an issue button below. 我们很乐意为你提供帮助。We're happy to help!

更新应用Update the app

可以使用相同的过程来部署对此应用所做的更改,并选择现有应用而不是创建新应用。You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.

查看日志Viewing Logs

本部分介绍如何从运行的应用服务应用查看(或“跟踪”)日志。In this section, you learn how to view (or "tail") the logs from the running App Service app. 对应用中的 console.log 发出的任何调用将显示在 Visual Studio Code 的输出窗口中。Any calls to console.log in the app are displayed in the output window in Visual Studio Code.

在“AZURE 应用服务”资源管理器中找到该应用,右键单击该应用,然后选择“查看流日志”。 Find the app in the AZURE APP SERVICE explorer, right-click the app, and choose View Streaming Logs.

出现提示时,请选择启用日志记录并重启应用程序。When prompted, choose to enable logging and restart the application. 重启应用后,VS Code 输出窗口将会打开,其中包含与日志流建立的连接。Once the app is restarted, the VS Code output window opens with a connection to the log stream.

查看流日志

启用日志记录并重启

几秒钟后,你将看到一条消息,指出已连接到日志流服务。After a few seconds, you'll see a message indicating that you're connected to the log-streaming service. 请多次刷新页面以查看更多活动。Refresh the page a few times to see more activity.

```bash
2019-09-20 20:37:39.574 INFO  - Initiating warmup request to container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node
2019-09-20 20:37:55.011 INFO  - Waiting for response to warmup request for container msdocs-vscode-node_2_00ac292a. Elapsed time = 15.4373071 sec
2019-09-20 20:38:08.233 INFO  - Container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node initialized successfully and is ready to serve requests.
2019-09-20T20:38:21  Startup Request, url: /Default.cshtml, method: GET, type: request, pid: 61,1,7, SCM_SKIP_SSL_VALIDATION: 0, SCM_BIN_PATH: /opt/Kudu/bin, ScmType: None
```

后续步骤Next steps

祝贺你,你现已成功完成本快速入门!Congratulations, you've successfully completed this quickstart!

接下来请查看其他 Azure 扩展。Next, check out the other Azure extensions.

或安装 Node Pack for Azure 扩展包获取所有这些工具。Or get them all by installing the Node Pack for Azure extension pack.