独立创建的.NET与React项目Windows主机部署问题求助

问题场景 #

作为部署新手，通过Plesk管理Windows主机，采用以下部署结构：

• .NET后端API发布文件置于httpdocs根目录
• React构建文件放在httpdocs/frontend子文件夹

遇到的问题：

1. 可正常访问Swagger，但访问/Login这类React路由时返回404
2. 若将React文件移至httpdocs根目录、.NET文件放子文件夹，UI可显示但无法调用后端API

现有配置 #

web.config #

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- React Routes -->
        <rule name="React Routes" stopProcessing="true">
          <match url="^(?!backend/|api/|swagger/|frontend/|.*\..*$).*$" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/frontend/index.html" />
        </rule>
        <!-- API Routes -->
        <rule name="API Routes" stopProcessing="true">
          <match url="^api/(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/{R:0}" />
        </rule>
      </rules>
    </rewrite>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="dotnet" arguments="./myapp.dll" stdoutLogEnabled="true" stdoutLogFile="./logs/stdout" hostingModel="InProcess">
      <environmentVariables>
        <environmentVariable name="ASPNETCORE_ENVIRONMENT" value="Production" />
      </environmentVariables>
    </aspNetCore>
    <httpErrors errorMode="Detailed" />
  </system.webServer>
</configuration>

program.cs #

...
app.UseStaticFiles();
app.UseHttpsRedirection();
app.UseCors("corsapp");

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

app.MapFallbackToFile("index.html");

app.MapControllers();

app.Run();

React配置 #

• package.json："homepage": "./"
• 路由使用BrowserRouter
• index.js将应用挂载到根DOM节点

解决思路 #

1. 配置.NET静态文件访问frontend文件夹 #

修改program.cs，添加对frontend目录的静态资源支持，确保.NET能正确返回React的静态文件：

// 先添加frontend文件夹的静态文件服务
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "frontend")),
    RequestPath = "/frontend"
});
// 保留根目录的静态文件服务（用于.NET的wwwroot等资源）
app.UseStaticFiles();

app.UseHttpsRedirection();
app.UseCors("corsapp");

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

// 注释掉原有的Fallback规则，由IIS重写处理前端路由
// app.MapFallbackToFile("index.html");

app.MapControllers();

app.Run();

2. 修正IIS重写规则 #

调整web.config中的React Routes规则，移除无用的backend/排除项，确保所有非API、非Swagger、非静态文件的请求都转发到/frontend/index.html：

<rule name="React Routes" stopProcessing="true">
  <match url="^(?!api/|swagger/|frontend/|.*\..*$).*$" />
  <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
  </conditions>
  <action type="Rewrite" url="/frontend/index.html" />
</rule>

3. 确保React路由与API请求路径正确 #

• React路由使用BrowserRouter时无需设置basename，因为IIS已将根路径请求重写到/frontend/index.html
• 所有API请求使用绝对路径/api/xxx，确保被IIS重写规则转发到.NET后端，例如：

  fetch('/api/auth/login', { method: 'POST', body: ... })
  

4. 验证部署文件结构 #

确保文件层级正确：

httpdocs/
├─ myapp.dll
├─ web.config
├─ appsettings.json
├─ wwwroot/
├─ frontend/
│  ├─ index.html
│  ├─ static/
│  │  ├─ css/
│  │  ├─ js/
│  ├─ asset-manifest.json
│  ├─ ...其他React构建文件

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