基于IIS部署ASP.NET Core+React模板应用遇404错误的配置求助

核心问题分析 #

根路径404但API正常，说明ASP.NET Core后端路由正常，但React前端的静态文件托管或路由回退逻辑未配置到位，导致IIS无法正确返回React的入口页面（index.html）。

具体配置步骤 #

1. 完善ASP.NET Core项目的SPA路由配置 #

在Program.cs中必须添加SPA静态文件托管和路由回退逻辑，确保所有非API请求都转发到React的index.html：

var builder = WebApplication.CreateBuilder(args);

// 注册服务
builder.Services.AddControllersWithViews();
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/build"; // 对应React打包后的build目录路径
});

var app = builder.Build();

// 中间件配置
if (!app.Environment.IsDevelopment())
{
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles(); // 启用SPA静态文件服务

app.UseRouting();

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

// 配置SPA路由回退：所有非API请求都返回index.html
app.MapSpaFallbackRoute(
    name: "spa-fallback",
    defaults: new { controller = "Fallback", action = "Index" });

app.Run();

如果项目中没有FallbackController，需要创建一个：

using Microsoft.AspNetCore.Mvc;

public class FallbackController : Controller
{
    public IActionResult Index()
    {
        return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), "ClientApp", "build", "index.html"), "text/html");
    }
}

2. 修正React项目的打包配置 #

• 把package.json中的homepage参数设为站点根路径（如果是根站点则设为"/"，子站点则对应子路径），而非完整站点URL：

  "homepage": "/"
  

• 在ClientApp目录下执行npm run build，确保生成完整的build目录。

3. IIS站点关键配置 #

• 应用程序池设置：
  • .NET CLR版本选择无托管代码（ASP.NET Core为自托管模式，IIS仅做反向代理）。
  • 托管管道模式设为集成。
• 站点物理路径：指向ASP.NET Core项目发布后的根目录（不要指向React的build目录）。
• URL重写规则：检查发布后生成的web.config，确保包含SPA路由重写规则（若未自动生成可手动添加）：

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="SPA fallback routing" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
  

• 依赖组件检查：确保IIS已安装ASP.NET Core Hosting Bundle，这是运行ASP.NET Core应用的必要组件。

4. 发布流程验证 #

• 在Visual Studio发布时，选择文件夹作为发布目标，确认发布配置中包含ClientApp/build目录的所有文件（默认模板会自动包含，可在发布预览中检查）。
• 发布完成后，确认发布目录下存在ClientApp/build文件夹和正确的web.config文件。

测试验证 #

配置完成后重启IIS站点，访问http://localhost应能正常加载React前端页面，http://localhost/weatherforecast仍可返回正常JSON数据。

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