在 Azure Web 应用服务中部署 Angular 13 通用应用

Question

我正在尝试使用 azure devops 管道在 Azure web 应用程序服务中部署一个 Angular 13 通用应用程序，但在尝试访问 azure webapp 时出现以下错误。

You do not have permission to view this directory or page.

我在下面写的 azure 管道 -

# 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: windows-latest

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

- script: |
    npm install -g @angular/cli
  displayName: 'npm install cli'

- script: |
   npm install
  displayName: 'npm install'

- script: |
    npm run build:ssr --prod
  displayName: 'npm build'
- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: 'echo $pwd.Path echo "::set-output name=PWD::$pwd"'

- task: CopyFiles@2
  displayName: 'Copy browser directory from dist directory to the root'
  inputs:
    Contents: '$(Build.SourcesDirectory)/dist/app/browser'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/dist/app/browser'


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

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/dist/app'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true

- upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
  artifact: drop


- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'appconnection'
    appType: 'webApp'
    WebAppName: 'appwebsite'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'

还尝试使用下面提到的另一个管道 -

# 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: windows-latest

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

- script: |
    npm install @angular/cli -g
  displayName: 'npm install cli'

- script: |
   npm install
  displayName: 'npm install'


- script: |
    npm run build:ssr
  displayName: 'build the projec'


#- task: PowerShell@2
#  inputs:
#    targetType: 'inline'
#    script: 'echo $pwd.Path echo "::set-output name=PWD::$pwd"'

- task: CopyFiles@2
  displayName: 'Copy browser directory from dist directory to the root'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'


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

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


- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'appconnection'
    appType: 'webApp'
    WebAppName: 'appwebsite1'
    deployToSlotOrASE: true
    ResourceGroupName: 'RG-app'
    SlotName: 'production'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/app'
    WebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType node'
    enableCustomDeployment: true
    DeploymentType: 'webDeploy'
    RemoveAdditionalFilesFlag: true

两个管道都运行成功，但其中任何一个都无法访问 Web 应用程序，这里有任何建议我到底做错了什么。

Answer 1

You do not have permission to view this directory or page.

将我们的讨论作为答案发布，以便对其他社区成员有所帮助。

确认所有文件夹都已部署。
确保文件夹/files/directory 结构的格式正确。
web.config必须在根目录下。
检查部署的文件夹结构中是否存在指定的默认文档。
在配置下的门户中添加虚拟目录路径/ => 路径映射

Answer 2

正确答案如下-

配置下门户中的虚拟目录路径/ => 路径映射已更正。没有变化。
我们在 CopyFiles@2 任务中更改了 Azure 管道中 dist 目录的目录结构，就像这样 -

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

AzureRmWebAppDeployment@4 任务

中 WebConfigParameters 的以下更改

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

WebConfigParameters: '-Handler iisnode -NodeStartFile dist/actual_build_app_directory/server/main.js -appType node'

在 Azure Web 应用服务中部署 Angular 13 通用应用

Deploying an Angular 13 Universal App in Azure web app service

azure-web-app-service

azure-devops

angular-universal