Angular Universal部署Azure App Service遇403禁止错误求助

核心问题分析 #

你的部署流程存在几个关键错误，导致Azure无法正确启动Angular Universal服务：

1. 归档了整个代码仓库而非仅必要的构建产物
2. 错误合并了browser和server目录，破坏了服务端代码对静态资源的路径引用
3. Node.js版本不匹配（构建用18.x，部署用16-lts）
4. 服务端代码未使用Azure提供的端口环境变量

分步修复方案 #

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

构建阶段调整

替换原有的CopyFiles和ArchiveFiles任务，确保只归档构建产物和依赖配置文件：

# 替换原有的两个CopyFiles任务
- task: CopyFiles@2
  inputs:
    SourceFolder: "$(Build.SourcesDirectory)/dist/app"
    TargetFolder: "$(Build.ArtifactStagingDirectory)/dist/app"
  displayName: "复制完整dist目录到工件 staging 目录"

- task: CopyFiles@2
  inputs:
    SourceFolder: "$(Build.SourcesDirectory)/app"
    Contents: |
      package.json
      package-lock.json
    TargetFolder: "$(Build.ArtifactStagingDirectory)"
  displayName: "复制依赖配置文件到工件 staging 目录"

# 修正归档任务，仅归档staging目录中的内容
- task: ArchiveFiles@2
  displayName: "归档文件"
  inputs:
    rootFolderOrFile: "$(Build.ArtifactStagingDirectory)"
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/drop.zip
    replaceExistingArchive: true

部署阶段调整

匹配Node.js版本并指定启动命令：

- task: AzureWebApp@1
  displayName: "部署到App Service"
  inputs:
    azureSubscription: "xxxxxxxxxxx"
    appName: "app"
    package: "$(Pipeline.Workspace)/drop/drop.zip"
    runtimeStack: "NODE|18-lts" # 与构建阶段Node版本保持一致
    startupCommand: "node dist/app/server/main.js" # 指定服务端启动脚本路径

2. 修改服务端代码适配Azure端口 #

在server.ts中修改监听端口，使用Azure提供的环境变量：

// server.ts
import { app } from './app';

// 使用Azure PORT环境变量，本地默认用4000
const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`服务启动，监听端口：${port}`);
});

3. FTP手动部署验证 #

如果使用FTP部署，需确保上传以下内容到Azure App Service的site/wwwroot目录：

• dist文件夹（包含browser和server子目录）
• package.json和package-lock.json
• 执行npm install安装依赖（或提前在本地安装后上传node_modules，不推荐）
• 在Azure门户设置启动命令为node dist/app/server/main.js

4. 日志排查 #

若问题仍存在，查看Azure App Service日志：

1. 进入App Service → 日志 → 应用日志
2. 查看启动日志，确认是否有服务端代码报错（如路径错误、依赖缺失等）

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