Angular应用部署至Azure Web Service遇权限及路径映射问题

1. 修正Azure DevOps流水线配置 #

你的流水线存在两个关键问题：文件复制目标错误，以及未正确指向Angular SSR构建后的实际产物目录（dist/test，因为你用ng new test创建项目）。修改后的YAML如下：

# Node.js with Angular SSR
# Build a Node.js Angular SSR project and deploy to Azure Web App
trigger:
- masters
pool:
  vmImage: ubuntu-latest
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '16.x'
  displayName: 'Install Node.js 16.x'

- script: |
    npm install -g @angular/cli
    npm install
    npm run build:ssr --prod
  displayName: 'Install dependencies and build SSR'

# 复制dist/test下的所有产物（browser和server目录）到构建临时目录
- task: CopyFiles@2
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist/test'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
  displayName: 'Copy SSR artifacts to staging'

# 发布临时目录中的所有内容作为构建产物
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'dist'
  displayName: 'Publish build artifacts'

# 添加部署到Azure Web App的任务（需替换占位符为你的实际资源信息）
- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: '<你的Azure订阅服务连接>'
    appType: 'webApp'
    WebAppName: '<你的Web App名称>'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/**'
    ResourceGroupName: '<你的资源组名称>'
    deployToSlotOrASE: false
    enableCustomDeployment: true
    DeploymentType: 'webDeploy'

2. 配置Azure Web App启动命令和环境 #

因为是SSR应用，不能仅靠静态文件部署，必须让Node.js服务器启动处理请求：

• 登录Azure门户，进入你的Web App → 配置 → 常规设置
  • 设置启动命令为：node server/main.js（部署后site\wwwroot下直接有server目录，main.js是SSR服务的入口文件）
  • 设置Node.js版本为16 LTS，和流水线使用的版本保持一致
• 确认应用设置中添加WEBSITE_NODE_DEFAULT_VERSION，值为16.x，避免版本不匹配

3. 确认部署路径 #

部署时直接将产物发布到site\wwwroot即可，不需要额外子目录（比如site\wwwroot\test或dist）。你的部署任务会自动将构建产物中的browser和server目录放到wwwroot下，配合正确的启动命令，Node.js服务就能正常启动，替代IIS默认的静态文件服务，解决“无权查看此目录或页面”的问题。

4. 验证本地构建正确性 #

先在本地运行npm run serve:ssr，确认SSR应用能正常启动，检查dist/test目录下是否存在browser和server子目录，且server目录中有main.js文件，确保构建流程无问题。

内容的提问来源于stack exchange，提问作者FX_Sektor