. net Core 5 WebApi如何包含React应用

Question

我在两个不同的项目中开发了。net 5 web api和React应用程序。现在是时候将API和React应用程序部署到IIS了，但在尝试实现这一目标时，我意识到它们必须作为相同的应用程序添加到IIS中。我希望路由设置是:

• /=比;反应应用
• /api/v1/控制器/方法=比;API端点

我的两个应用程序都有这个设置，我只是不能合并它们:/

我找不到不使用。net模板的例子。到目前为止，我已经尝试通过以下代码完成该任务(我跳过了不相关的配置代码):

services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp";
});
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();

Answer 1

我在。net 6中实现了这一点:

1 -使用package.json

中的postbuild步骤，将我的React应用的生产构建复制到Web API的wwwroot文件夹中

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"postbuild": "move build ../YourWebAPIProject/wwwroot",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

2 -更新了Web API项目中的program.cs，以包含以下

app.UseRouting();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(config => 
{
config.MapControllers();
config.MapFallbackToController("Index", "Fallback");
});

3 -添加一个回退控制器来处理反应路由

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
namespace YourNameSpace
{
[AllowAnonymous]
public class FallbackController : Controller
{
public IActionResult Index()
{
return PhysicalFile(
Path.Combine(
Directory.GetCurrentDirectory(), "wwwroot", "index.html"), 
"text/HTML");
}
}
}

这种方法允许WebAPI和React路由同时工作，从WebAPI项目中提供服务。

希望对某人有用

Answer 2

我已经设法通过添加这些行来解决它:

in ConfigureServices
if (HostingEnvironment.IsProduction())
{
services.AddSpaStaticFiles(configuration =>
configuration.RootPath ="ClientApp");
}
in Configure
app.UseHttpsRedirection();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
if (env.IsProduction())
{
app.UseSpaStaticFiles();
app.UseSpa(spa =>
{
spa.Options.DefaultPage = "/index.html";
});