React+ASP.NET Core部署至Azure出现HTTP 404页面未找到错误

用Visual Studio 2022的React with .NET Core模板创建了包含两个独立子项目的解决方案，部署到Azure后访问站点返回HTTP 404“页面未找到”错误。本地调试时：

• 通过npm start启动React项目，可在localhost:3000正常访问前端页面
• 直接运行服务端项目，仅能访问API接口（返回JSON数据）
  已按微软文档要求将客户端项目添加为服务端项目的引用，但不清楚其工作机制，需要解决两个问题：

1. 如何让部署后的Azure站点正常显示React页面
2. 如何确认客户端项目是否已被正确部署

一、确认客户端项目是否已正确部署 #

登录Azure门户，进入对应的App Service：

• 打开「高级工具」>「Kudu」>「调试控制台」>「CMD」
• 查看site\wwwroot目录，若存在index.html和static文件夹（React构建后的静态资源），说明客户端已正确部署；若为空或缺少这些文件，说明构建/部署环节有问题。

二、配置服务端托管React静态文件 #

在服务端项目的Program.cs中，确保添加了静态文件托管和SPA路由回退的中间件，代码示例：

var builder = WebApplication.CreateBuilder(args);

// 添加控制器服务
builder.Services.AddControllers();

var app = builder.Build();

// 启用静态文件托管（指向wwwroot目录）
app.UseStaticFiles();

// 配置SPA路由回退：所有非API的请求都返回React的index.html
app.MapFallbackToFile("index.html");

// 映射API控制器
app.MapControllers();

app.Run();

注意：UseStaticFiles()和MapFallbackToFile("index.html")必须放在MapControllers()之前，保证请求优先匹配静态资源和SPA路由。

三、确保客户端构建产物同步到服务端 #

1. 检查客户端项目的package.json，确认build命令能将构建产物复制到服务端的wwwroot目录：

"scripts": {
  "build": "react-scripts build && xcopy build ../OnBo2023Server/wwwroot /E /Y"
}

替换OnBo2023Server为你的服务端项目名称，/E表示复制所有子目录，/Y表示覆盖文件不提示。

2. 检查服务端项目对客户端的引用设置：

• 在Visual Studio中右键服务端项目的「依赖项」>「项目引用」，找到客户端项目
• 右键客户端引用>「属性」，设置「生成操作」为Content，「复制到输出目录」为「如果较新则复制」

四、Azure部署配置检查 #

1. 部署目标选择服务端项目（而非单独部署客户端），确保Azure部署的是包含React静态资源的服务端程序集。
2. 检查App Service的「配置」>「应用设置」，确认ASPNETCORE_ENVIRONMENT设置为Production，保证静态文件中间件在生产环境正常启用。
3. 确认App Service的启动命令为dotnet OnBo2023Server.dll（替换为你的服务端dll名称），无需额外配置npm启动命令，因为静态资源已打包到wwwroot。

五、本地预验证 #

在本地完成以下操作，确认流程正常后再部署到Azure：

• 进入客户端项目目录，执行npm run build构建静态资源
• 运行服务端项目，通过服务端的端口（如localhost:5000）访问，若能正常显示React页面，说明配置正确。

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