解决VS2022 Angular&ASP.Net Core模板部署CloudFoundry后404问题

问题根源 #

VS2022的.NET8 Angular/ASP.NET Core模板，本地开发时依赖SPA中间件代理到ng serve，但发布流程默认不会把Angular构建的dist文件自动复制到服务器项目的wwwroot/browser目录——而生产环境下SPA中间件默认从该目录加载前端静态文件，这就是部署后404的核心原因。

修复步骤 #

1. 确认服务器项目的SPA中间件配置

打开MyTest.Server/Program.cs，确保存在以下SPA相关配置（模板默认会生成，可核对）：

app.UseSpaStaticFiles();

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "../mytest.client";

    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

生产环境下，UseSpaStaticFiles默认从wwwroot/browser读取静态资源，无需额外修改。

2. 修改服务器项目的csproj，添加前端构建&复制逻辑

打开MyTest.Server/MyTest.Server.csproj，在<Project>节点内添加以下配置，让dotnet publish自动处理Angular构建和文件复制：

<Target Name="PublishClient" AfterTargets="ComputeFilesToPublish">
  <!-- 安装依赖（仅当node_modules不存在时执行） -->
  <Exec WorkingDirectory="..\mytest.client" Command="npm install" Condition="!Exists('..\mytest.client\node_modules')" />
  <!-- 构建生产版Angular应用 -->
  <Exec WorkingDirectory="..\mytest.client" Command="npm run build -- --configuration production" />
  
  <!-- 将dist文件复制到服务器发布目录的wwwroot/browser -->
  <ItemGroup>
    <ClientFiles Include="..\mytest.client\dist\mytest.client\**" />
    <ResolvedFileToPublish Include="@(ClientFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>wwwroot/browser/%(RecursiveDir)%(Filename)%(Extension)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

3. 简化GitLab CI命令

dotnet publish会自动触发restore和build，CI脚本可简化为：

- dotnet restore ./*.sln
- dotnet publish MyTest.Server/MyTest.Server.csproj -c Release -o ${PWD}/publish

4. 验证发布结果

发布完成后，检查${PWD}/publish/wwwroot/browser目录，确认包含Angular的index.html、main.js等静态文件。部署到CloudFoundry后，前端即可正常访问。

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