在 Azure 中创建 Node.js Web 应用

通过使用 Visual Studio Code 在本地创建 Node.js/Express 应用并将其部署到云,来开始使用 Azure 应用服务。 由于使用的是免费应用服务层,因此完成本快速入门不会产生费用。

先决条件

克隆并运行本地 Node.js 应用程序

  1. 在本地计算机上,打开终端并克隆示例存储库:

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

    cd nodejs-docs-hello-world
    
  3. 启动该应用以在本地进行测试:

    npm start
    
  4. 打开浏览器并导航到 http://localhost:1337。 浏览器应会显示“Hello World!”。

  5. 在终端中按 Ctrl+C 停止服务器。

将应用部署到 Azure

在本部分,你将使用 VS Code 和 Azure 应用服务扩展将 Node.js 应用部署到 Azure。

  1. 在终端中,确保你在 nodejs-docs-hello-world 文件夹中操作,然后使用以下命令启动 Visual Studio Code:

    code .
    
  2. 在 VS Code 活动栏中,选择 Azure 徽标显示“AZURE 应用服务”资源管理器。 选择“登录到 Azure...”并遵照说明操作。 (如果遇到错误,请参阅下面的排查 Azure 登录问题。)登录后,资源管理器应会显示 Azure 订阅的名称。

    登录 Azure

  3. 在 VS Code 的“AZURE 应用服务”资源管理器中,选择蓝色的向上箭头图标,将应用部署到 Azure。 (也可以从“命令面板”调用相同的命令 (Ctrl+Shift+P),方法是键入“部署到 Web 应用”,并选择“Azure 应用服务: 部署到 Web 应用”)。

    VS Code 中的 Azure 应用服务的屏幕截图,显示已选中蓝色箭头图标。

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

  5. 根据要部署到的操作系统选择创建选项:

    • Linux:选择“创建新 Web 应用”
    • Windows:选择“创建新 Web 应用...高级”
  6. 键入 Web 应用的全局唯一名称,然后按 Enter。 该名称必须在整个 Azure 中保持唯一,且只能使用字母数字字符(“A-Z”、“a-z”和“0-9”)和连字符(“-”)。

  7. 如果以 Linux 为目标,请在出现提示时选择 Node.js 版本。 建议使用 LTS 版本。

  8. 如果面向 Windows,请遵循附加提示:

    1. 选择“创建新的资源组”,然后输入资源组的名称,例如AppServiceQS-rg
    2. 选择 Windows 作为操作系统。
    3. 选择“创建新的应用服务计划”,输入该计划的名称(例如 AppServiceQS-plan),然后选择“F1 免费”作为定价层。
    4. 当系统提示 Application Insights 时,选择“立即跳过”。
    5. 选择你附近或想要访问的资源附近的区域。
  9. 响应所有提示后,VS Code 将在其通知弹出窗口中显示正在为该应用创建的 Azure 资源。

    部署到 Linux 时,如果系统提示你更新配置以在目标 Linux 服务器上运行 npm install,请选择“是”。

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

  10. 当系统提示你“始终将工作区 "nodejs-docs-hello-world" 部署到 (应用名称)”时,请选择“是”。 选择“是”就是告知 VS Code 在进行后续部署时自动以同一应用服务 Web 应用为目标。

  11. 如果部署到 Linux,请在部署完成后,选择提示中的“浏览网站”以查看全新部署的 Web 应用。 浏览器应会显示“Hello World!”

  12. 如果部署到 Windows,必须先为 Web 应用设置 Node.js 版本号:

    1. 在 VS Code 中展开新应用服务的节点,右键单击“应用程序设置”,并选择“添加新设置...”:

      添加应用设置的命令

    2. 为设置键输入 WEBSITE_NODE_DEFAULT_VERSION

    3. 为设置值输入 10.15.2

    4. 右键单击应用服务的节点,并选择“重启”

      重启应用服务的命令

    5. 再次右键单击应用服务的节点,并选择“浏览网站”。

排查 Azure 登录问题

如果在登录到 Azure 时出现错误“找不到名为 [订阅 ID] 的订阅”,原因可能是你使用了代理,因此无法访问 Azure API。 在终端中使用 export 以代理信息配置 HTTP_PROXYHTTPS_PROXY 环境变量。

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

如果设置环境变量不能解决该问题,请选择上面的“我遇到了问题”按钮联系我们。

更新应用

若要将更改部署到此应用,可以在 VS Code 中进行编辑,保存文件,然后使用前面所述的相同过程,只是这一次要选择现有的应用,而不是创建新应用。

查看日志

可以在 VS Code 输出窗口中直接从应用查看日志输出(对 console.log 的调用)。

  1. 在“AZURE 应用服务”资源管理器中右键单击应用节点,并选择“开始流式传输日志”。

    开始流式传输日志

  2. 出现提示时,请选择启用日志记录并重启应用程序。 重启应用后,VS Code 输出窗口将会打开,其中包含与日志流建立的连接。

    屏幕截图,显示 Visual Studio Code 提示启用日志记录并重启应用程序,已选中“是”按钮。

  3. 几秒钟后,输出窗口将看到一条消息,指出已连接到日志流服务。 可以通过刷新浏览器中的页面来生成更多输出活动。

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

后续步骤

祝贺你,你现已成功完成本快速入门!

查看其他 Azure 扩展。

