Vários aplicativos ASP.NET Core Blazor WebAssembly hospedados

Este artigo explica como configurar um aplicativo Blazor WebAssembly hospedado para hospedar vários aplicativos Blazor WebAssembly.

Configuração

Selecione a versão deste artigo que corresponde aos seus requisitos de hospedagem, seja hospedagem de porta/domínio (por exemplo, :5001/:5002 ou firstapp.comsecondapp.com/) ou hospedagem de subcaminho de rota (por exemplo, /FirstApp e /SecondApp ).

Os exemplos mostrados neste artigo exigem configuração adicional para:

• Acessando os aplicativos diretamente nos domínios de host de exemplo firstapp.com e secondapp.com.
• Certificados para os aplicativos cliente para habilitar a segurança TLS/HTTPS.
• Configurando o aplicativo de servidor como um aplicativo Razor Pages para os seguintes recursos:
  • Integração de componentes Razor em páginas ou exibições.
  • Componentes Razor de pré-renderização.

As configurações anteriores estão fora do escopo desse artigo. Para obter mais informações, consulte os seguintes recursos:

• Hospedar e implantar artigos
• Impor HTTPS no ASP.NET Core
• Integrar componentes principais Razor do ASP.NET com MVC ou Razor Pages em soluções hospedadas Blazor WebAssembly

Use uma Blazor WebAssemblysolução hospedada existente ou crie uma nova solução Blazor WebAssembly hospedada a partir do modelo de projeto Blazor WebAssembly, passando a opção -ho|--hosted se estiver usando a CLI do .NET ou marcando a caixa de seleção ASP.NET Core Hospedado no Visual Studio quando o projeto for criado no IDE.

Use uma pasta para a solução nomeada MultipleBlazorApps e nomeie o projeto como MultipleBlazorApps.

Crie uma nova pasta na solução chamada SecondClient. Na nova pasta, adicione um segundo aplicativo cliente Blazor WebAssembly chamado MultipleBlazorApps.SecondClient. Adicione o projeto como um aplicativo Blazor WebAssembly autônomo. Para criar um aplicativo Blazor WebAssembly autônomo, não passe a opção -ho|--hosted se estiver usando a CLI do .NET ou não use a caixa de seleção ASP.NET Core Hospedado se estiver usando o Visual Studio.

Faça as seguintes alterações no projeto MultipleBlazorApps.SecondClient:

• Copie o componente FetchData (Pages/FetchData.razor) da pasta Client/Pages para a pasta SecondClient/Pages. Essa etapa é necessária porque um aplicativo autônomo Blazor WebAssembly não chama o controlador de um projeto Server para dados meteorológicos, ele usa um arquivo de dados estáticos. Ao copiar o componente FetchData para o projeto adicionado, o segundo aplicativo cliente também faz uma chamada à API Web para a API do servidor para dados meteorológicos.
• Exclua a SecondClient/wwwroot/sample-data pasta, pois o arquivo weather.json na pasta não é usado.

A tabela a seguir descreve as pastas e os nomes de projeto da solução depois que a pasta SecondClient e o projeto MultipleBlazorApps.SecondClient são adicionados.

O projeto MultipleBlazorApps.Server atende aos dois aplicativos cliente Blazor WebAssembly e fornece dados meteorológicos para os componentes FetchData dos aplicativos cliente por meio de um controlador MVC. Opcionalmente, o projeto MultipleBlazorApps.Server também pode atender a páginas ou exibições, como um aplicativo Razor Pages tradicional ou MVC. As etapas para habilitar o serviço de páginas ou exibições são abordadas posteriormente neste artigo.

No arquivo de projeto do aplicativo cliente (MultipleBlazorApps.Client.csproj), adicione uma propriedade <StaticWebAssetBasePath> a um <PropertyGroup> com um valor de FirstApp para definir o caminho base para os ativos estáticos do projeto:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

No arquivo de projeto do aplicativo MultipleBlazorApps.SecondClient (MultipleBlazorApps.SecondClient.csproj):

• Adicione uma propriedade <StaticWebAssetBasePath> a um <PropertyGroup> com um valor de SecondApp:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Adicione uma referência de projeto para o projeto MultipleBlazorApps.Shared a um <ItemGroup>:

  <ItemGroup>
    <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
  </ItemGroup>
  

No arquivo de projeto do aplicativo de servidor (Server/MultipleBlazorApps.Server.csproj), crie uma referência de projeto para o aplicativo cliente adicionado MultipleBlazorApps.SecondClient em um <ItemGroup>:

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

"applicationUrl": "https://localhost:5001;https://localhost:5002",

No arquivo Program.cs do aplicativo do servidor, remova o seguinte código, que aparece após a chamada para UseHttpsRedirection:

• Se você planeja servir a páginas ou exibições do aplicativo do servidor, exclua a seguinte linha de código:

  - app.UseBlazorFrameworkFiles();
  

  - app.MapFallbackToFile("index.html");
  

