使用 Visual Studio Code 部署到 Azure 应用服务

本教程逐步讲解如何设置 CI/CD 管道,以便使用 " 部署到 Azure " 扩展将 Node.js 应用程序部署到 Azure App Service。

先决条件

重要

确保已安装并配置了所有必备组件。 在 VS Code 中,你应会在状态栏中看到你的 Azure 电子邮件地址。

创建 Node.js 应用程序

创建可部署到云的 Node.js 应用程序。 本教程使用应用程序生成器从终端快速基架应用程序。

提示

如果已完成 Node.js 教程,可以直接跳到 设置 CI/CD 管道

安装 Express 生成器

Express  是一个常用的框架,用于生成和运行 Node.js 应用程序。 可以使用 Express 生成器工具基架 (创建) 新的 Express 应用程序   。 Express 生成器作为 npm 模块提供,并使用 npm 命令行工具进行安装  npm

提示

若要测试 npm 是否已正确安装在计算机上,请在终端中键入 npm--help,你应看到使用情况文档。

通过从终端运行以下内容来安装 Express 生成器:

npm install -g express-generator

使用 -g 开关可在计算机上全局安装 Express 生成器,以便可从任意位置运行它。

搭建新应用程序

现在,我们可以 myExpressApp 通过运行以下操作来基架一个名为的新 Express 应用程序:

express myExpressApp --view pug --git

这将创建一个名为的新文件夹 myExpressApp ,其中包含应用程序的内容。 --view pug参数告知生成器使用pug模板引擎 (以前称为 index.jade) 。

若要安装应用程序的所有依赖项 (再次) 作为 npm 模块提供,请参阅新文件夹并执行 npm install 以下操作:

cd myExpressApp
npm install

此时,应测试应用程序是否运行。 生成的 Express 应用程序包含一个 package.json 文件,其中包含要运行的启动脚本 node ./bin/www 。 这会启动运行 Node.js 应用程序。

运行应用程序

  1. 在 Express 应用程序文件夹的终端中,运行:

    npm start

    Node.js web 服务器将启动,你可以浏览到 http://localhost:3000 以查看正在运行的应用程序。

  2. 单击 此链接 可使用命令行将此项目推送到 GitHub。

  3. 在 VS Code 中打开应用程序文件夹,并准备好将其部署到 Azure。

安装扩展

  1. 单击 "VS Code" 或 " view: Extensions " 命令旁边的活动栏中的扩展图标,打开 "扩展" 视图 (Ctrl+Shift+X)

  2. 搜索 " 部署到 Azure 扩展并安装"。

    部署到 azure

  3. 安装完成后,扩展将位于启用的扩展空间。

    已安装扩展

设置 CI/CD 管道

现在,可以使用 VS code 部署到 Azure 应用 Services、Azure Function App 和 AKS。 此 VS Code 扩展可帮助你设置 Azure 应用服务的持续生成和部署,而无需离开 VS Code。

若要使用此服务,需要在 VS Code 上安装扩展。 你可以从 VS Code 中浏览和安装扩展。

工作流的组合

对 GitHub 的 GitHub 操作和 Azure Pipelines & Azure Repos 相应地提供支持。 如果仍在 GitHub 中管理代码,我们还允许您创建 Azure Pipelines。

GitHub + GitHub 操作

  1. 若要设置管道,请 Deploy to Azure: Configure CI/CD Pipeline 从命令面板中选择 (Ctrl/Cmd + Shift + P) 或右键单击文件资源管理器。

    配置 CI/CD

    备注

    如果代码未在工作区中打开,则它将要求提供文件夹位置。 同样,如果工作区中的代码具有多个文件夹,它将要求提供文件夹。

  2. 从列表中选择要创建的管道模板。 由于目标是 Node.js ,请选择 Node.js with npm to App Service.

    管道模板选择

  3. 选择要部署应用程序的目标 Azure 订阅。

    Azure 订阅

  4. 选择目标 Azure 资源以部署应用程序。

    目标应用

  5. 输入 GitHub 个人访问令牌 (PAT) ,以填充 GitHub 工作流中使用的机密。 将范围设置为 repoadmin:repo_hook

    pat 范围

    提示

    如果代码在 Azure Repos 中,则需要不同的权限。

  6. GitHub 工作流或 Azure 管道的配置是基于扩展设置发生的。 引导式工作流将生成用于定义生成和部署过程的 starter YAML 文件。 提交 & 推送 YAML 文件以继续进行部署。

    提交 YAML

    提示

    你可以使用 Azure PipelinesGitHub 操作提供的所有功能自定义管道。

  7. 导航到 GitHub 存储库,查看正在进行的操作。

    actions

  8. 使用 Web 应用 URL 导航到在 Azure 中运行的站点 http://{web_app_name}.azurewebsites.net ,并验证其内容。

