Hospedaje e implementación de ASP.NET Core Blazor

En este artículo se explica cómo hospedar e implementar aplicaciones de Blazor.

Publicar la aplicación

Las aplicaciones se publican para implementación en la configuración de versión.

Visual Studio

1. Seleccione el comando Publicar {APPLICATION} en el menú Compilar, donde el marcador {APPLICATION} de posición nombre de la aplicación.
2. Seleccione el destino de publicación. Para publicar localmente, seleccione Carpeta. Seleccione Siguiente.
3. Al publicar localmente, acepte la ubicación de carpeta predeterminada o especifique otra ubicación. Seleccione Finalizar para guardar el perfil. Selecciona Cerrar.
4. Para limpiar la carpeta de publicación del destino antes de publicar la aplicación, seleccione Mostrar toda la configuración. Seleccione Configuración>Opciones de publicación de archivos>Eliminar todos los archivos existentes antes de publicar. Haga clic en Guardar.
5. Seleccione el botón Publicar.

Visual Studio Code y la CLI de .NET

Abra un shell de comandos en el directorio raíz del proyecto.

Use el dotnet publish comando para publicar la aplicación:

dotnet publish

Antes de .NET 8, la configuración de publicación predeterminada es Debug. Al publicar una aplicación dirigida a .NET 7 o versiones anteriores, introduzca la opción -c|--configuration en el comando junto con "Release" para publicar en la configuración Release.

dotnet publish -c Release

Al publicar la aplicación se desencadena una restauración de las dependencias del proyecto y se compila el proyecto antes de crear los recursos para la implementación. Como parte del proceso de compilación, se quitan los ensamblados y métodos que no se usan para reducir los tiempos de carga y el tamaño de descarga de la aplicación.

Vaciar la carpeta de publicación de destino

Cuando se usa el dotnet publish comando en un shell de comandos para publicar una aplicación, el comando genera los archivos necesarios para la implementación en función del estado actual del proyecto y coloca los archivos en la carpeta de salida especificada. El comando no limpia automáticamente la carpeta de destino antes de publicar la aplicación.

Para vaciar automáticamente la carpeta de destino antes de publicar la aplicación, agregue el siguiente destino de MSBuild al archivo de proyecto de la aplicación (.csproj) en el elemento raíz <Project> :

<Target Name="_RemovePublishDirBeforePublishing" BeforeTargets="BeforePublish">
  <RemoveDir Directories="$(PublishDir)" Condition="'$(PublishDir)' != ''" />
</Target>

Ubicaciones de publicación predeterminadas

• Blazor Web App: la aplicación se publica en la carpeta /bin/Release/{TARGET FRAMEWORK}/publish, donde el marcador de posición {TARGET FRAMEWORK} corresponde al marco de destino. Implemente el contenido de la carpeta publish en el host.
• Independiente Blazor WebAssembly: La aplicación se publica en la carpeta bin/Release/{TARGET FRAMEWORK}/publish o bin/Release/{TARGET FRAMEWORK}/browser-wasm/publish. Para implementar la aplicación como un sitio estático, copie el contenido de la carpeta wwwroot en el host del sitio estático.

IIS

Para hospedar una aplicación Blazor en IIS, consulte los siguientes recursos:

• Hospedaje de IIS
  • Publicación de una aplicación ASP.NET Core en IIS
  • Hospedaje de ASP.NET Core en Windows con IIS
• Almacene e implemente aplicaciones Blazordel lado del servidor de ASP.NET Core: Blazor Web App (.NET 8 o posterior) y apps Blazor Server (.NET 7 o anterior) que se ejecutan en IIS, incluido IIS con Azure Virtual Machines (VMs) que ejecutan Windows OS y Azure App Service.
• Hospede e implemente ASP.NET Core Blazor WebAssembly con IIS: aplicaciones independientes Blazor WebAssembly (todas las versiones de .NET) y aplicaciones hospedadas Blazor WebAssembly (.NET 7 o versiones anteriores).
• Hospedaje de subaplicaciones de IIS
  • Siga las instrucciones de ruta de acceso base de la aplicación antes de publicar la aplicación. Los ejemplos usan una ruta de acceso base de la aplicación de /CoolApp y muestran cómo obtener la ruta de acceso base de la configuración de la aplicación u otros proveedores de configuración.
  • Siga las instrucciones de configuración de la subaplicación en Configuración avanzada. La ruta de acceso de la carpeta de la aplicación secundaria en el sitio raíz se convierte en la ruta de acceso virtual de la aplicación secundaria. Para una ruta de acceso base de la aplicación de /CoolApp, la Blazor aplicación se coloca en una carpeta denominada CoolApp en el sitio raíz y la aplicación secundaria toma una ruta de acceso virtual de /CoolApp.

No se admite el uso compartido de grupos de aplicaciones entre aplicaciones de ASP.NET Core, incluidas las aplicaciones Blazor. Use un grupo de aplicaciones por aplicación al hospedar con IIS y evite el uso de directorios virtuales de IIS para hospedar varias aplicaciones.

Compatibilidad con el empaquetador de JavaScript

El tiempo de ejecución Blazor depende de archivos JavaScript (JS), el entorno de ejecución .NET compilado en código WebAssembly, y ensamblados gestionados empaquetados como archivos WebAssembly. Cuando se compila una Blazor aplicación, el Blazor tiempo de ejecución depende de estos archivos de diferentes ubicaciones de compilación. Debido a esta restricción, la salida de compilación de Blazor no es compatible con JS agrupadores, como Gulp, Webpack y Rollup.

