asp.net - 如何使 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/", 

在 ClientApp 文件夹中运行 npm start 时，应用程序现在正在提供 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)
                            };
                        }
                    };
                });
            });
        }

在第一次测试更改之前，不要忘记清除浏览器历史记录，例如蔚蓝。