您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

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

通过使用 Visual Studio Code 在本地创建 Node.js/Express 应用并将其部署到云,来开始使用 Azure 应用服务。Get started with Azure App Service by creating a Node.js/Express app locally using Visual Studio Code and then deploying the app to the cloud. 由于使用的是免费应用服务层,因此完成本快速入门不会产生费用。Because you use a free App Service tier, you incur no costs to complete this quickstart.

先决条件Prerequisites

克隆并运行本地 Node.js 应用程序Clone and run a local Node.js application

  1. 在本地计算机上,打开终端并克隆示例存储库:On your local computer, open a terminal and clone the sample repository:

    git clone https://github.com/Azure-Samples/nodejs-docs-hello-world
    
  2. 导航到新应用所在的文件夹:Navigate into the new app folder:

    cd nodejs-docs-hello-world
    
  3. 启动该应用以在本地进行测试:Start the app to test it locally:

    npm start
    
  4. 打开浏览器并导航到 http://localhost:1337Open your browser and navigate to http://localhost:1337. 浏览器应会显示“Hello World!”。The browser should display "Hello World!".

  5. 在终端中按 Ctrl+C 停止服务器。Press Ctrl+C in the terminal to stop the server.

将应用部署到 AzureDeploy the app to Azure

在本部分,你将使用 VS Code 和 Azure 应用服务扩展将 Node.js 应用部署到 Azure。In this section, you deploy your Node.js app to Azure using VS Code and the Azure App Service extension.

  1. 在终端中,确保你在 nodejs-docs-hello-world 文件夹中操作,然后使用以下命令启动 Visual Studio Code:In the terminal, make sure you're in the nodejs-docs-hello-world folder, then start Visual Studio Code with the following command:

    code .
    
  2. 在 VS Code 活动栏中,选择 Azure 徽标显示“AZURE 应用服务”资源管理器。In the VS Code activity bar, select the Azure logo to show the AZURE APP SERVICE explorer. 选择“登录到 Azure...”并遵照说明操作。Select Sign in to Azure... and follow the instructions. (如果遇到错误,请参阅下面的排查 Azure 登录问题。)登录后,资源管理器应会显示 Azure 订阅的名称。(See Troubleshooting Azure sign-in below if you run into errors.) Once signed in, the explorer should show the name of your Azure subscription.

    登录 Azure

  3. 在 VS Code 的“AZURE 应用服务”资源管理器中,选择蓝色的向上箭头图标,将应用部署到 Azure。In the AZURE APP SERVICE explorer of VS Code, select the blue up arrow icon to deploy your app to Azure. (也可以从“命令面板”调用相同的命令 (Ctrl+Shift+P),方法是键入“部署到 Web 应用”,并选择“Azure 应用服务: 部署到 Web 应用”)。(You can also invoke the same command from the Command Palette (Ctrl+Shift+P) by typing 'deploy to web app' and choosing Azure App Service: Deploy to Web App).

    部署到 Web 应用

  4. 选择 nodejs-docs-hello-world 文件夹。Choose the nodejs-docs-hello-world folder.

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

    • Linux:选择“创建新 Web 应用”Linux: Choose Create new Web App
    • Windows:选择“创建新 Web 应用...高级”Windows: Choose Create new Web App... Advanced
  6. 键入 Web 应用的全局唯一名称,然后按 EnterType a globally unique name for your web app and press Enter. 该名称必须在整个 Azure 中保持唯一,且只能使用字母数字字符(“A-Z”、“a-z”和“0-9”)和连字符(“-”)。The name must be unique across all of Azure and use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-').

  7. 如果以 Linux 为目标,请在出现提示时选择 Node.js 版本。If targeting Linux, select a Node.js version when prompted. 建议使用 LTS 版本。An LTS version is recommended.

  8. 如果面向 Windows,请遵循附加提示:If targeting Windows, follow the additional prompts:

    1. 选择“创建新的资源组”,然后输入资源组的名称,例如AppServiceQS-rgSelect Create a new resource group, then enter a name for the resource group, such as AppServiceQS-rg.
    2. 选择 Windows 作为操作系统。Select Windows for the operating system.
    3. 选择“创建新的应用服务计划”,输入该计划的名称(例如 AppServiceQS-plan),然后选择“F1 免费”作为定价层。 Select Create new App Service plan, then enter a name for the plan (such as AppServiceQS-plan), then select F1 Free for the pricing tier.
    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.
  9. 响应所有提示后,VS Code 将在其通知弹出窗口中显示正在为该应用创建的 Azure 资源。After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.

    部署到 Linux 时,如果系统提示你更新配置以在目标 Linux 服务器上运行 npm install,请选择“是”。When deploying to Linux, select Yes when prompted to update your configuration to run npm install on the target Linux server.

    在目标 Linux 服务器上更新配置的提示

  10. 当系统提示你“始终将工作区 "nodejs-docs-hello-world" 部署到 (应用名称)”时,请选择“是”。 Select Yes when prompted with Always deploy the workspace "nodejs-docs-hello-world" to (app name)". 选择“是”就是告知 VS Code 在进行后续部署时自动以同一应用服务 Web 应用为目标。Selecting Yes tells VS Code to automatically target the same App Service Web App with subsequent deployments.

  11. 如果部署到 Linux,请在部署完成后,选择提示中的“浏览网站”以查看全新部署的 Web 应用。If deploying to Linux, select Browse Website in the prompt to view your freshly deployed web app once deployment is complete. 浏览器应会显示“Hello World!”The browser should display "Hello World!"

  12. 如果部署到 Windows,必须先为 Web 应用设置 Node.js 版本号:If deploying to Windows, you must first set the Node.js version number for the web app:

    1. 在 VS Code 中展开新应用服务的节点,右键单击“应用程序设置”,并选择“添加新设置...”: In VS Code, expand the node for the new app service, right-click Application Settings, and select Add New Setting...:

      添加应用设置的命令

    2. 为设置键输入 WEBSITE_NODE_DEFAULT_VERSIONEnter WEBSITE_NODE_DEFAULT_VERSION for the setting key.

    3. 为设置值输入 10.15.2Enter 10.15.2 for the setting value.

    4. 右键单击应用服务的节点,并选择“重启”Right-click the node for the app service and select Restart

      重启应用服务的命令

    5. 再次右键单击应用服务的节点,并选择“浏览网站”。Right-click the node for the app service once more and select Browse Website.

