如何在同一ASP Core项目中托管两个不同端口的Blazor Server应用？

完全可以在单个ASP.NET Core进程中托管两个Blazor Server应用，分别通过不同端口对外提供服务，核心是通过路由隔离结合主机端口限制来实现，以下是具体步骤：

1. 配置多端口监听 #

首先让ASP.NET Core应用同时监听多个目标端口，有两种方式：

• 代码方式：在Program.cs的WebHost配置中添加.UseUrls，指定要监听的端口：

var builder = WebApplication.CreateBuilder(args);
// 同时监听8080和8081端口
builder.WebHost.UseUrls("http://*:8080", "http://*:8081");

• 配置文件方式：在appsettings.json中添加Urls节点：

{
  "Urls": "http://*:8080;http://*:8081"
}

2. 为两个Blazor应用配置独立路由与端口限制 #

在Program.cs中，分别为两个Blazor应用注册路由，并通过.RequireHost限制对应的端口：

// 注册第一个Blazor Server应用（绑定8080端口）
app.MapBlazorHub("/app1/_blazor").RequireHost("*:8080");
app.MapFallbackToPage("/app1/{*path:nonfile}", "/app1/_Host").RequireHost("*:8080");

// 注册第二个Blazor Server应用（绑定8081端口）
app.MapBlazorHub("/app2/_blazor").RequireHost("*:8081");
app.MapFallbackToPage("/app2/{*path:nonfile}", "/app2/_Host").RequireHost("*:8081");

3. 准备独立的应用结构 #

需要为两个Blazor应用创建隔离的页面和组件结构：

• 在Pages文件夹下创建app1和app2两个子目录，每个目录中放置各自的_Host.cshtml文件
• 每个_Host.cshtml需要设置正确的base href，确保资源路径不冲突：

<!-- app1/_Host.cshtml -->
@page "/app1"
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/app1/" />
    <!-- 其他头部内容 -->
</head>
<body>
    <component type="typeof(App1)" render-mode="ServerPrerendered" />
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

• 为每个应用创建独立的根组件（比如App1.razor、App2.razor），以及对应的布局、页面组件，确保路由完全隔离。

关键注意事项 #

• 两个Blazor应用的SignalR Hub路径必须不同（示例中的/app1/_blazor和/app2/_blazor），避免连接冲突
• 静态资源如果需要隔离，可以通过配置不同的静态文件路由，或者共用但确保资源命名不冲突
• 测试时分别访问http://localhost:8080/app1和http://localhost:8081/app2即可访问对应的Blazor应用

内容的提问来源于stack exchange，提问作者joa77