GitHub Actions + Azure: Implementación continua de aplicaciones con ASP.NET Core y DotVVM

En el mundo del desarrollo de software, palabras como implementación continua siempre se encuentran presentes. En este caso, la implementación continua es una estrategia para las versiones de software, para que cualquier confirmación de código que pase la fase de pruebas de forma automatizada, se libere automáticamente en un entorno de producción, desplegando los cambios que son visibles para los usuarios del software en cuestión.

Esta es una pequeña variación de la entrega continua, pues si antes se tenía que realizar un despliegue manual, aquí en (CD) simplemente por cada merge a la rama máster se procede a realizar un despliegue de forma automática, el proceso queda de la siguiente manera:

• Control de cambios (Source Control)
• Construcción y Pruebas (Build and Tests)
• Puesta en escena (Staging)
• Despliege a Producción (Production): Última versión corriendo en la web principal

Teniendo en cuenta estas consideraciones, con la implementación continua, se automatiza todo el proceso desde la confirmación de código hasta la producción. El desencadenador entre las fases de desarrollo y entrega es automático, por lo que los cambios de código se insertan en vivo una vez que reciben la validación y pasan todas las pruebas. Esto significa que los usuarios reciben mejoras tan pronto como están disponibles.

En este articulo tutorial aprenderemos paso a paso el proceso de implementación continua de una aplicación web desarrollada con DotVVM a través de ASP.NET Core para publicarla de forma automática y continua en un recurso App Service de Azure, empleando GitHub Actions.

En relación a los Actions de GitHub, esta es una funcionalidad que nos permite crear flujos de trabajo (workflows) que se pueden utilizar para compilar, probar y desplegar código, dando la posibilidad de crear flujos de integración y despliegue continuo dentro del propio repositorio de GitHub como veremos más adelante.

Actividades:

Para llevar a cabo las actividades de despliegue continuo, tendemos tres partes importantes dentro de este proceso:

• Parte 1: Asociar el proyecto en cuestión desde Visual Studio 2019 con un repositorio en GitHub.
• Parte 2: Crear un recurso App Service en Azure.
• Parte 3: Configurar las acciones de despliegue hacia Azure en el repositorio de GitHub.

Recursos necesarios:

Para seguir paso a paso este artículo, es necesario tener en funcionamiento las siguientes herramientas:

• .NET Core SDK.
• Visual Studio 2019.
• La carga de trabajo: Desarrollo web y ASP.NET, para Visual Studio 2019.
• La extensión de DotVVM para Visual Studio 2019.
• Una cuenta de GitHub.
• Una suscripción de Azure.
• En caso de que el proyecto este asociado a una base de datos, esta deberá estar alojada en la nube.

El entorno de la solución

Los proyectos para el desarrollo de aplicaciones con ASP.NET Core y DotVVM se fundamentan en el patrón Modelo, Vista, Vistamodelo; para la comunicación entre HTML (páginas web) y C# (código fuente). La finalidad de estas partes son las siguientes:

• El modelo. — es responsable de todos los datos de la aplicación y de la lógica de negocios relacionada.
• La vista. — Representaciones para el usuario final del modelo de la aplicación. La vista es responsable de mostrar los datos al usuario y de permitir la manipulación de los datos de la aplicación.
• El Modelo-Vista o Vista-Modelo. — uno o más por vista; el modelo-vista es responsable de implementar el comportamiento de la vista para responder a las acciones del usuario y de exponer los datos del modelo fácilmente.

En este caso, existen tres proyectos para este propósito:

• DAL (Data Access Layer): para manejar la conexión y el acceso a la base de datos.
• BL (Business Layer): para el manejo de los servicios y la lógica del dominio de la aplicación.
• APP - Capa de presentación de la aplicación. En esta sección es donde tenemos los Views y Viewmodels para el diseño de las páginas web con DotVVM.

La solución en Visual Studio 2019 tiene el siguiente aspecto:

¿Deseas saber cuáles son los pasos para crear una aplicación DotVVM? Para ello puedes revisar este articulo: Pasos para crear una aplicación MVVM (Model-View-Viewmodel) con DotVVM y ASP.NET Core.

Parte 1: Asociar el proyecto desde Visual Studio 2019 con un repositorio en GitHub

Lo primero que debemos hacer es verificar que tengamos instalada la extensión de GitHub para Visual Studio 2019. Para esto podemos dirigirnos al menú de opciones en la sección Extensiones y seleccionar la opción Manejar Extensiones. En este recuadro podremos realizar la verificación.

