Saltar al contenido

Blog técnico | Conteniendo aplicaciones Blazor

Blazor es un nuevo marco de trabajo de Microsoft para crear aplicaciones interactivas en C#. En este artículo, vamos a mostrar cómo puedes poner tus aplicaciones Blazor en contenedores para su desarrollo e implementación. Usaremos el Core CLI de .NET, así que los comandos mostrados funcionarán igual sin importar la plataforma.

Blazor Hosting Models

Hay dos modelos de hospedaje para el desarrollo de Blazor, y sus requerimientos son diferentes, así que dividiré este post basado en esos dos modelos:

Blog técnico | Conteniendo aplicaciones Blazor
Blog técnico | Conteniendo aplicaciones Blazor

Blazor WebAssembly : Un marco de trabajo web para ejecutar del lado del cliente en un navegador con WebAssembly.

Blazor Server : Un marco de trabajo web que se ejecuta en el lado del servidor y utiliza SignalR para comunicarse con el navegador.

Puedes encontrar más información sobre los diferentes modelos de alojamiento aquí.

Modelo de alojamiento de la Asamblea Web

El objetivo del modelo de alojamiento de WebAssembly es alojar toda la aplicación dentro del navegador. Los artefactos de una aplicación Blazor WebAssembly son HTML, JavaScript, una versión del .NET Runtime, y sus binarios. Todos se ejecutan dentro del navegador, así que puedes alojar esto como un sitio web estático. No se requiere ningún runtime de servidor o intérprete.

Blazor WebAssembly todavía está en modo de vista previa, por lo que debe instalar manualmente la plantilla para crear aplicaciones de Blazor WebAssembly. Esto puede haber cambiado en el momento en que leas esto. Si las plantillas de Blazor aún no están disponibles, puedes ejecutar lo siguiente desde la línea de comandos para obtener la versión de vista previa:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2

Ahora que tienes la plantilla instalada puedes crear una nueva aplicación WebAssembly con el siguiente comando .NET CLI:

dotnet new blazorwasm -o wasmtest

Esto creará una nueva aplicación de Blazor WebAssembly con el nombre de «wasmtest». Puedes cambiar «wasmtest» por el nombre de tu proyecto.

Cuando hayas construido y probado tu aplicación, estará lista para ser publicada. Ejecute el comando «dotnet publish»:

dotnet publish -c Release

y deberías ver una pantalla como esta:

Aquí podemos ver las rutas de los artefactos si queremos ejecutar esto como una aplicación .NET Core (dotnet run)

/home/jeremy/Projects/wasmtest/bin/Debug/netstandard2.1/publish/

Aquí está una de las características más interesantes: archivos estáticos como artefactos. También tenemos una carpeta de salida de Blazor. Esta carpeta es donde se publican los archivos estáticos.

En mi caso, con un nombre de proyecto de wasmtest (el suyo será diferente), la carpeta se encuentra aquí:

bin/Release/netstandard2.1/publish/wasmtest/dist

La carpeta «dist» sólo contiene archivos estáticos:

Puedes ejecutar este archivo desde cualquier host web estático. Crearé una nueva carpeta para el contenedor, y una carpeta de artefactos, y luego copiaré todo de la carpeta dist a artefactos.

mkdir -p ~/Projects/wasmcontainer/artifactscp -r ~/Projects/wasmtest/bin/Release/netstandard2.1/publish/wasmtest/dist/* ~/Projects/wasmcontainer/artifacts/

En nuestra carpeta wasmcontainer , crearemos un simple Dockerfile:

FROM nginxCOPY artefactos /usr/share/nginx/html

Este archivo extrae la imagen nginx, y luego copia los archivos de los artefactos en su máquina a /usr/share/nginx/html (carpeta predeterminada nginx) en el sistema de archivos de su contenedor. Hará esto cada vez que se construya la imagen, así que si haces cambios en los artefactos, tendrás que reconstruir la imagen.

Esto es todo lo que necesitamos para poner en marcha los archivos estáticos de Blazor WebAssembly. Ahora crearemos una imagen:

docker build -t jeremy/wasmtest:latest .

Entonces podemos correrlo:

docker run --nombre wasm1 -p 80:80 -d jeremy/wasmtest:latest

Esto hace funcionar el contenedor como un demonio, así que funcionará hasta que decidas detenerlo.

Ahora tenemos un servidor nginx estático que ejecuta nuestra aplicación en el puerto 80. Puedes navegar hasta él y verlo en tu máquina local:

En un entorno de producción, querrá hacer mucho más con la configuración de NGINX. Sin embargo, estos pasos alojarán su aplicación Blazor WebAssembly en un contenedor para el desarrollo.

Modelo de alojamiento de servidores Blazor

Para el modelo de servidor, necesitas el .NET Core runtime 3.0 o superior. Se crea una aplicación de servidor Blazor con el modelo de servidor blazor . En este caso estoy nombrando la prueba de servidor de la aplicación.

dotnet nuevo blazorserver -o servertest

Una vez que hayas terminado de modificar la aplicación, y estés listo para desplegarla, ejecuta el siguiente comando para publicar:

dotnet publish -c Release

Los artefactos serán localizados en:

/app/bin/Release/netcoreapp3.1/publish/

Crearemos otra carpeta como lo hicimos antes:

mkdir -p ~/Projects/servercontainer/artifactscp -r bin/Release/netcoreapp3.1/publish/* ~/Projects/servercontainer/artifacts/

Aquí está el aspecto de los artefactos:

Ahora crearemos otro Dockerfile en nuestra carpeta del contenedor del servidor que se ve así:

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1COPY artifacts/ app/ENTRYPOINT ["dotnet", "app/servertest.dll"]

Este archivo es sólo una línea más que nuestro último Dockerfile. Trae la imagen en tiempo de ejecución de aspnet, copia sobre los artefactos, y luego establece un punto de entrada para la aplicación, que en mi caso es servertest.dll porque el nombre del proyecto es servertest.

Podemos construir nuestra imagen con el siguiente comando:

docker build -t jeremy/servertest:latest .

Debería verse así:

Y lo ejecutaremos con el siguiente comando:

docker run --name server1 -p 80:80 -d jeremy/servertest:latest

De nuevo estamos ejecutando esto como un demonio para que funcione hasta que el contenedor se detenga. Esto ejecutará su aplicación Blazor Server en el puerto 80:

¡Es así de fácil!

Conclusión

Es un proceso sencillo para construir contenedores para el despliegue de Blazor. Es esencial tener en cuenta los diferentes modelos de alojamiento para cada uno y construir sus imágenes en consecuencia. Las imágenes que se muestran aquí están bien para el desarrollo y las pruebas; sin embargo, si quieres desplegarlas en un entorno de producción, debes hacer lo siguiente:

  • Usar SSL en lugar de abrir por el puerto 80
  • Configurar NGINX para Blazor WASM (optimización de cacheo al menos)
  • Configurar NGINX u otro proxy inverso para sus aplicaciones Blazor Server

Espero que este post haya ayudado a mostrar cómo contener sus aplicaciones Blazor.

Categorías: technicalTags: docker, c-sharp