排查 Azure 登录问题Troubleshooting Azure sign-in

如果在登录到 Azure 时出现错误“找不到名为 [订阅 ID] 的订阅”,原因可能是你使用了代理,因此无法访问 Azure API。If you see the error "Cannot find subscription with name [subscription ID]" when signing into Azure, 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 above.

更新应用Update the app

若要将更改部署到此应用,可以在 VS Code 中进行编辑,保存文件,然后使用前面所述的相同过程,只是这一次要选择现有的应用,而不是创建新应用。You can deploy changes to this app by making edits in VS Code, saving your files, and then using the same process as before only choosing the existing app rather than creating a new one.

查看日志Viewing Logs

可以在 VS Code 输出窗口中直接从应用查看日志输出(对 console.log 的调用)。You can view log output (calls to console.log) from the app directly in the VS Code output window.

  1. 在“AZURE 应用服务”资源管理器中右键单击应用节点,并选择“开始流式传输日志”。 In the AZURE APP SERVICE explorer, right-click the app node and choose Start Streaming Logs.

    开始流式传输日志

  2. 出现提示时,请选择启用日志记录并重启应用程序。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.

    启用日志记录并重启

  3. 几秒钟后,输出窗口将看到一条消息,指出已连接到日志流服务。After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. 可以通过刷新浏览器中的页面来生成更多输出活动。You can generate more output activity by refreshing the page in the browser.

     Connecting to log stream...
     2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
     Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
     

后续步骤Next steps

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

查看其他 Azure 扩展。Check out the other Azure extensions.

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

先决条件Prerequisites

如果你没有 Azure 帐户,请立即注册一个免费帐户来试用任何服务组合,并获得 200 美元的 Azure 信用额度。If you don't have an Azure account, sign up today for a free account with $200 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) 上创建、管理和部署 Linux Web 应用。You will also need to install the Azure App Service extension, which you can use to create, manage, and deploy Linux Web Apps on the Azure Platform as a Service (PaaS).

登录Sign in

安装该扩展后,登录到你的 Azure 帐户。Once the extension is installed, log into your Azure account. 在活动栏中,选择 Azure 徽标显示“AZURE 应用服务”资源管理器。 In the Activity Bar, select the Azure logo to show the AZURE APP SERVICE explorer. 选择“登录到 Azure...”并遵照说明操作。 Select Sign in to Azure... and follow the instructions.

登录到 Azure

疑难解答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.

提示

如果已完成 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. 本快速入门使用最基本的部署模型,其中,应用程序将被压缩并部署到 Linux 上的 Azure Web 应用。This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App on Linux.

使用 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 应用

提示

也可以从命令面板 (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. 选择“新建新的 Web 应用”, 此选项默认部署到 Linux 上的应用服务。Choose Create new Web App, which deploys to App Service on Linux by default.

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

  4. 选择 Node.js 版本,建议使用“LTS”。Choose your Node.js version, LTS is recommended.

    通知通道将显示正在为应用创建 Azure 资源。The notification channel shows the Azure resources that are being created for your app.

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

    配置的部署

  6. 部署开始后,系统会提示更新工作区,使以后的部署自动针对相同的应用服务 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.

    配置的部署

提示

确保应用程序正在侦听 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.

此时会打开 VS Code 输出窗口,其中包含与日志流建立的连接。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.

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.