En caso de que no se cuente con la extensión de GitHub para Visual Studio 2019, el instalador se puede encontrar en la siguiente dirección: https://visualstudio.github.com/. Para agregar la extensión, Visual Studio debe estar cerrado ya que son cambios al IDE de Microsoft que se realizan durante la instalación.

Ahora sí, dicho esto, procedemos a asociar a la solución que contiene los tres proyectos (.APP, .BL y .DAL) a un repositorio en GitHub, para ello damos clic derecho en la solución de Visual Studio y seleccionamos agregar solución al control de código fuente:

Posteriormente nos dirigimos a la vista Team Explorer y conectamos nuestra cuenta de GitHub con Visual Studio en la opción Conectar.

Luego nos dirigimos a la opción del Team Explorer: Sincronización: seleccionamos Publicar en GitHub y continuamos con las instrucciones presentadas para la creación de un nuevo repositorio.

Poco tiempo después, nuestro proyecto estará asociado al repositorio que acabamos de crear. Esto lo podemos comprobar directamente desde GitHub:

Nota: Siempre que necesitemos guardar los cambios realizados, podemos guardarlos desde la sección Cambios del Team Explorer:

Y en la sección Sincronizar es necesario confirmar los cambios de salida:

Con estos primeros pasos, nuestra aplicación con DotVVM y ASP.NET Core en Visual Studio 2019 ya se encuentra asociada a un repositorio en GitHub determinado.

Parte 2: Crear un recurso App Service en Azure

Para crear un recurso de tipo App Service en Azure, podemos dirigirnos al portal: portal.azure.com/ y luego buscar el servicio en el panel de la izquierda de Azure en donde se encuentran los recursos más utilizados de Azure o en la sección de búsqueda. En cualquiera de los dos escenarios, procedemos a crear el recurso y a la final tendremos algo como esto:

En el cual, será necesario especificar el nombre del Web App, el entorno de ejecución, que en este caso es .NET Core y su última versión la 3.1 (Julio 2020). Asimismo, es necesario especificar el sistema operativo sobre el cual se desplegará la aplicación.

El proceso de creación tomará unos cuantos segundos.

Luego debemos dirigirnos al recurso en la sección general y en el menú de opciones en la sección Obtener perfil de publicación, hacemos clic para descargar el archivo de publicación correspondiente. Este archivo nos permitirá establecer una acción en GitHub para el despliegue continuo, como veremos en la Parte 3.

Parte 3: GitHub Actions para el despliegue continuo de aplicaciones en Azure

En el entorno de GitHub, un flujo de trabajo es un proceso automatizado el cual es definido en un repositorio de GitHub. Este proceso indica a GitHub cómo crear e implementar un proyecto de aplicación de funciones en GitHub.

Teniendo en cuenta estas consideraciones, GitHub Actions permite crear flujos de trabajo de ciclo de vida de software personalizados directamente en un repositorio GitHub. En este sentido, las acciones permiten crear, probar e implementar el código directamente desde GitHub.

En nuestro caso de estudio, las acciones de GitHub nos permiten definir un flujo de trabajo para crear e implementar automáticamente el proyecto desarrollado con ASP.NET Core y DotVVM en la aplicación de funciones de Azure.

Para crear este flujo de trabajo realizaremos estas actividades:

• A. Configuración del secreto de GitHub
• B. Configurar un flujo de trabajo
• C. Implementación continua en acción

Para empezar, nos dirigiremos al repositorio de GitHub creado desde Visual Studio 2019 en la Parte 1. Con este repositorio realizaremos cada una de las actividades establecidas inicialmente.

A. Configuración del secreto de GitHub

Dentro del repositorio en cuestión, en los menús de opciones nos dirigiremos a la ruta Configuración > Secretos > Nuevo secreto.

En esta sección especificaremos el nombre del secreto, en este caso será SCM_CREDENTIALS, y el valor, el cual, corresponde al contenido del archivo de publicación descargado desde el recurso App Service en Azure, establecido en la Parte 2. Los campos tendrán un aspecto como este:

Finalmente seleccionamos en Agregar secreto.

B. Configurar un flujo de trabajo

Ahora lo que realizaremos es configurar el flujo de trabajo que permitirá establecer la funcionalidad para la implementación continua hacia Azure. Para ello, dentro del repositorio, debemos dirigirnos en la sección de Actions y seleccionar en set up a workflow yourself.

