在Azure web应用程序服务中部署Angular 13通用应用程序

Question

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

您没有查看此目录或页面的权限。

正如我在azure pipeline-下面所写的那样

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

您没有查看此目录或页面的权限。

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

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

Answer 2

正确答案如下-

• 配置下门户中的虚拟目录路径=>路径映射已更正。没有变化
• 我们在CopyFiles@2任务中更改了azure管道中dist目录的目录结构，如下所示-

SourceFolder:'$(Build.SourcesDirectory)/dist'目标文件夹："$(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'