如何将ReactJS构建目录部署至现有ASP.NET Web API项目

这是前后端项目合并部署的常见方案，不管你用的是ASP.NET Core Web API（当前主流）还是传统的**.NET Framework Web API**，都能轻松实现，下面分场景给你详细操作步骤：

一、ASP.NET Core Web API 实现方式 #

1. 准备静态文件目录 #

• 把React执行yarn build后生成的build文件夹里的所有内容，复制到Web API项目的wwwroot目录下（如果项目里没有wwwroot文件夹，直接新建一个即可）。
• 如果你不想放到wwwroot，也可以直接把整个build文件夹放在项目根目录，后续配置中间件时指定路径就行。

2. 配置静态文件与SPA路由 #

打开项目根目录的Program.cs，添加静态文件服务和SPA fallback路由的配置，修改后的代码大概是这样：

var builder = WebApplication.CreateBuilder(args);

// 添加Web API核心服务
builder.Services.AddControllers();

var app = builder.Build();

// 配置静态文件中间件：如果用wwwroot就直接用app.UseStaticFiles()；如果用根目录的build文件夹，按下面配置
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "build")),
    RequestPath = "" // 让网站根路径直接指向React的静态文件
});

// 确保API请求能正常路由到控制器
app.MapControllers();

// 关键：添加SPA fallback路由，处理React的前端路由（比如/react-page这类非API路径）
// 所有非API、非静态文件的请求都会返回index.html，保证前端路由刷新不404
app.MapFallbackToFile("index.html");

app.Run();

3. 测试验证 #

启动Web API项目，访问网站根路径就能看到你的React应用了，同时原来的API接口（比如/api/your-endpoint）也能正常调用。

二、传统.NET Framework Web API 实现方式 #

1. 复制静态文件到项目 #

把Reactbuild文件夹里的所有内容，复制到Web API项目的根目录（或者新建一个ReactBuild文件夹专门存放）。

2. 配置静态文件处理规则 #

打开项目的Web.config，在<system.webServer>节点下添加静态文件的处理配置，确保.html、.js、.css这类静态资源能被IIS正确返回：

<system.webServer>
    <handlers>
        <!-- 保留原有的API无扩展名请求处理 -->
        <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
        <!-- 添加静态文件处理规则 -->
        <add name="HTMLHandler" path="*.html" verb="*" modules="StaticFileModule,DefaultDocumentModule" resourceType="Either" requireAccess="Read" />
        <add name="JSHandler" path="*.js" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
        <add name="CSSHandler" path="*.css" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
        <!-- 图片、字体等其他静态资源可以类似添加 -->
    </handlers>
    <!-- 设置默认首页为React的index.html -->
    <defaultDocument>
        <files>
            <add value="index.html" />
        </files>
    </defaultDocument>
</system.webServer>

3. 处理前端路由刷新404问题 #

传统.NET Framework没有Core的SPA fallback路由，需要通过URL重写来解决React前端路由刷新404的问题，在Web.config的<system.webServer>节点下添加重写规则：

<system.webServer>
    <rewrite>
        <rules>
            <rule name="ReactRouteRewrite" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <!-- 排除真实存在的文件和目录 -->
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    <!-- 排除API路径，保证API请求正常 -->
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                </conditions>
                <!-- 把所有符合条件的请求重写到index.html -->
                <action type="Rewrite" url="/index.html" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

4. 测试验证 #

运行Web API项目，访问根路径就能加载React应用，API接口也能正常调用，前端路由刷新也不会出现404了。

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