iis .NET Core 5 WebApi如何包含React应用程序

3ks5zfa0  于 2022-11-12  发布在  .NET
关注(0)|答案(2)|浏览(163)

我已经在两个不同的项目中开发了.NET5 Web API和React应用程序。现在是时候将API和React应用程序部署到IIS中了,但在尝试实现这一点时,我意识到必须将它们作为同一个应用程序添加到IIS中。我希望路由设置为:

  • / =〉React应用程序
  • /api/v1/控制器/方法=〉API端点

我的两个应用程序都单独具有此设置,我无法合并它们:/
我找不到不使用dotnet模板的例子。到目前为止,我已经尝试通过以下代码来完成(我跳过了不相关的配置代码):

services.AddSpaStaticFiles(configuration =>
                    {
                        configuration.RootPath = "ClientApp";
                    });

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
pes8fvy9

pes8fvy91#

我已经设法解决它添加以下行:

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";
                    });
6rqinv9w

6rqinv9w2#

我在.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项目提供服务。
希望这对某人有用

相关问题