Nota: en esta sección de Actions también podemos encontrar flujos de trabajos ya establecidos para otro tipo de operaciones, por ejemplo:

Al intentar crear un flujo de trabajo por nuestra parte, un archivo YAML (.yml) definirá este flujo en la ruta de acceso /.github/workflows/ del repositorio. En esta definición se incluyen los diversos pasos y parámetros que componen el flujo de trabajo.

Dicho esto, en este apartado es donde escribiremos el código fuente para el flujo de trabajo. El código final es el siguiente:

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy ASP.NET Core with DotVVM app to Azure

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: windows-latest

    steps:
    - uses: actions/checkout@master

    - name: Set up .NET Core
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: '3.1'

    - name: Build with dotnet
      run: dotnet build --configuration Release

    - name: dotnet publish
      run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp

    - name: Deploy to Azure Web App
      uses: azure/webapps-deploy@v1
      with:
        app-name: '<APP_NAME>'
        slot-name: 'production'
        publish-profile: ${{ secrets. SCM_CREDENTIALS }}
        package: ${{env.DOTNET_ROOT}}/myapp 

A continuación, veamos las partes mas importantes de este código.

En la sección name tenemos la definición del nombre de la acción. Podemos tener múltiples acciones en un mismo archivo y múltiples archivos en la carpeta .github/workflows.

En el apartado on se define el disparador de la acción, el cual puede ser cualquier evento que desencadene flujos de trabajo, donde los más comunes son push y pull_request, pero existen muchos otros disparadores. En este caso, esa será la acción que indicará que un nuevo proceso de implementación continua deberá ser iniciado.

Luego en jobs, tenemos la definición de los trabajos. El nombre de este grupo se llama build-and-deploy. Siguiendo con esta secuencia, Github actions define tres ambientes de ejecución para sus trabajos: windows-latest , ubuntu-latest y macos-latest los cuales son definidos en el nodo runs-on y ejecutan máquinas virtuales para la ejecución de las instrucciones subsiguientes. En este caso se ha definido como windows-latest. Posteriormente, los pasos son definidos en la sección de steps:

• Como primer paso nos encontramos con la definición del tipo de flujo de trabajo, en este caso se utiliza use, el cual permite integrar en nuestro flujo con acciones definidos por terceros.

• Luego la versión ASP.NET Core es definida, en este caso, es necesario especificar en este apartado la versión de nuestro proyecto de ASP.NET Core con DotVVM. La versión en este ejemplo es la 3.1.

• Posteriormente se realiza un build al proyecto en el paso Build with dotnet.

• Después, se preparan los archivos necesarios para el despliegue con dotnet publish.

• Finalmente la implementación de estos archivos hacia Azure se lleva a cabo. En este caso, es necesario indicar el nombre del recurso App Service creado en Azure en el atributo app-name y en publish-profile se indica el nombre del secreto creado en el repositorio de GitHub, para este caso, el nombre establecido en la parte B fue SCM_CREDENTIALS.

Luego guardamos el archivo YAML y el flujo de trabajo estará listo para realizar la implementación continua cada vez que exista un cambio en el repositorio.

C. Implementación continua en acción

Al realizar algún cambio dentro del repositorio o desde Visual Studio 2019, el flujo de trabajo se ejecutará. Desde el apartado Actions en el repositorio de GitHub podemos ver como se realiza este proceso paso a paso, de acuerdo con los nombres y los pasos establecidos en el archivo YAML.

El resultado final de esta implementación es el siguiente:

¿Qué sigue?

Con este articulo hemos aprendido paso a paso como implementar de forma continua aplicaciones web con ASP.NET Core y DotVVM a través de GitHub Actions.

El código fuente del proyecto de muestra está disponible en el siguiente repositorio: DotVVM Sample CRUD.

A continuación, se listan algunos recursos adicionales que podrían ser de tu interés para seguir adquiriendo nuevos conocimientos en esta área:

• Curso gratuito y abierto en YouTube: Fundamentos de ASP.NET Core y DotVVM.
• DotVVM y ASP.NET Core: Implementación de operaciones CRUD.
• Trabajando con servicios web a través de ASP.NET Core y DotVVM.

Gracias:

Si tienes alguna inquietud o necesitas ayuda en algo particular, será un gusto poder ayudar.

Nos vemos en Twitter!! :)

¡Hasta pronto!