如何使 ASP.NET/React 应用程序从子路径提供 SPA？

Question

我有一个从入门模板 ( )生成的股票aspnetcore和reactjs应用程序dotnet new react。我希望从根 url 的子路径提供 SPA 应用程序；例如，https://localhost:5001/counter我正在寻找的不是示例应用程序而是从https://localhost:5001/myapp/counter.

我改变了Startup.cs从：

app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
            });

对此：

app.Map(new Microsoft.AspNetCore.Http.PathString("/myapp"), appMember =>
            {
                appMember.UseSpa(spa =>
                {
                    spa.Options.SourcePath = "ClientApp";

                    if (env.IsDevelopment())
                    {
                        spa.UseReactDevelopmentServer(npmScript: "start");
                    }
                });
            });

这样的作品。如果我浏览https://localhost:5001/myapp/它似乎加载 index.html，但静态文件正试图从根路径而不是子路径加载。

需要更改什么才能使 react 应用程序使用子路径作为根？我希望它在交互式 VS 开发环境和部署时都能工作，可能在 IIS 上。似乎很接近，但我错过了一些东西。

该解决方案的示例演示可在此处获得：https : //github.com/petertirrell/mvc-spa-demo/tree/master/mvc-spa-demo

谢谢！

Answer 1

首先将应用程序移动到子路径，将其添加到 package.json 的顶部：

"homepage": "/myapp/", 

当npm start在 ClientApp 文件夹中运行时，应用程序现在正在服务http://localhost:3000/myapp

Startup.cs然后像这样改变：

首先删除

app.UseSpaStaticFiles()

然后加

        const string spaPath = "/myapp";
        if (env.IsDevelopment())
        {
            app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments(spaPath)
                               || ctx.Request.Path.StartsWithSegments("/sockjs-node"),
                client =>
            {
                client.UseSpa(spa =>
                {
                    spa.Options.SourcePath = "ClientApp";
                    spa.UseReactDevelopmentServer(npmScript: "start");
                });
            });
        }
        else
        {
            app.Map(new PathString(spaPath), client =>
            {
                // `https://github.com/dotnet/aspnetcore/issues/3147`
                client.UseSpaStaticFiles(new StaticFileOptions()
                {
                    OnPrepareResponse = ctx =>
                    {
                        if (ctx.Context.Request.Path.StartsWithSegments($"{spaPath}/static"))
                        {
                            // Cache all static resources for 1 year (versioned file names)
                            var headers = ctx.Context.Response.GetTypedHeaders();
                            headers.CacheControl = new CacheControlHeaderValue
                            {
                                Public = true,
                                MaxAge = TimeSpan.FromDays(365)
                            };
                        }
                        else
                        {
                            // Do not cache explicit `/index.html` or any other files.  See also: `DefaultPageStaticFileOptions` below for implicit "/index.html"
                            var headers = ctx.Context.Response.GetTypedHeaders();
                            headers.CacheControl = new CacheControlHeaderValue
                            {
                                Public = true,
                                MaxAge = TimeSpan.FromDays(0)
                            };
                        }
                    }
                });

                client.UseSpa(spa =>
                {
                    spa.Options.SourcePath = "ClientApp";
                    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions()
                    {
                        OnPrepareResponse = ctx => {
                            // Do not cache implicit `/index.html`.  See also: `UseSpaStaticFiles` above
                            var headers = ctx.Context.Response.GetTypedHeaders();
                            headers.CacheControl = new CacheControlHeaderValue
                            {
                                Public = true,
                                MaxAge = TimeSpan.FromDays(0)
                            };
                        }
                    };
                });
            });
        }

在例如 Azure 上首次测试更改之前，请不要忘记清除浏览器历史记录。