ASP.NET Core + React.js部署至Azure后无法运行，路由异常求助

1. 确认SPA路由中间件配置 #

VS模板生成的项目依赖ASP.NET Core的SpaStaticFiles中间件托管React静态资源，需确保项目配置文件（.NET 6+为Program.cs，旧版本为Startup.cs）包含正确的路由回退逻辑：

// .NET 6+ Program.cs 示例
app.MapFallbackToFile("index.html");

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    // 生产环境无需启用React开发服务器，确保该分支仅在本地开发时生效
});

该配置会将所有非API请求转发到React的index.html，避免客户端路由失效。

2. 检查Azure应用服务核心配置 #

• 常规设置：进入Azure门户应用服务→配置→常规设置，确认启动命令为dotnet YourAppName.dll（VS自动部署会默认配置，手动部署需手动指定），HTTP版本设为2.0
• 路径映射：保持默认虚拟应用程序路径（/）指向站点根目录，不要手动嵌套wwwroot，避免静态资源路径冲突

3. 验证构建与部署文件完整性 #

• 本地执行npm run build，确认ClientApp/build目录生成完整的静态资源
• 通过VS发布时，检查发布配置的"文件发布选项"，确保已包含ClientApp/build下的所有文件，且最终部署到Azure的site/wwwroot目录
• 登录Kudu控制台（https://<你的应用名>.scm.azurewebsites.net/DebugConsole），查看site/wwwroot下是否存在index.html及静态资源文件夹（如static）

4. 排查API路由与请求问题 #

• 直接在浏览器访问API地址（https://<你的应用名>.azurewebsites.net/api/fetch-data），验证API是否正常返回JSON
• 若API请求失败，查看Azure应用服务日志：
  • 进入监控→日志流，查看实时错误信息
  • 查看Kudu的LogFiles/Application目录下的日志文件，定位具体异常（如数据库连接错误、权限问题等）
• 确认React代码中API请求使用相对路径（如fetch('/api/fetch-data')），而非硬编码的本地地址

5. 修复React客户端路由 #

若使用React Router，确保路由组件配置正确，且ASP.NET Core的MapFallbackToFile已覆盖所有客户端路由场景，避免刷新页面时出现404错误

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