Hospede e implante ASP.NET Core Blazor

Este artigo explica como hospedar e implantar aplicativos Blazor.

Publicar o aplicativo

As aplicações são publicadas para implantação na configuração de lançamento.

Visual Studio

1. Selecione o comando Publish {APPLICATION} no menu Build, onde o {APPLICATION} representa o nome da aplicação.
2. Selecione o destino de publicação . Para publicar localmente, selecione Pasta.
3. Aceite o local padrão no campo Escolha uma pasta ou especifique um local diferente. Selecione o botão Publish.

Use o comando dotnet publish para publicar o aplicativo com uma configuração de versão:

dotnet publish -c Release

A publicação da aplicação aciona uma restauração das dependências do projeto e compila o projeto antes de criar os recursos para a implantação. Como parte do processo de compilação, os métodos e assemblies não utilizados são removidos para reduzir o tamanho do download do aplicativo e os tempos de carregamento.

Locais de publicação:

• Blazor Web App: O aplicativo é publicado na pasta /bin/Release/{TARGET FRAMEWORK}/publish, onde o espaço reservado para {TARGET FRAMEWORK} é a estrutura de destino. Implante o conteúdo da pasta publish no host.
• Autónomo Blazor WebAssembly: A aplicação é publicada na pasta bin\Release\{TARGET FRAMEWORK}\browser-wasm\publish\. Para implantar o aplicativo como um site estático, copie o conteúdo da pasta wwwroot para o host do site estático.

IIS

Para hospedar um aplicativo Blazor no IIS, consulte os seguintes recursos:

• Hospedagem do IIS
  • Publicar um aplicativo ASP.NET Core no IIS
  • Host ASP.NET Core no Windows utilizando o IIS
• Hospede e implante aplicativos Blazor do lado do servidor ASP.NET Core: aplicativos de servidor em execução no IIS, incluindo o IIS com Máquinas Virtuais (VMs) do Azure executando o sistema operacional Windows e o Serviço de Aplicativo do Azure.
• hospedar e implantar ASP.NET Core Blazor WebAssembly: inclui orientações adicionais para aplicações Blazor WebAssembly hospedadas no IIS, incluindo hospedagem de site estático, arquivos web.config personalizados, reescrita de URL, subaplicações, compressão e hospedagem de arquivos estáticos do armazenamento Azure.
• Hospedagem de subaplicativos do IIS
  • Siga as orientações na seção caminho base do aplicativo para o aplicativo Blazor antes de publicar o aplicativo. Os exemplos usam um caminho base de aplicativo de /CoolApp e mostram como obter o caminho base das configurações do aplicativo ou de outros provedores de configuração.
  • Siga as diretrizes de configuração de subaplicativos em configuração avançada. O caminho da pasta do subaplicativo sob o site raiz torna-se o caminho virtual do subaplicativo. Para um caminho base da aplicação de /CoolApp, a aplicação Blazor é colocada em uma pasta chamada CoolApp no site raiz e a sub-aplicação assume um caminho virtual de /CoolApp.

Não há suporte para o compartilhamento de um pool de aplicativos entre aplicativos ASP.NET Core, inclusive para aplicativos Blazor. Use um pool de aplicativos por aplicativo ao hospedar com o IIS e evite o uso dos diretórios virtuais do IIS para hospedar vários aplicativos.

Caminho base do aplicativo

O caminho base da aplicação é o caminho raiz do URL da aplicação. O roteamento bem-sucedido em aplicativos Blazor requer configuração de estrutura para qualquer caminho de URL raiz que não esteja no caminho base padrão do aplicativo /.

Considere o seguinte ASP.NET aplicativo principal e Blazor subaplicativo:

• O aplicativo ASP.NET Core é chamado MyApp:
  • O aplicativo reside fisicamente em d:/MyApp.
  • Os pedidos são recebidos em https://www.contoso.com/{MYAPP RESOURCE}.
