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

    Important

    请参阅此文以 Azure 中国帐户登录。Please refer to this article to sign in with AzureChina account.

    登录 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:

    • 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 ('-').

  1. 如果面向 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.
  2. 响应所有提示后,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.

  3. 当系统提示你“始终将工作区 "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.

  4. 如果部署到 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 扩展。Next, check out the other Azure extensions.

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