How to Deploy Angular SSR on Azure App Service

Question

I am attempting to deploy an Angular [v16.2] Universal (SSR) app to Azure App Service from Azure DevOps Pipelines. For simplicity, I am doing it all in the build pipeline at the moment.

Here is my pipeline, that builds and deploys the app.

trigger:
- master

pool:
 vmImage: ubuntu-22.04

steps:


- task: NodeTool@0
  displayName: 'Use Node 18.17.0'
  inputs:
    versionSpec: 18.17.0

- task: Cache@2
  displayName: load npm cache
  inputs:
    key: npm | $(Agent.OS) | $(System.DefaultWorkingDirectory)/Dashboard/package-lock.json
    restoreKeys: |
        npm | "$(Agent.OS)"
    path: $(npm_config_cache)

- script: |
    npm install -g @angular/cli
  displayName: 'Install Angular CLI'
  workingDirectory: '$(Build.SourcesDirectory)/Dashboard'

- script: |
    npm install
  displayName: 'Resolve Dependencies'
  workingDirectory: '$(Build.SourcesDirectory)/Dashboard'

- script: |
    npm run build:ssr
  displayName: 'Production Build'
  workingDirectory: '$(Build.SourcesDirectory)/Dashboard'

- script: |
    dir
  displayName: List directory
  workingDirectory: '$(Build.SourcesDirectory)'

- script: |
    dir
  displayName: List directory
  workingDirectory: '$(Build.SourcesDirectory)/Dashboard'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/Dashboard/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/Dashboard'
    Contents: server.ts
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)'
    Contents: prerender.js
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy'
  inputs:
    azureSubscription: 'Dashboard Deployment'
    appType: 'app'
    WebAppName: 'DashboardDFIDTest'
    Package: '$(Build.ArtifactStagingDirectory)/app'
    ConfigurationSettings: '-Handler iisnode -NodeStartFile server.ts -appType node'

Once the pipeline has completed, the folder structure in KUDU looks like this ('Dashboard' is the name of the app):

wwwroot/
|--> dist/
|-------> server.ts
|-------> Dashboard/
|-----------> browser/
|-----------> server/

When I attempt to access the page, I see "You do not have permission to view this directory or page."

Answer 1

Based on your YAML sample, the web app can be a Windows Azure Web APP. And the app folder is under the wwwroot/dist folder.

In this case, you can update the Virtual applications and directories in Azure Web App -> Configuration -> Path Mappings.

You can keep the virtual path to / and change the Physical path to site/wwwroot/appname (e.g. site/wwwroot/dist/Dashboard).

For example: