0

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."

1 Answer 1

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:

enter image description here

Sign up to request clarification or add additional context in comments.

3 Comments

I think this brought me a little closer. Now I'm seeing the error "The page cannot be displayed because an internal server error has occurred."
Thank you. Because of this suggestion, I was able to produce helpful error messages in the log stream and the site is running normally now.
@ChrisPhillips Glad to know that it can work now! If the answer can give you some help, you may consider accepting it. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.