• Um aplicativo Blazor chamado CoolApp é um subaplicativo de MyApp:
  • O subaplicativo reside fisicamente em d:/MyApp/CoolApp.
  • Os pedidos são recebidos em https://www.contoso.com/CoolApp/{COOLAPP RESOURCE}.

Sem especificar a configuração adicional para CoolApp, o subaplicativo neste cenário não tem conhecimento de onde reside no servidor. Por exemplo, a aplicação não pode construir URLs relativas corretas para os seus recursos sem saber que está localizada no caminho de URL relativo /CoolApp/. Esse cenário também se aplica em vários cenários de hospedagem e proxy reverso quando um aplicativo não está hospedado em um caminho de URL raiz.

Contexto geral

O destino de uma etiqueta âncora (href) pode ser composto por um dos dois pontos de extremidade:

• Locais absolutos que incluem um esquema (padrão para o esquema da página se omitido), host, porta e caminho ou apenas uma barra (/) seguida pelo caminho.

  Exemplos: https://example.com/a/b/c ou /a/b/c

• Localizações relativas que contêm apenas um caminho e não começam com uma barra inclinada (/). Eles são resolvidos em relação à URL do documento atual ou ao valor da tag <base>, se especificado.

  Exemplo: a/b/c

A presença de uma barra final (/) num caminho base de aplicação configurado é significativa para calcular o caminho base para URLs da aplicação. Por exemplo, https://example.com/a tem um caminho base de https://example.com/, enquanto https://example.com/a/ com uma barra à direita tem um caminho de base de https://example.com/a.

Para as fontes de links que pertencem ao Blazor em aplicativos ASP.NET Core:

• As URLs em Razor componentes (.razor) são normalmente relativas.
• URLs em scripts, como os scripts Blazor (blazor.*.js), são relativos ao documento.

Se estiver a renderizar uma aplicação Blazor a partir de vários documentos (por exemplo, /Admin/B/C/ e /Admin/D/E/), deve levar em conta o caminho base da aplicação, caso contrário, o caminho base será diferente quando a aplicação for renderizada em cada documento e os recursos serão buscados das URLs erradas.

Existem duas abordagens para lidar com o desafio de resolver corretamente as ligações relativas:

• Mapeie os recursos dinamicamente usando o documento em que foram renderizados como raiz.
• Defina um caminho base consistente para o documento e mapeie os recursos sob esse caminho base.

A primeira opção é mais complicada e não é a abordagem mais típica, pois torna a navegação diferente para cada documento. Considere o exemplo a seguir para renderizar uma página /Something/Else:

• Renderizada como /Admin/B/C/, a página é renderizada seguindo o caminho de /Admin/B/C/Something/Else.
• Renderizada sob /Admin/D/E/, a página é renderizada no mesmo caminho de /Admin/B/C/Something/Else.

Sob a primeira abordagem, o roteamento oferece IDynamicEndpointMetadata e MatcherPolicy, que em combinação pode ser a base para a implementação de uma solução completamente dinâmica que determina em tempo de execução sobre como as solicitações são roteadas.

Para a segunda opção, que é a abordagem usual, a aplicação define o caminho base no documento e mapeia os endpoints do servidor para caminhos sob o caminho base. As orientações que se seguem adotam esta abordagem.

Blazor do lado do servidor

Mapeie o hub de SignalR de um aplicativo de Blazor do lado do servidor passando o caminho para MapBlazorHub no arquivo Program:

app.MapBlazorHub("base/path");

O benefício de usar MapBlazorHub é que você pode mapear padrões, como "{tenant}" e não apenas caminhos concretos.

Você também pode mapear o hub SignalR quando a aplicação estiver numa pasta virtual com um pipeline de middleware ramificado . No exemplo a seguir, as solicitações para /base/path/ são tratadas pelo hub de SignalR do Blazor:

app.Map("/base/path/", subapp => {
    subapp.UsePathBase("/base/path/");
    subapp.UseRouting();
    subapp.UseEndpoints(endpoints => endpoints.MapBlazorHub());
});

Configure a etiqueta <base>, de acordo com o guia na seção Configurar o caminho base da aplicação.

