如何在ASP.NET Core 7 WebAPI上部署React应用构建文件？

步骤1：生成React应用的构建文件 #

在你的React项目根目录下执行构建命令，生成可部署的静态文件：

npm run build

执行完成后，项目根目录会生成build文件夹，包含React应用所有静态资源（HTML、CSS、JS等）。

步骤2：将React构建文件添加到ASP.NET Core项目 #

在ASP.NET Core WebAPI项目根目录下，创建名为MyReactApp的文件夹，将React build文件夹内的所有文件（含子文件夹）复制到MyReactApp中。

步骤3：修改Program.cs配置，添加静态文件托管与SPA路由支持 #

更新Program.cs代码，添加React应用的静态文件映射，并处理单页应用的路由 fallback 问题：

using Microsoft.Extensions.FileProviders;
using System.IO;

string WEB_ROOT_PATH = "Images";

var builder = WebApplication.CreateBuilder(
    new WebApplicationOptions { WebRootPath = WEB_ROOT_PATH }
);

string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
builder.Services.AddControllers();
builder.Services.AddCors(options =>
{
    options.AddPolicy(
        name: MyAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("*").AllowAnyHeader().AllowAnyMethod();
        }
    );
});

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseCors(MyAllowSpecificOrigins);

// 保留原有静态文件配置
app.UseStaticFiles();
app.UseStaticFiles(
    new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(builder.Environment.ContentRootPath, "Images")
        ),
        RequestPath = "/Upload"
    }
);

// 添加React应用的静态文件托管配置
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "MyReactApp")
    ),
    RequestPath = "/my-react-app"
});

// 处理SPA路由Fallback：访问/my-react-app下的非API路由时，返回React的index.html
app.MapFallbackToFile("/my-react-app/{*path}", "/my-react-app/index.html");

app.UseAuthorization();
app.MapControllers();

app.MapGet("/", () => "ok");
app.MapGet("/CheckLocalServer", () => "ok");

app.Run();

步骤4：配置项目文件确保构建文件被包含 #

打开.csproj文件，添加以下配置，确保发布项目时React静态文件会被复制到输出目录：

<ItemGroup>
  <Content Include="MyReactApp\**">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
  </Content>
</ItemGroup>

验证部署 #

1. 运行ASP.NET Core WebAPI项目
2. 访问domain.com/my-react-app，确认React应用正常加载
3. 验证原有API路由（如domain.com/Api/Product/GetAll）仍可正常调用

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