How to deploy angular universal app in azureDevOps app service

Question

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://learn.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

Answer 1

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

"Classic Release Pipelines"

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

New "Pipelines"

https://learn.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.