• Se você planeja que o aplicativo do servidor atenda apenas aos aplicativos cliente Blazor WebAssembly, exclua o seguinte código:

  - app.UseBlazorFrameworkFiles();
  
  ...
  
  - app.UseRouting();
  
  - app.MapRazorPages();
  - app.MapControllers();
  - app.MapFallbackToFile("index.html");
  

  Deixe o middleware de arquivo estático no lugar:

  app.UseStaticFiles();
  

Saiba mais em UseStaticFiles, confira Arquivos estáticos de Blazor no ASP.NET Core.

Para obter mais informações em UseBlazorFrameworkFiles e MapFallbackToFile, consulte os seguintes recursos:

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (fonte de referência)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (fonte de referência)

As solicitações dos aplicativos cliente para /WeatherForecast na API do servidor são para /FirstApp/WeatherForecast ou /SecondApp/WeatherForecast dependendo de qual aplicativo cliente faz a solicitação. Portanto, as rotas do controlador que retornam dados meteorológicos da API do servidor exigem uma modificação para incluir os segmentos de caminho.

No controlador de previsão do tempo do aplicativo de servidor (Controllers/WeatherForecastController.cs), substitua a rota existente ([Route("[controller]")]) por WeatherForecastController com as rotas a seguir, que levam em conta os caminhos de solicitação do cliente:

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

Se você planeja atender a páginas do aplicativo do servidor, adicione uma página IndexRazor à pasta Pages do aplicativo de servidor:

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Se você planeja fornecer exibições MVC do aplicativo servidor, adicione uma exibição Index e um controlador Home:

Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index() => View();
}

Para obter mais informações sobre como usar os Razor componentes de qualquer um dos aplicativos cliente em páginas ou exibições do aplicativo de servidor, consulte Integrar ASP.NET componentes principais Razor com MVC ou Razor Páginas em soluções hospedadasBlazor WebAssembly.

Executar o aplicativo

Execute o projeto MultipleBlazorApps.Server:

Ativos estáticos

Quando um ativo estiver na pasta wwwroot de um aplicativo cliente, forneça o caminho de solicitação de ativo estático nos componentes:

<img alt="..." src="{PATH AND FILE NAME}" />

O espaço reservado {PATH AND FILE NAME} é o caminho e o nome do arquivo em wwwroot.

Por exemplo, a origem de uma imagem do Jeep (jeep-yj.png) na pasta vehicle de wwwroot:

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

Suporte à RCL (biblioteca de classes) Razor

Adicione a RCL (biblioteca de classes) Razor à solução como um novo projeto:

• Clique com o botão direito do mouse na solução em Gerenciador de Soluções e escolha Adicionar>Novo Projeto.
• Use o modelo de projeto Biblioteca de Classes Razor para criar o projeto. Os exemplos nesta seção usam o nome do projeto ComponentLibrary, que também é o nome do assembly da RCL. Não marque a caixa de seleção Páginas de suporte e exibições.

Para cada aplicativo cliente Blazor WebAssembly hospedado, crie uma referência de projeto para o projeto RCL clicando com o botão direito do mouse em cada projeto cliente no Gerenciador de Soluções e selecionando Adicionar>Referência de Projeto.

Use componentes da RCL nos aplicativos cliente com uma das seguintes abordagens:

• Coloque uma diretiva @using na parte superior do componente para o namespace da RCL e adicione a sintaxe Razor para o componente. O exemplo a seguir é para uma RCL com o nome do assembly ComponentLibrary:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Forneça o namespace da RCL junto com a sintaxe Razor do componente. Essa abordagem não requer uma diretiva @using na parte superior do arquivo de componente. O exemplo a seguir é para uma RCL com o nome do assembly ComponentLibrary:

  <ComponentLibrary.Component1 />
  

Quando qualquer outro ativo estático estiver na pasta wwwroot de uma RCL, faça referência ao ativo estático em um aplicativo cliente de acordo com as diretrizes em Interface do usuário Razor reutilizável em bibliotecas de classes com ASP.NET Core:

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

O espaço reservado {PACKAGE ID} é a ID do pacote da RCL. A ID do pacote terá como valor padrão o nome do assembly do projeto, se <PackageId> não for especificado no arquivo de projeto. O espaço reservado {PATH AND FILE NAME} é o caminho e o nome do arquivo em wwwroot.

O exemplo a seguir mostra a marcação de uma imagem de Jeep (jeep-yj.png) na pasta vehicle da pasta wwwroot da RCL. O exemplo a seguir é para uma RCL com o nome do assembly ComponentLibrary:

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

Recursos adicionais

• Consumir componentes do Razor de uma Razor biblioteca de classes (RCL)
• Interface do usuário do Razor reutilizável em bibliotecas de classes com o ASP.NET Core
• Isolamento da CSS Blazor do ASP.NET Core