如何在Azure DevOps中构建发布同方案下的React SPA与ASP.NET Core Web API

针对你遇到的问题，核心是要确保流水线中先完成React前端的构建，再让ASP.NET Core后端发布时自动将前端产物打包到wwwroot目录，以下是修正后的完整YAML配置及关键说明：

完整流水线YAML配置 #

trigger:
- main

pool:
  vmImage: 'windows-latest' # 也可使用ubuntu-latest，注意路径分隔符差异

variables:
  buildConfiguration: 'Release'
  # 替换为你解决方案中ClientApp的实际路径
  clientAppPath: './YourBackendProjectName/ClientApp'

steps:
# 1. 安装匹配本地环境的Node.js版本
- task: NodeTool@0
  inputs:
    versionSpec: '18.x' # 对应你本地开发用的Node版本，如16.x/20.x
  displayName: 'Install Node.js'

# 2. 执行React前端依赖安装与构建
- script: |
    npm install
    npm run build
  workingDirectory: $(clientAppPath)
  displayName: 'Build React SPA'

# 3. 还原后端.NET项目依赖
- task: DotNetCoreCLI@2
  inputs:
    command: 'restore'
    projects: '**/*.csproj'
    feedsToUse: 'select'
  displayName: 'Restore .NET dependencies'

# 4. 构建并发布后端项目（自动将前端产物打包到wwwroot）
- task: DotNetCoreCLI@2
  inputs:
    command: 'publish'
    publishWebProjects: true
    arguments: '--configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)'
    zipAfterPublish: true
  displayName: 'Publish .NET API and SPA'

# 5. 将最终产物发布到drop目录
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

关键注意事项 #

• Node版本匹配：必须保证流水线安装的Node版本和本地开发环境一致，避免因版本差异导致前端构建失败。
• 前端路径正确：clientAppPath要精准对应你解决方案中React项目的存放路径，比如后端项目名为BookStoreApi，路径就是./BookStoreApi/ClientApp。
• publish参数作用：publishWebProjects: true会自动识别Web类型项目，ASP.NET Core React模板默认会将ClientApp/build下的前端产物复制到后端的wwwroot目录，无需额外配置路径映射。

常见排查点 #

• 如果前端构建失败，查看流水线日志的npm步骤输出，确认是否存在依赖安装报错或代码语法问题。
• 检查后端项目的.csproj文件，确保包含以下默认配置（若被误删需恢复）：

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
  

  这段配置会在后端发布时自动触发前端构建并同步产物，若你的项目中已保留该配置，也可以省略流水线中的前端手动构建步骤（建议保留，便于单独排查前端构建问题）。

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