将Blazor WASM移动到子目录(基本目录静态文件)

Question

我想制作一个应用程序，在这个应用程序中，我需要基域上的静态页面，并且我的Blazor应用程序需要子目录。

示例：

https://example.com是我的静态页面应该在的位置(如"/features"或"/pricing"或"/faq"(

https://example.com/app应该是我的blazor网站所在的地方。

我已经看到我可以将PathString传递给app.UseBlazorFrameworkFiles，但这不起作用(app.UseBlazorFrameworkFiles(new PathString("/app")(。我的Blazor应用程序托管在带有gRPC的.NET5WebApi项目上。

有人能为我指明正确的方向吗？如何实现这一目标？

提前感谢！

Answer 1

子目录名称需要出现在四个位置。

在WebAPI项目的Startup.cs中，您需要：

app.UseBlazorFrameworkFiles(new PathString("/app"));

和在端点配置中：

endpoints.MapFallbackToFile("/app/{*path:nonfile}", "app/index.html");

在Wasm应用程序的wwwroot/index.html文件中：

<base href="/app/" />

在Wasm应用程序的CSProj文件中：

<StaticWebAssetBasePath>app</StaticWebAssetBasePath>

文档：https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#托管部署多个blazor webassembly应用

这里有一个示例实现：https://github.com/javiercn/BlazorMultipleApps

如果您在Identity中使用了默认的Wasm模板，您会发现您的客户端无法正确加载，因为捆绑在microsoft.aspx netcore.components.webassembly.authentication中的静态资产没有得到服务。要解决此问题，请将index.html中的src更改为绝对路径：

<script src="/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

身份验证功能所需的其他更改：

• 在AppSettings中，将IdentityServer客户端配置文件从"；IdentityServerSPA"；至"；SPA">
• 指定"；RedirectUri"；以及"；LogoutUri"；包括新的子目录

"Clients": {
"BlazorApp.Client": {
"Profile": "SPA",
"RedirectUri": "https://localhost:44357/app/authentication/login-callback",
"LogoutUri": "https://localhost:44357/app/authentication/logout-callback"
}
}

Answer 2

我已经看到了Daz的答案，它确实解决了调试/运行独立产品时的问题。然而，我的生产环境是基于Kubernetes的，我的入口控制器不会将请求路由到正确的位置，例如：

在我的例子中，我更改了通常的4个设置：

• 设置<基本href>在索引文件中将<基本href="app/"/>
• 设置应用程序。在servers ConfigureServices函数中使用BlazorFrameworkFiles(新PathString("/app"(
• 设置端点。MapFallbackToFile("/app/｛*path:nofile｝"，"app/index.html"(在服务器中配置功能，使用端点选项
• 添加<StaticWebAssetBasePath>应用程序到客户端的<PropertyGroup>csproj文件的部分

除了单个文件"；Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"；它是一个嵌入式文件。

由于文件需要来自服务器，因此调整客户端中的文件路径将不起作用，因为我的ingress配置无法正确路由它。对于我的应用程序，我加入了一个非常简单的中间件，如下所示：

// "/{app}/_content/{embedded-library-files}/{file}" requests need to be presented at root
app.Use(async (context, next) =>
{
HttpRequest request = context.Request;
var path = request.Path;
if (path.StartsWithSegments(new PathString("/app/_content")))
{
if (new string[] {
"/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"
}.Any(s => path.Value.EndsWith(s)))
{
request.Path = path.Value.Substring("/app".Length);
}
}
await next.Invoke();
});

每个文件夹都需要一个if子句，每个文件的列表中也需要一个条目。显然，如果您知道应该重定向整个文件夹，这可以简化。

由于重写服务器中的路径对客户端应用程序来说是不可见的，因此这个简单的更新解决了问题。

标记