Para generar la salida de compilación compatible con empaquetadores JSdurante la publicación, establezca la propiedad de MSBuild WasmBundlerFriendlyBootConfig en true en el archivo de proyecto de la aplicación:

<WasmBundlerFriendlyBootConfig>true</WasmBundlerFriendlyBootConfig>

Importante

Esta característica solo genera la salida optimizada para agrupadores al publicar la aplicación.

La salida no se puede ejecutar directamente en el navegador, pero puede ser utilizada por herramientas JS para agrupar los archivos JS junto con el resto de scripts suministrados por el desarrollador.

Cuando WasmBundlerFriendlyBootConfig está habilitado, el generado JS contiene import directivas para todos los recursos de la aplicación, lo que hace que las dependencias sean visibles para el agrupador. Muchos de los recursos no son cargados por el explorador, pero los agrupadores normalmente se pueden configurar para reconocer los recursos por su tipo de archivo para controlar la carga. Para más información sobre cómo configurar el agrupador, consulte la documentación del agrupador.

Nota

Debería ser posible agrupar la salida de la compilación asignando importaciones a ubicaciones de archivos individuales mediante un complemento personalizado del empaquetador JS. No proporcionamos este complemento en este momento.

Nota

Al reemplazar el complemento files por url, todos los archivos de JS de la aplicación, incluido el entorno de ejecución Blazor-WebAssembly (codificado en base64 en JS), se agrupan en la salida. El tamaño del archivo es bastante mayor (por ejemplo, un 300 % mayor) que cuando los archivos se preparan con el complemento files, por lo que no se recomienda usar el complemento url como práctica general al producir una salida compatible con el empaquetador al procesar el empaquetador de JS.

Las siguientes aplicaciones de ejemplo se basan en rollup. Se aplican conceptos similares al usar otros JS agrupadores.

Las aplicaciones de ejemplo de demostración para Blazor WebAssembly en una aplicación react (BlazorWebAssemblyReact) y .NET en WebAssembly en una aplicación react (DotNetWebAssemblyReact) para .NET 10 o posterior están disponibles en el Blazor repositorio de GitHub de ejemplos (dotnet/blazor-samples).

Los aspectos del almacenamiento en caché de Blazor WebAssembly se aplican a Blazor Web Apps

Blazor La guía de almacenamiento en caché de agrupaciones y el almacenamiento en caché HTTP en el nodo Blazor WebAssembly se centra en las aplicaciones independientes Blazor WebAssembly, pero varios aspectos del almacenamiento en caché del lado del cliente en estos artículos también se aplican a Blazor Web Apps que adoptan modos de representación interactiva, ya sea en WebAssembly interactiva o rendereos automáticos interactivos. Si un Blazor Web App que procesa el contenido en el lado del cliente encuentra un problema de caché con archivos estáticos o empaquetados, consulte la orientación de estos artículos para solucionar el problema.

• errores de comprobación de integridad y almacenamiento en caché de ASP.NET Core Blazor WebAssembly
• Evitar problemas de almacenamiento en caché HTTP al actualizar aplicaciones de ASP.NET Core Blazor

Blazor Server MapFallbackToPage configuración

Esta sección solo se aplica a las aplicaciones Blazor Server. MapFallbackToPage no se es compatible con Blazor Web App ni en aplicaciones de Blazor WebAssembly.

En escenarios en los que una aplicación requiere un área independiente con componentes y recursos de Razor personalizados:

• Cree una carpeta dentro de la carpeta Pages de la aplicación para contener los recursos. Por ejemplo, se crea una sección de administrador de una aplicación en una nueva carpeta denominada Admin (Pages/Admin).

• Cree una página raíz (_Host.cshtml) para el área. Por ejemplo, cree un archivo Pages/Admin/_Host.cshtml desde la página raíz principal de la aplicación (Pages/_Host.cshtml). No proporcione una directiva @page en la página _Host de administración.

• Agregue un diseño a la carpeta del área (por ejemplo, Pages/Admin/_Layout.razor). En el diseño del área independiente, establezca el <base> de la etiqueta href para que coincida con la carpeta del área (por ejemplo, <base href="/Admin/" />). Para fines de demostración, agregue ~/ a los recursos estáticos de la página. Por ejemplo:

  • ~/css/bootstrap/bootstrap.min.css
  • ~/css/site.css
  • ~/BlazorSample.styles.css (el espacio de nombres de la aplicación de ejemplo es BlazorSample)
  • ~/_framework/blazor.server.js (script Blazor)

• Si el área debe tener su propia carpeta de recursos estáticos, agregue la carpeta y especifique su ubicación en Middleware de archivos estáticos en Program.cs (por ejemplo, app.UseStaticFiles("/Admin/wwwroot")).

• Se agregan componentes Razor a la carpeta del área. Como mínimo, agregue un componente Index a la carpeta de área con la directiva @page correcta para el área. Por ejemplo, agregue un archivo Pages/Admin/Index.razor basado en el archivo Pages/Index.razor predeterminado de la aplicación. Indique el área de administración como plantilla de ruta en la parte superior del archivo (@page "/admin"). Agregue componentes adicionales según sea necesario. Por ejemplo, Pages/Admin/Component1.razor con una directiva @page y una plantilla de ruta de @page "/admin/component1.

• En Program.cs, llame a MapFallbackToPage para la ruta de acceso de solicitud del área inmediatamente antes de la ruta de acceso de la página raíz de reserva a la página _Host:

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