Autônomo Blazor WebAssembly

Em um aplicativo Blazor WebAssembly autónomo, somente a etiqueta <base> é configurada, conforme as orientações na seção Configurar o caminho base do aplicativo.

Configurar o caminho base do aplicativo

Para fornecer configuração para o caminho base do aplicativo Blazorhttps://www.contoso.com/CoolApp/, defina o caminho base do aplicativo (<base>), que também é chamado de caminho raiz relativo.

Ao configurar o caminho base do aplicativo, um componente que não está no diretório raiz pode construir URLs relativas ao caminho raiz do aplicativo. Componentes em diferentes níveis da estrutura de diretórios podem criar links para outros recursos em locais em todo o aplicativo. O caminho base do aplicativo também é usado para intercetar hiperlinks selecionados em que o destino href do link está dentro do espaço URI do caminho base do aplicativo. O componente Router lida com a navegação interna.

Coloque a tag <base> na marcação <head> (localização do conteúdo <head>) antes de quaisquer elementos que possuam valores de atributo em formato de URL, como os atributos href dos elementos <link>.

Em muitos cenários de hospedagem, o caminho de URL relativo para o aplicativo é a raiz do aplicativo. Nesses casos padrão, o caminho base de URL relativo do aplicativo / é configurado como <base href="/" /> em <head> conteúdo.

Observação

Em alguns cenários de hospedagem, como Páginas do GitHub e subaplicativos do IIS, o caminho da base do aplicativo deve ser definido como o caminho de URL relativo do servidor do aplicativo.

