Angular Universal部署Azure Web Service失败，求排查管道或配置问题

问题背景 #

本地执行npm run build:ssr && npm run serve:ssr完全正常，非SSR的npm run start以及不带SSR的应用部署到Azure也没问题，但一搞SSR部署就出现异常。

现有配置 #

web.config配置 #

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="DynamicContent">
          <match url="/*" />
          <action type="Rewrite" url="main.js"/>
        </rule>
        <rule name="StaticContent" stopProcessing="true">
          <match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg))" />
          <action type="None" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" />
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".ttf" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
      <mimeMap fileExtension=".otf" mimeType="application/otf" />
    </staticContent>
  </system.webServer>
</configuration>

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://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
  - masters

pool:
  vmImage: ubuntu-latest

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

  - script: |
      npm install -g @angular/cli
      npm install --force
      npm outdated
      npm run build:ssr --prod
    displayName: 'npm install and build'

  - task: CopyFiles@2
    inputs:
      targetFolder: '$(Build.ArtifactStagingDirectory)'

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: 'dist'
      ArtifactName: 'dist'

方案二

# 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:
  - masters

pool:
  vmImage: ubuntu-latest

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


  - script: |
      npm install -g @angular/cli
      npm install --force
      npm outdated
      npm run build:ssr --prod
    displayName: 'npm install and build'

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


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

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

问题根源&修复方案 #

1. Pipeline是主要问题 #

两个方案都存在发布路径错误：

• 方案一：PublishBuildArtifacts@1指定发布源码目录下的dist，但前面CopyFiles@2已经把文件复制到$(Build.ArtifactStagingDirectory)，等于白做复制操作，且未将web.config复制到发布目录，部署后找不到入口文件。
• 方案二：最后一步仍错误指向dist，且文件复制逻辑完全错误——Angular SSR构建后，dist下是browser和server两个子目录，main.js实际在server目录内，当前路径根本找不到正确的入口文件。

2. web.config小优化 #

• 静态规则里的cscc是笔误，应改为scss，虽不影响核心功能，但建议修正。
• 可添加iisnode日志配置便于排查错误，在system.webServer节点内新增：

  <iisnode 
    loggingEnabled="true"
    logDirectory="iisnode"
    devErrorsEnabled="true"
  />
  

3. 正确的Pipeline写法 #

简化流程，直接处理构建后的dist目录：

trigger:
  - masters

pool:
  vmImage: ubuntu-latest

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

  - script: |
      npm install -g @angular/cli
      npm install
      npm run build:ssr --prod
    displayName: '安装依赖并构建SSR'

  # 将web.config复制到dist根目录（与browser、server同级）
  - task: CopyFiles@2
    inputs:
      SourceFolder: '$(Build.SourcesDirectory)'
      Contents: 'web.config'
      TargetFolder: '$(Build.SourcesDirectory)/dist'

  # 直接发布dist目录
  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: '$(Build.SourcesDirectory)/dist'
      ArtifactName: 'dist'

4. 部署后关键设置 #

• 登录Azure门户，进入Web App -> 配置 -> 通用设置，将启动命令设置为node server/main.js（因main.js位于server目录）。
• 确认Azure Web App的Node.js版本为18.x，与本地一致，版本不匹配也会导致SSR运行失败。

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