多项目Blazor解决方案首次部署到Azure云平台的操作方法咨询

这步是必须操作的，不然硬编码的本地地址部署到线上会调用失败：

• 替换两个Blazor项目Program.cs里硬编码的HttpClient基地址，改为从配置文件读取，修改后的代码示例：

// 读取配置中的接口地址，不用改代码即可切换本地/线上环境
var dataApiBase = builder.Configuration.GetValue<string>("DataApiBaseUrl");
var fileApiBase = builder.Configuration.GetValue<string>("FileApiBaseUrl");

// 注册调用数据接口的HttpClient
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(dataApiBase) });
// 如果需要单独的客户端调用文件接口，按以下方式注册
builder.Services.AddHttpClient("FileClient", opt => opt.BaseAddress = new Uri(fileApiBase));

• 在Blazor项目的appsettings.json里增加对应配置节点，本地调试时填localhost的接口地址即可：

{
  "DataApiBaseUrl": "你本地Data API的localhost地址",
  "FileApiBaseUrl": "你本地File API的localhost地址"
}

• EF Core相关调整：把API项目里的数据库连接字符串改为从配置读取，不要硬编码。如果需要部署时自动执行迁移，可在API项目Program.cs的app.Run()之前加以下代码：

using(var scope = app.Services.CreateScope())
{
    var dbCtx = scope.ServiceProvider.GetRequiredService<你自己的DbContext类名>();
    // 自动执行未应用的迁移
    dbCtx.Database.Migrate();
}

你需要提前在Azure门户创建好以下资源，运行时版本选和你本地开发用的.NET版本完全一致即可：

• 2个ASP.NET Core应用服务：分别对应Data Controller API、File Controller API
• 2个静态Web应用/普通应用服务：Blazor WASM推荐用静态Web应用，成本更低，也可以选普通应用服务，分别对应Admin Portal、Public Portal
• 1个Azure SQL数据库（可选，如果你用其他数据库选Azure上对应的数据库服务即可）

部署两个API项目 #

• 打开你的VS2019解决方案，右键点击Data Controller项目，选择「发布」
• 发布目标选「Azure」→「Azure应用服务」，选中你提前创建好的对应Data Controller的应用服务实例，直接点击发布即可
• 发布完成后访问该应用服务的域名+/swagger，确认接口正常运行，记录下该API的线上域名
• 重复上述步骤发布File Controller API，同样记录下它的线上域名

部署两个Blazor WASM项目 #

• 先把Blazor项目配置里的DataApiBaseUrl和FileApiBaseUrl改成你刚才记录的两个API的线上域名
• 右键点击Admin Portal项目，选择「发布」
• 如果你选的是静态Web应用，发布目标选「Azure」→「Azure静态Web应用」，选中对应的资源发布即可；如果是普通应用服务，选对应应用服务实例发布
• 重复上述步骤发布Public Portal项目

• 跨域问题：如果Blazor站点调用接口报跨域错误，在两个API项目里加CORS配置，把两个Blazor的线上域名加到允许的跨域源列表即可
• 数据库连接问题：如果接口访问报数据库连接错误，去对应API应用服务的配置页，把连接字符串改成你的Azure数据库的连接字符串即可
• 功能验证：依次测试4个站点的功能，确认页面加载正常、接口调用正常、数据库读写正常

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