CI/CD para aplicaciones Blazor WebAssembly en Azure Devops

Azure DevOps es la mejor suite de aplicaciones para incorporar la cultura DevOps en un proyecto o empresa. Azure DevOps contiene algunas Micro-aplicaciones asociadas a cada etapa del ciclo de software.

Revisemos cada MicroApps en Azure Devops,

• Azure Boards: herramienta relacionada con agilismo y la planificación de proyectos
• Azure Repos: herramienta para administrar repositorios mediante Git o TFS
• Azure Pipelines: herramienta para crear pipelines e implementar integración continua y despliegue continuo
• Azure Test Plan: herramienta para administrar pruebas manuales y de automatización
• Azure Artifacts: herramienta para administrar y entregar paquetes o bibliotecas internas

En este artículo, mantendremos el enfoque en Azure Pipelines, crearemos un pipeline para verificar, compilar y publicar una aplicación Blazor WebAssembly.

Una aplicación Blazor WebAssembly es una aplicación de single page application (SPA), lo que significa que podemos utilizar un servicio para este tipo de aplicación para alojar nuestro sitio web. Azure tiene un servicio denominado Azure Static Web Apps que admite React, Vue.js, Blazor WebAssembly y otras tecnologías.

Primero, necesitamos tener un repositorio con una aplicación Blazor WebAssembly usando .NET 6 o 7 dentro de azure devops.

Luego crearemos un pipeline para esta aplicación, ya que Blazor es una aplicación dotnet podemos usar la CLI dotnet para ejecutar las pruebas unitarias, compilar y publicar el proyecto.

Al crear nuestro primer pipeline podemos seleccionar Azure Repos Git:

Y seleccionemos el repositorio que contiene el código relacionado con nuestra aplicación:

Podemos seleccionar en la configuración “ASP.NET Core” y automáticamente tendremos los pasos normales para cualquier aplicación .NET o simplemente un trabajo vacío.

También necesitamos agregar una tarea para publicar los artefactos para usarlos durante la implementación. Este es el archivo YAML final:

# ASP.NET Core
# Build and test ASP.NET Core projects targeting .NET Core.
# Add steps that run tests, create a NuGet package, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/dotnet-core

trigger:
- main

pool:
  vmImage: ubuntu-latest

variables:
  buildConfiguration: 'Release'

steps:
- task: DotNetCoreCLI@2
  displayName: Publish
  inputs:
    command: publish
    publishWebProjects: True
    arguments: '--configuration $(BuildConfiguration) --output $(build.artifactstagingdirectory)'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

El artifactName es “drop” necesitamos usar este nombre

Ejecutemos el pipeline y vemos si todo funciona como se esperaba. Podemos utilizar la opción guardar y ejecutar.

Necesitamos esperar y ver un estado verde cuando termine el Job para confirmar si el pipeline está funcionando bien:

Ahora vayamos a la sección de releases y creemos un nuevo pipeline para publicar la aplicación en Azure y manejar los releases que se van generando con cada cambio y nueva versión generada por el primer pipeline creado.

Seleccionemos el artefacto del proyecto actual y el pipeline creada anteriormente:

A continuación, agreguemos una nueva etapa y seleccionemos un job vacío (Empty Job):

Veremos algo como la siguiente figura, podemos habilitar el despliegue continuo utilizando la opción (que parece un rayo) en la sección Artefactos

Podemos habilitar el pipeline ahora y cerrar las ventanas. Luego podemos seleccionar la opción “1 trabajo, 1 tarea” en la sección de Stages para editar el job actual:

Veremos el Agent Jon y ninguna tarea en la lista, por ahora seleccionemos Azure pipelines como Agent pool y ubuntu-latest en el Agent Specification:

En este punto, necesitamos crear un nuevo sitio para alojar nuestra aplicación Blazor. Podemos ir a Azure y crear una nueva Azure Static Web App. Este servicio es fácil de usar y funciona con muchos frameworks SPA (React.js, Vue.js, Angular y Blazor).

Podemos crear un nuevo sitio, seleccionar el tipo de plan Free y en la sección de Deployment details, seleccionar Other. Finalmente, podemos hacer clic en Review + create para confirmar y crear este sitio.

Ahora podemos ir a este nuevo recurso y obtener el Deployment token, esto es lo único que necesitamos tener para desplegar nuestro sitio web de Azure DevOps a Azure.

Regresamos al pipeline en la sección de releases y agreguemos una nueva tarea para implementar en Static Web App:

En la configuración, podemos omitir la compilación para la aplicación y la API y podemos establecer el token generado en Azure para nuestro sitio web, en el directorio de trabajo seleccionemos la carpeta donde se publica su aplicación:

workingDirectory: $(System.DefaultWorkingDirectory)/_BlazorApp/drop/s/wwwroot

app_location: /

Ejemplo de YAML:

steps:
- task: AzureStaticWebApp@0
  displayName: 'Static Web App: '
  inputs:
    workingDirectory: '$(System.DefaultWorkingDirectory)/_BlazorApp/drop/s/wwwroot'
    app_location: /
    skip_app_build: true
    skip_api_build: true
    is_static_export: false
    verbose: false
    azure_static_web_apps_api_token: 'ec0a21e27b48df7f44fba9c22b9f8deea20f114a83fc82f6ee5606711ececf181-05996584-e65e-4296-8e92-XXXXXXXXXXXXXXX'

Podemos omitir la compilación de la aplicación y la compilación de la API:

NOTA: con respecto al token para implementar nuestra aplicación en Azure, podemos usar una variable en lugar de establecer el token directamente en el Job, también podemos usar un servicio como Azure key vault para guardar este valor.

Ahora podemos guardar y crear la primera versión para comprobar si la implementación en Azure funciona correctamente.

Tras guardar el Job y crear el primer release veremos algo así como la siguiente figura:

Podemos navegar al sitio en Azure para comprobar si el sitio se está cargando correctamente:

Ahora con esta configuración tenemos integración continua y despliegue continue, lo que significa que podemos desplegar una nueva versión simplemente confirmando los cambios en el repositorio o fusionando un pull request con la rama seleccionada en el pipeline.

Para más información, consultar el proyecto en el siguiente enlace: 

https://dev.azure.com/miguelteheran/Blazor%205/

Referencia

https://www.c-sharpcorner.com/article/cicd-for-blazor-applications-in-azure-devops/