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

本教程指导你设置 CI/CD 管道,以使用部署到 Azure Node.js将 Azure 应用服务 应用程序 部署到 Azure。

先决条件

重要

确保已安装并配置所有必备组件。 在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 生成器,以便可从任意位置运行它。

搭建新应用程序

现在,我们可以通过运行来搭建名为 的新 Express myExpressApp 应用程序:

express myExpressApp --view pug --git

这会创建名为 的新文件夹 myExpressApp ,该文件夹包含应用程序的内容。 --view pug参数告知生成器使用pug模板引擎 (之前称为 jade) 。

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

cd myExpressApp
npm install

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

运行应用程序

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

    npm start

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

  2. 单击链接,使用命令行GitHub此项目。

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

安装扩展

  1. 通过单击 "扩展" 图标(位于 "扩展" 或 "视图: 扩展" 命令VS Code活动栏中的 "扩展" 图标,打开 "扩展 " 视图 (Ctrl+Shift+X)

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

    部署到 Azure

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

    已安装扩展

设置 CI/CD 管道

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

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

工作流的组合

我们支持GitHub操作Azure Pipelines相应的GitHub & Azure Repos操作。 如果仍管理 Azure Pipelines 中的代码,我们还允许你创建GitHub。

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 Pipeline。 引导式工作流将生成一个初学者 YAML 文件,用于定义生成和部署过程。 提交& YAML 文件以继续进行部署。

    提交 YAML

    提示

    可以使用 Azure Pipelines 和 GitHub Actions 提供的所有功能来自定义管道

  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 上 -文件>首选项> 设置
  • 在 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

    输入GitHub PAT 令牌 (个人) 。

    将范围设置为存储库和 admin: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 文件尝试工作流。

帮助和支持