或安装 Node Pack for Azure 扩展包获取所有这些工具。

先决条件

如果没有 Azure 帐户,请立即注册一个包含 200 美元 Azure 额度的试用帐户,以试用任何服务组合。

需要连同 Node.js 和 npm(Node.js 包管理器)一起安装 Visual Studio Code

还需要安装 Azure 应用服务扩展,使用该扩展可在 Azure 平台即服务 (PaaS) 上创建、管理和部署 Linux Web 应用。

登录

安装该扩展后,登录到你的 Azure 帐户。 在活动栏中,选择 Azure 徽标显示“AZURE 应用服务”资源管理器。 选择“登录到 Azure...”并遵照说明操作。

登录到 Azure

疑难解答

如果出现错误“找不到名为 [订阅 ID] 的订阅”,原因可能是你使用了代理,因此无法访问 Azure API。 在终端中使用 export 以代理信息配置 HTTP_PROXYHTTPS_PROXY 环境变量。

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

如果设置环境变量不能解决该问题,请选择下面的“我遇到了问题”按钮联系我们。

先决条件检查

在继续之前,请确保已安装并配置了所有必备组件。

在 VS Code 的状态栏中应会显示你的 Azure 电子邮件地址,“AZURE 应用服务”资源管理器中应会显示你的订阅。

创建 Node.js 应用程序

接下来,创建可部署到云的 Node.js 应用程序。 本快速入门使用一个应用程序生成器从终端快速搭建应用程序。

提示

如果已完成 Node.js 教程,可直接跳转到部署到 Azure

使用快速生成器搭建新应用程序

Express 是用于生成和运行 Node.js 应用程序的流行框架。 可以使用 Express 生成器工具搭建(创建)新的 Express 应用程序。 快速生成器作为 npm 模块提供,可以使用 npm 命令行工具 npx 直接运行(无需安装)。

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

--view pug --git 参数告知生成器使用 pug 模板引擎(以前称为 jade)并创建 .gitignore 文件。

若要安装应用程序的所有依赖项,请转到新文件夹并运行 npm install

cd myExpressApp
npm install

运行应用程序

接下来,确保运行应用程序。 在终端中,使用 npm start 命令启动该应用程序以启动服务器。

npm start

现在,打开浏览器并导航到 http://localhost:3000,其中应会显示如下所示的内容:

运行 Express 应用程序

“部署到 Azure”

在本部分中,将使用 VS Code 和 Azure 应用服务扩展部署 Node.js 应用。 本快速入门使用最基本的部署模型,其中,应用程序将被压缩并部署到 Linux 上的 Azure Web 应用。

使用 Azure 应用服务进行部署

首先,在 VS Code 中打开应用程序文件夹。

code .

在“AZURE 应用服务”资源管理器中,选择蓝色的向上箭头图标,将应用部署到 Azure。

Visual Studio Code 中 Azure 应用服务的屏幕截图,已选中蓝色部署箭头。

提示

也可以从 命令面板 (CTRL + SHIFT + P) 进行部署,方法是键入“deploy to web app”并运行“Azure App Service: Deploy to Web App”命令。

  1. 选择当前已打开的目录 myExpressApp

  2. 选择“新建新的 Web 应用”, 此选项默认部署到 Linux 上的应用服务。

  3. 键入 Web 应用的全局唯一名称,然后按 ENTER。 应用名称的有效字符为“a-z”、“0-9”和“-”。

  4. 选择 Node.js 版本,建议使用“LTS”。

    通知通道将显示正在为应用创建 Azure 资源。

  5. 当系统提示你更新配置以在目标服务器上运行 npm install 时,选择“是”。 随后将部署应用。

    屏幕截图,显示提示更新目标服务器上的配置,已选中“是”按钮。

  6. 部署开始后,系统会提示更新工作区,使以后的部署自动针对相同的应用服务 Web 应用。 选择“是”,以确保将更改部署到正确的应用。

    屏幕截图,显示提示更新工作区,已选中“是”按钮。

提示

确保应用程序正在侦听 PORT 环境变量 process.env.PORT 提供的端口。

在 Azure 中浏览应用

部署完成后,选择提示中的“浏览网站”以查看全新部署的 Web 应用。

疑难解答

如果看到错误“你无权查看此目录或页面”,则表示应用程序可能无法正常启动。 请转到下一部分,查看日志输出以找到并修复错误。 如果无法解决此问题,请选择下面的“我遇到了问题”按钮联系我们。 我们很乐意为你提供帮助。

更新应用

可以使用相同的过程来部署对此应用所做的更改,并选择现有应用而不是创建新应用。

查看日志

本部分介绍如何从运行的应用服务应用查看(或“跟踪”)日志。 对应用中的 console.log 发出的任何调用将显示在 Visual Studio Code 的输出窗口中。

在“Azure 应用服务”资源管理器中找到应用并右键单击,然后选择“开始流式传输日志” 。

此时会打开 VS Code 输出窗口,其中包含与日志流建立的连接。

开始流式传输日志

屏幕截图,VS Code 提示启用文件日志记录并重启 Web 应用,已选中“是”按钮。

几秒钟后,你将看到一条消息,指出已连接到日志流服务。 请多次刷新页面以查看更多活动。

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

后续步骤

祝贺你,你现已成功完成本快速入门!

接下来请查看其他 Azure 扩展。

或安装 Node Pack for Azure 扩展包获取所有这些工具。