如何在 azureDevOps 应用服务中部署 Angular 通用应用

问题描述

我在 azure web 服务中部署 angular 通用应用程序时遇到问题a/53616516/10979521 但出现错误提示

##[error] 错误:仅当使用 Windows 代理时才支持使用 webdeploy 选项发布.

我猜问题发生在创建应用服务时，在我的应用服务设置中(*发布(代码)*运行时堆栈(.NET Core 2.2)*操作系统(Windows))

# Node.js 与 Angular# 构建一个使用 Angular 的 Node.js 项目.# 添加分析代码、保存构建工件、部署等的步骤:# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript扳机:- 掌握水池:vmImage: 'ubuntu-最新'脚步:- 任务:NodeTool@0输入:版本规范:'10.x'displayName: '安装 Node.js'- 脚本: |npm install -g @angular/cli安装npm 运行构建:ssrdisplayName: '构建项目'- 任务:CopyFiles@2displayName: '将 dist 文件复制到暂存区'输入:SourceFolder: '$(Build.SourcesDirectory)/dist'目标文件夹:'$(Build.ArtifactStagingDirectory)/app/dist'- 任务:CopyFiles@2displayName: '将 server.js 复制到根目录'输入:SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'内容:server.js目标文件夹:'$(Build.ArtifactStagingDirectory)/app'- 任务:DeleteFiles@1displayName: '删除 dist/server.js'输入:SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'内容:server.js- 任务:AzureRmWebAppDeployment@3displayName: 'Azure 应用服务部署:网站'输入:azureSubscription: '我的订阅'WebAppName:'我的网站'包:'$(Build.ArtifactStagingDirectory)/app'生成WebConfig:trueWebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType 节点'使用WebDeploy:trueRemoveAdditionalFilesFlag: 真

解决方案

Edit 2 (9/3/2020)Microsoft 正在远离发布渠道.

经典发布管道"

我仍然认为您最好的选择是从构建管道中删除部署任务，如下所述，因为构建管道不应该以这种方式使用.但这取决于你.

原答案:

从构建管道中删除这部分:

- 任务:AzureRmWebAppDeployment@3displayName: 'Azure 应用服务部署:网站'输入:azureSubscription: '我的订阅'WebAppName:'我的网站'包:'$(Build.ArtifactStagingDirectory)/app'生成WebConfig:trueWebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType 节点'使用WebDeploy:trueRemoveAdditionalFilesFlag: 真

在 build.yml 文件的末尾添加一个发布步骤.这将允许您的发布管道从您的构建中获取工件.

- 任务:PublishBuildArtifacts@1

设置发布管道以部署您的构建.

• 创建新管道
• 从您的构建中添加工件
• 然后添加一个阶段(即开发、质量检查、生产)
• 选择空作业"
• 编辑舞台并添加任务
• 添加 Azure 应用服务任务
• 将 Azure 应用服务部署上的版本号更新为版本 3(与您在 yaml 中使用的版本号相同 - AzureRmWebAppDeployment@3).
• 像在 yaml 中一样填写任务中的值.

包或文件夹"的默认值选项可能不正确.您可以使用右侧的 3 个点导航并选择正确的文件夹.如果您单击此按钮并没有看到任何内容，那么这很可能是因为您尚未使用上述PublishBuildArtifact@1"开始构建.改变.

继续向下工作并扩展选项以查找其他配置设置.

如果您遇到任何问题，您可以通过滚动到任务顶部并单击查看 YAML"来验证任务设置是否正确.然后你可以与你原来的 yaml 进行比较.

希望这会有所帮助.

I'm facing a problem deploying an angular universal app in azure web service I followed this step https://stackoverflow.com/a/53616516/10979521 but a got an error says

##[error]Error: Publish using webdeploy options are supported only when using Windows agent.

I guess the issue occurs in creating an app service, in my app service settings ( *publish (code) *runtime stack (.NET Core 2.2) *Operating System (Windows) )

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    npm run build:ssr
  displayName: 'build the project'

- task: CopyFiles@2
  displayName: 'Copy dist files to staging'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'

    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'


- task: CopyFiles@2
  displayName: 'Copy server.js to the root'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

    Contents: server.js

    TargetFolder: '$(Build.ArtifactStagingDirectory)/app'

- task: DeleteFiles@1
  displayName: 'Delete the dist/server.js'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

    Contents: server.js

- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy: website'
  inputs:
    azureSubscription: 'my subscription'
    WebAppName: 'my website'
    Package: '$(Build.ArtifactStagingDirectory)/app'
    GenerateWebConfig: true
    WebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType node'
    UseWebDeploy: true
    RemoveAdditionalFilesFlag: true

解决方案

Edit 2 (9/3/2020)Microsoft is moving away from release pipelines.

"Classic Release Pipelines"

https://docs.microsoft.com/en-us/azure/devops/pipelines/release/?view=azure-devops

New "Pipelines"

https://docs.microsoft.com/en-us/azure/devops/pipelines/create-first-pipeline?view=azure-devops&tabs=java%2Cyaml%2Cbrowser%2Ctfs-2018-2

Edit:

I realized after I typed this up that maybe your problem is you have "UseWebDeploy: true" and maybe you can fix your problem by setting this to false. Below is a screenshot taken from the same task setup in a release pipeline.

I still think your best option is to remove the deploy task from your build pipeline as outlined below since build pipelines are not meant to be used in this way. But that is up to you.

Original Answer:

Remove this part from your build pipeline:

- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy: website'
  inputs:
    azureSubscription: 'my subscription'
    WebAppName: 'my website'
    Package: '$(Build.ArtifactStagingDirectory)/app'
    GenerateWebConfig: true
    WebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType node'
    UseWebDeploy: true
    RemoveAdditionalFilesFlag: true

Add a publish step to the end of you build.yml file. This will allow your release pipeline to pick up the artifacts from your build.

- task: PublishBuildArtifacts@1

Setup a release pipeline to deploy your build.

• Create a new pipeline
• Add the artifact from your build
• Then add a stage (ie Dev, QA, Production)
• Select "empty job"
• Edit the stage and add tasks
• Add the Azure App Service task
• Update the version number on the Azure App Service Deploy to version 3 (the same one you are using in your yaml - AzureRmWebAppDeployment@3).
• Fill in the values in the task the same way you have it in your yaml.

The default value for the "Package or folder" option probably isn't correct. You can use the 3 dots on the right to navigate and select the correct folder. If you click this and see nothing then this is most likely because you haven't kicked off a build yet with the above "PublishBuildArtifact@1" change.

Keep working your way down and expanding the options to find your other configuration settings.

If you are having trouble with anything you can verify the task is setup properly by scrolling to the top of the task and clicking "View YAML". Then you can compare to your original yaml.

Hopefully this helps.

这篇关于如何在 azureDevOps 应用服务中部署 Angular 通用应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！