从Azure DevOps部署ReactJS+.NET4.8至IIS时ClientApp缺失dist文件夹求助

看起来你遇到的核心问题是：Azure DevOps构建流程中，.NET后端的构建产物和React前端的dist文件夹没有被正确合并到同一个工件结构里，导致部署到IIS后ClientApp下缺少dist目录。我来给你梳理几个关键的调整步骤，应该能解决这个问题：

1. 确保React构建的输出路径和执行目录正确 #

首先要确认React的构建脚本是在ClientApp目录下执行的，并且输出路径就是当前目录下的dist：

• 打开ClientApp下的package.json，检查build脚本，确保它的输出路径是相对ClientApp的，比如：

  "scripts": {
    "build": "webpack --mode production --output-path ./dist"
  }
  

• 在Azure DevOps的npm构建任务中，设置工作目录为$(System.DefaultWorkingDirectory)/ClientApp，这样执行npm run build时，会直接在ClientApp目录下生成dist文件夹，而不是其他位置。

2. 调整文件复制步骤，将dist合并到.NET构建产物中 #

你的构建流程里，.NET和React的产物现在是分开的，需要把生成的dist文件夹复制到.NET构建后的Web项目目录下：

• 添加一个文件复制任务，配置如下：
  • 源：$(System.DefaultWorkingDirectory)/ClientApp/dist/**
  • 目标：$(Build.ArtifactStagingDirectory)/[你的Web项目名称]/ClientApp/dist

  注意：替换[你的Web项目名称]为实际的.NET Web项目名称（比如你的项目叫MyWebApp，就写MyWebApp），因为.NET构建后会把项目文件输出到$(Build.ArtifactStagingDirectory)/项目名目录下。

3. 合并工件发布，只发布一个完整的工件 #

不要分开发布.NET和React的工件，而是把所有需要的文件（包括.NET的包和ClientApp/dist）都放到同一个$(Build.ArtifactStagingDirectory)里，然后只配置一个发布工件任务：

• 工件源设置为$(Build.ArtifactStagingDirectory)
• 工件名称保持默认的drop即可

这样生成的drop工件里，Web项目的ClientApp目录下就会包含dist文件夹，部署到IIS后就能找到它了。

4. 可选：通过.NET项目文件确保dist被包含到构建输出 #

如果上面的步骤还是有问题，可以修改.NET Web项目的.csproj文件，强制让dist文件夹被复制到构建输出中：

<ItemGroup>
  <Content Include="ClientApp/dist/**">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
  </Content>
</ItemGroup>

这样在.NET构建时，会自动把ClientApp下的dist文件夹复制到输出目录，不需要额外的文件复制任务。

排查小技巧 #

• 在npm构建步骤后，临时添加一个发布工件任务，把$(System.DefaultWorkingDirectory)/ClientApp发布成一个临时工件，查看里面是否真的生成了dist文件夹，排除React构建本身的问题。
• 构建完成后，在Azure DevOps的构建摘要里查看drop工件的内容，确认drop/[Web项目名]/ClientApp/dist路径是否存在。

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