GitHub + Azure Pipelines

重要

若要在 Github 存储库 Azure Pipelines 中设置 CI/CD,需要 Use Azure Pipelines for GitHub 在扩展中启用。

若要打开用户和工作区设置,请使用以下 VS Code 菜单命令:

  • 在 Windows/Linux- File > 首选项 > 设置
  • 在 macOS 上 > 首选项 > 设置

还可以从命令面板中打开 "设置编辑器" (Ctrl+Shift+P) 带首选项:打开设置或使用键盘快捷方式 (Ctrl+,) 。

打开 "设置编辑器" 时,你可以搜索并发现你要查找的设置。 搜索名称 deployToAzure.UseAzurePipelinesForGithub 并启用,如下所示。

搜索并启用 deployToAzure. UseAzurePipelinesForGithub。

  1. 若要设置管道,请 Deploy to Azure: Configure CI/CD Pipeline 从命令面板中选择 (Ctrl/Cmd + Shift + P) 或右键单击文件资源管理器。

    选择 "部署到 Azure":从命令面板配置 CI/CD 管道。

    备注

    如果代码未在工作区中打开,则它将要求提供文件夹位置。 同样,如果工作区中的代码具有多个文件夹,它将要求提供文件夹。

  2. 从列表中选择要创建的管道模板。 由于目标是 Node.js ,请选择 Node.js with npm to App Service.

    管道模板选择

  3. 选择要部署应用程序的目标 Azure 订阅。

    Azure 订阅

  4. 选择目标 Azure 资源以部署应用程序。

    目标应用

  5. 输入 GitHub 个人访问令牌 (PAT) ,以填充 GitHub 工作流中使用的机密。 将范围设置为 repoadmin:repo_hook

     (PAT) 上输入 GitHub 个人访问令牌。

    将范围设置为存储库和管理员: repo_hook。

  6. 选择 "Azure DevOps" 组织。

    org

  7. 选择 Azure DevOps 项目。

    project

  8. GitHub 工作流或 Azure 管道的配置是基于扩展设置发生的。 引导式工作流将生成用于定义生成和部署过程的 starter YAML 文件。 提交 & 推送 YAML 文件以继续进行部署。

    推送 YAML starter 文件。

    提示

    你可以使用 Azure PipelinesGitHub 操作提供的所有功能自定义管道。

  9. 导航到 Azure DevOps 项目,查看正在进行的管道。

    导航到 Azure DevOps 项目,查看正在进行的管道。

  10. 使用 Web 应用 URL 导航到在 Azure 中运行的站点 http://{web_app_name}.azurewebsites.net ,并验证其内容。

Azure Repos + Azure Pipelines

  1. 若要设置管道,请 Deploy to Azure: Configure CI/CD Pipeline 从命令面板中选择 (Ctrl/Cmd + Shift + P) 或右键单击文件资源管理器。

    配置 CI/CD、Azure Repos + Azure Pipelines。

    备注

    如果代码未在工作区中打开,则它将要求提供文件夹位置。 同样,如果工作区中的代码具有多个文件夹,它将要求提供文件夹。

  2. 从列表中选择要创建的管道模板。 由于目标是 Node.js ,请选择 Node.js with npm to App Service.

    管道模板选择

  3. 选择要部署应用程序的目标 Azure 订阅。

    Azure 订阅

  4. 选择目标 Azure 资源以部署应用程序。

    目标应用

  5. GitHub 工作流或 Azure 管道的配置是基于扩展设置发生的。 引导式工作流将生成用于定义生成和部署过程的 starter YAML 文件。 提交 & 推送 YAML 文件以继续进行部署。

    YAML starter file Azure Repos + Azure Pipelines。

    提示

    你可以使用 Azure PipelinesGitHub 操作提供的所有功能自定义管道。

  6. 导航到 Azure DevOps 项目,查看正在进行的管道。

    导航到 Azure DevOps 项目,查看正在进行的 Azure 管道。

  7. 使用 Web 应用 URL 导航到在 Azure 中运行的站点 http://{web_app_name}.azurewebsites.net ,并验证其内容。

疑难解答

了解如何解决常见问题。

问题:未能将 web 包部署到应用服务。 冲突 (代码: 409)

解决方法:重启应用服务,然后再次将包部署到应用服务。

后续步骤

使用存储库中的 Docker 文件尝试工作流。

帮助和支持