• Use uma das seguintes abordagens em uma aplicação do lado do servidor Blazor:

  • Opção 1: Use a tag <base> para definir o caminho base do aplicativo (local do conteúdo <head>):

    <base href="/CoolApp/">
    

    É necessária a barra à direita.

  • Opção 2: Chame UsePathBaseprimeiro no pipeline de processamento de pedidos da aplicação (Program.cs) imediatamente após a construção do WebApplicationBuilder (builder.Build()) para configurar o caminho base para qualquer middleware subsequente que interaja com o caminho do pedido.

    app.UsePathBase("/CoolApp");
    

    Chamar UsePathBase é recomendado quando você também deseja executar o aplicativo Blazor Server localmente. Por exemplo, forneça o URL de inicialização em Properties/launchSettings.json:

    "launchUrl": "https://localhost:{PORT}/CoolApp",
    

    O marcador {PORT} no exemplo anterior é a porta que corresponde à porta segura na configuração do caminho applicationUrl. O exemplo a seguir mostra o perfil de inicialização completo de um aplicativo na porta 7279:

    "BlazorSample": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7279;http://localhost:5279",
      "launchUrl": "https://localhost:7279/CoolApp",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
    }
    

    Para obter mais informações sobre o arquivo launchSettings.json, consulte Usar vários ambientes no ASP.NET Core. Para obter informações adicionais sobre os caminhos base da app Blazor e alojamento, consulte <base href="/" /> ou a alternativa de tag de base para integração MVC Blazor (dotnet/aspnetcore #43191).

• Blazor WebAssembly autónomos (wwwroot/index.html):

  <base href="/CoolApp/">
  

  É necessária a barra à direita.

Observação

Ao usar WebApplication (consulte Migrar do ASP.NET Core 5.0 para o6.0), app.UseRouting deve ser chamado após UsePathBase para que o Routing Middleware possa observar o caminho modificado antes de combinar rotas. Caso contrário, as rotas são correspondidas antes que o caminho seja reescrito por UsePathBase, conforme descrito nos artigos Middleware Ordering e Routing.

Não prefixe links em toda a aplicação com uma barra oblíqua. Evite o uso de um separador de segmento de caminho ou use a notação de caminho relativo com barra de pontos (./):

• ❌ Incorreto: <a href="/account">
• ✔️ Correto: <a href="account">
• ✔️ Correto: <a href="./account">

Em solicitações de API da Web Blazor WebAssembly com o serviço HttpClient, confirme se os auxiliares JSON (HttpClientJsonExtensions) não prefixam URLs com uma barra diagonal (/):

• ❌ Incorreto: var rsp = await client.GetFromJsonAsync("/api/Account");
• ✔️ Correto: var rsp = await client.GetFromJsonAsync("api/Account");

Não prefixe links relativos do Gestor de Navegação com uma barra. Evite o uso de um separador de segmento de caminho ou use a notação de caminho relativo dot-slash (./) (Navigation é um NavigationManagerinjetado ):

• ❌ Incorreto: Navigation.NavigateTo("/other");
• ✔️ Correto: Navigation.NavigateTo("other");
• ✔️ Correto: Navigation.NavigateTo("./other");

Em configurações típicas para hospedagem do Azure/IIS, a configuração adicional geralmente não é necessária. Em alguns cenários de alojamento não IIS e alojamento de proxy reverso, pode ser necessária configuração adicional do Middleware de Ficheiros Estáticos:

• Para servir arquivos estáticos corretamente (por exemplo, app.UseStaticFiles("/CoolApp");).
• Para servir o script Blazor (_framework/blazor.*.js). Para mais informações, consulte ASP.NET Core Blazor ficheiros estáticos.

Para um aplicativo Blazor WebAssembly com um caminho de URL relativo que não é a raiz (por exemplo, <base href="/CoolApp/">), o aplicativo não consegue encontrar os seus recursos quando é executado localmente. Para superar este problema durante o desenvolvimento local e os testes, pode fornecer um argumento de base de caminho que corresponda ao valor href da marca <base> em tempo de execução. Não inclua uma barra final. Para passar o argumento base do caminho ao executar o aplicativo localmente, execute o comando dotnet watch (ou dotnet run) do diretório do aplicativo com a opção --pathbase:

dotnet watch --pathbase=/{RELATIVE URL PATH (no trailing slash)}

Para um aplicativo Blazor WebAssembly com um caminho de URL relativo de /CoolApp/ (<base href="/CoolApp/">), o comando é:

dotnet watch --pathbase=/CoolApp

Se preferir configurar o perfil de inicialização do aplicativo para especificar o pathbase automaticamente em vez de manualmente com dotnet watch (ou dotnet run), defina a propriedade commandLineArgs em Properties/launchSettings.json. O seguinte também configura o URL de inicialização (launchUrl):

"commandLineArgs": "--pathbase=/{RELATIVE URL PATH (no trailing slash)}",
"launchUrl": "{RELATIVE URL PATH (no trailing slash)}",

Usando CoolApp como exemplo:

"commandLineArgs": "--pathbase=/CoolApp",
"launchUrl": "CoolApp",

Usando dotnet watch (ou dotnet run) com a opção --pathbase ou uma configuração de perfil de inicialização que define o caminho base, o aplicativo Blazor WebAssembly responde localmente em http://localhost:port/CoolApp.

Para obter mais informações sobre o arquivo launchSettings.json, consulte Usar vários ambientes no ASP.NET Core. Para obter informações adicionais sobre Blazor caminhos de base de aplicativo e hospedagem, consulte <base href="/" /> ou alternativa de marca base para integração Blazor MVC (dotnet/aspnetcore #43191).

Obter o caminho base do aplicativo a partir da configuração

As diretrizes a seguir explicam como obter o caminho a partir de um arquivo de configurações de aplicativo para a etiqueta <base> em diferentes ambientes .

Adicione o arquivo de configurações do aplicativo ao aplicativo. O exemplo a seguir é para o ambiente Staging (appsettings.Staging.json):

{
  "AppBasePath": "staging/"
}

Numa aplicação do lado do servidor Blazor, carregue o caminho base a partir da configuração em <head> conteúdo:

@inject IConfiguration Config

...

<head>
    ...
    <base href="/@(Config.GetValue<string>("AppBasePath"))" />
    ...
</head>

Como alternativa, um aplicativo do lado do servidor pode obter o valor da configuração para UsePathBase. Coloque o código a seguir primeiro no pipeline de processamento de solicitações do aplicativo (Program.cs) imediatamente após o WebApplicationBuilder ser criado (builder.Build()). O exemplo a seguir usa a chave de configuração AppBasePath:

app.UsePathBase($"/{app.Configuration.GetValue<string>("AppBasePath")}");

Em um aplicativo Blazor WebAssembly do lado cliente:

• Remova a tag <base> do wwwroot/index.html:

  - <base href="..." />
  

• Forneça o caminho base do aplicativo por meio de um componente HeadContent no componente App (App.razor):

  @inject IConfiguration Config
  
  ...
  
  <HeadContent>
      <base href="/@(Config.GetValue<string>("AppBasePath"))" />
  </HeadContent>
  

Se não houver nenhum valor de configuração para carregar, por exemplo, em ambientes não-testados, o href anterior é resolvido para o caminho raiz /.

Os exemplos nesta seção se concentram em fornecer o caminho base do aplicativo a partir das configurações do aplicativo, mas a abordagem de ler o caminho do IConfiguration é válida para qualquer provedor de configuração. Para obter mais informações, consulte os seguintes recursos:

• ASP.NET de configuração do Core Blazor
• Configuração no ASP.NET Core

Blazor Server MapFallbackToPage configuração

Esta secção aplica-se apenas a aplicações Blazor Server. MapFallbackToPage não é suportado nas aplicações Blazor Web Appe Blazor WebAssembly.

Em cenários em que um aplicativo requer uma área separada com recursos personalizados e componentes Razor:

• Crie uma pasta dentro da pasta Pages do aplicativo para armazenar os recursos. Por exemplo, uma seção de administrador de um aplicativo é criada em uma nova pasta chamada Admin (Pages/Admin).

• Crie uma página raiz (_Host.cshtml) para a área. Por exemplo, crie um arquivo Pages/Admin/_Host.cshtml a partir da página raiz principal do aplicativo (Pages/_Host.cshtml). Não forneça uma diretiva @page na página Admin _Host.

• Adicione um layout à pasta da área (por exemplo, Pages/Admin/_Layout.razor). No layout da área separada, defina a etiqueta <base>href para corresponder à pasta da área (por exemplo, <base href="/Admin/" />). Para fins de demonstração, adicione ~/ aos recursos estáticos na página. Por exemplo:

  • ~/css/bootstrap/bootstrap.min.css
  • ~/css/site.css
  • ~/BlazorSample.styles.css (o namespace do aplicativo de exemplo é BlazorSample)
  • ~/_framework/blazor.server.js (Blazor script)

• Se a área deve ter a sua própria pasta de ficheiros estáticos, adicione a pasta e especifique a sua localização ao Middleware de Ficheiro Estático em Program.cs (por exemplo, app.UseStaticFiles("/Admin/wwwroot")).

• Os componentes Razor são adicionados na pasta da área. No mínimo, adicione um componente Index à pasta da área com a diretiva correta @page para a área. Por exemplo, adicione um arquivo Pages/Admin/Index.razor com base no arquivo Pages/Index.razor padrão do aplicativo. Indique a área Admin como o modelo de rota na parte superior do arquivo (@page "/admin"). Adicione componentes adicionais conforme necessário. Por exemplo, Pages/Admin/Component1.razor com uma diretiva @page e um modelo de rota de @page "/admin/component1.

• No Program.cs, chame MapFallbackToPage para o caminho de solicitação da área imediatamente antes do caminho da página raiz de fallback para a página _Host:

  ...
  app.UseRouting();
  
  app.MapBlazorHub();
  app.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/Admin/_Host");
  app.MapFallbackToPage("/_Host");
  
  app.Run();
  

Implantação

Para obter diretrizes de implantação, consulte os seguintes tópicos:

• Alojar e publicar ASP.NET Core Blazor WebAssembly
• Hospede e implante aplicativos Blazor do lado do servidor ASP.NET Core