Construye y publica tu web app Angular hacia Azure con Github Actions

8 minutes read
Development • DevOps • Cloud
github • github actions • azure • blob storage • static website • angular • devops

Construye y despliega tu web app Angular hacia Azure con Github Actions

Construye y despliega tu web app Angular hacia Azure con Github Actions

Cuando desarrollamos aplicaciones web es importante pensar mas allá del desarrollo en sí, debemos pensar en donde será hospedada nuestra aplicación y como va ser el proceso de despliegue. En Azure podemos hospedar aplicaciones web estaticas con Azure Blob Storage, estas aplicaciones pueden estar desarrolladas con cualquier libreria o framework de frontend como: Angular, React, Vue, Svelte, etc.

En este blog se especifica el proceso de construccion de un proyecto de Angular, pero puede sustituirse ese proceso por el proceso realizado en el framework o librerias que utilices, lo cual solo cambiaría algunos pasos.

En este blog aprenderas lo siguiente:

  • Configurar Azure Blob Storage para hospedar tu aplicación web estática.
  • Crear un workflow de Github Actions.
  • Configurar el workflow para construir tu aplicación de Angular.
  • Conectar tu worflow de Github Actions a Blob Storage por medio de Service Principal en Azure.
  • Utilizar los “Secrets” de Github para almacenar datos sensibles.
  • Configurar el workflow para desplegar tu aplicación de Angular a Azure Blob Storage.

Prerequisitos:

  • Tener Angular Instalado.
  • Tener una subscripción activa de Azure.
  • Tener una cuenta de Github.

Crea tu proyecto Angular y tu repo en Github

Crea un proyecto de Angular.

ng new my-app-github

cd my-app-github

Localmente puedes construir los assets de tu app.

npm run build

Ejecuta localmente la App de Angular.

npm start

Ahora debes crear tu repositorio en GitHub.

Enlaza tu proyecto local con un repo de GitHub a la carpeta del codigo (la url del repo debe tener el nombre de tu usuario y proyecto) y sube tu proyecto a Github.

git remote add origin git@github.com:josema88/my-app-ejemplo1.git
git branch -M main
git push -u origin main

Crea y configura el recurso de Azure Blob Storage

Utiliza Azure para hospedar tu aplicacion. Dentro de tu subscripción activa debes crear una Cuenta de Almacenamiento (Storage Account) ya que este tipo de recurso es el que podemos utilizar para hospedar nuestra aplicación web estática.

Una vez hayas creado tu cuenta de almacenamiento en Azure, revisa el panel de opciones del lado izquierdo, busca y selecciona Static website (sitio web estático).

Dentro de las opciones de configuración selecciona Enable (Habilitar), puedes agregar un nombre de tu documento index, en mi caso yo utilizo index.html. Luego salva los cambios.

Untitled

Una vez hayas habilitado esta opción podrás observar que se creó un container (equivalente a un folder) llamado $web, el cual contendrá todos los archivos de tu sitio web estático. Además podras ver la url en la que se expondrá el sitio web (Primary endpoint).

Untitled

Si haces click en $web, podrás acceder a ese contenedor (folder o directorio) y podrías subir manualmente los archivos de tu aplicación. En la parte superior tendremos la opcion de Upload (Subir) el cual nos dejará subir uno o multiples archivos.

Untitled

Ahora puedes hacer una prueba, sube al Blob Storage un archivo HTML al contenedor, por ejemplo un archivo index.html con el siguiente contenido:

<html>
	<head>
		<title>Mi página de ejemplo</title>
	</head>
	<body>
	Aquí va el contenido
	</body>
</html>

Realiza una prueba de tu Static Website con la url y trata de abrirlo en el explorador. Te debe mostrar el contenido del archivo subido.

Como te puedes dar cuenta, podriamos subir manualmente todos los archivos de nuestro sitio web, pero ¿para que hacerlo así si podemos automatizarlo con Github Actions?.

Crea tu workflow y configuralo

Utilizarás Github Actions para automatizar el proceso de construccion y despliegue hacia Azure.

En Github ingresa al proyecto de tu repo y ve a la opcion Actions, crea un workflow desde cero.

Realiza commit del cambio desde el portal.

Regresa a la consola de tu computadora y realiza un pull del repo para tener el ultimo cambio.

git pull

Prueba el workflow ejecutandolo manualmente desde el portal de GitHub.

Untitled

Los Workflows se encargarán de ejecutar pasos de forma automatizada, el worflow se ejecutará en un runner o un agente, que podriamos considerar como un servidor que se encargará ejecutar cada uno de los pasos. Por lo que debemos conocer cada uno de los pasos para construir y desplegar la aplicación, los pasos pueden variar dependiendo del lenguaje/framework de la aplicacion y a donde se va a desplegar. En este caso será Angular y Azure.

En la primera parte del workflow tenemos que asegurarnos de automatizar lo siguiente:

  • Descargar el repo para poder utilizarlo
  • Asegurar que el runner tenga la version de node necesaria
  • Instalar dependencias de npm
  • Generar los assets de la app

Modifica el workflow para lograr lo antes mencionado. El workflow debería quedar de la siguiente manera:

# This is a basic workflow to help you get started with Actions

name: CI-CD

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the "main" branch
  push:
    branches: [ "main" ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "buildAndDeploy"
  buildAndDeploy:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: 16

      # Runs a single command using the runners shell
      - name: Install dependencies
        run: npm install

      # Runs a set of commands using the runners shell
      - name: Build project
        run: |
          npm run build

Prueba el workflow automatizado, activa la ejecución del worklfow haciendo commit de los cambios.

Untitled

git add .
git commit -m "Agregando steps para construir proyecto"
git push

Puedes ver en el portal de Gtihub la ejecucion del workflow de forma automatica.

El workflow se debe ejecutar correctamente.

Untitled

Ahora llegamos a un punto importante en nuestro flujo de trabajo, que es desplegar nuestro sitio web hacia Azure y que nos lleva a la pregunta ¿como conectarse a Azure?.

Para conectarnos a Azure debemos generar una identidad (técnicamente llamada service principal) dentro de nuestra subscripción de Azure, la cual permitirá conectar el Workflow de GitHub con Azure para manipular recursos o en nuestro caso, subir los archivos de nuestro sitio web a Blob Storage.

Genera credenciales para despliegue

Puedes crear un service principal con el comando az ad sp create-for-rbac en el Azure CLI. Puedes ejecutar el comando desde el Azure Cloud Shell en el portal de Azure.

Reemplaza myStaticSite con el nombre de tu recurso hospedado en Azure Storage y reemplaza los id de la subscripcion y resource group. Puedes tomar los valores desde el portal como se muestra a continuación:

Untitled

Ejecuta el comando para crear service principal:

az ad sp create-for-rbac --name {myStaticSite} --role contributor --scopes /subscriptions/{subscription-id}/resourceGroups/{resource-group} --sdk-auth

Si el comando se ejecuta de forma correcta, obtendrás una salida como esta, con sus respectivos datos:

{
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

Guarda ese contenido JSON en un lugar seguro, ya que servirá para el siguiente paso.

Crea un secret en tu repositorio de GitHub

Dado que el JSON generado anteriormente contiene datos sensibles no se recomienda dejar esos datos dentro del archivo de nuestro workflow. Para propositos de almacenar estos datos sensibles podemos utilizar los Secrets de Github.

  1. En GitHub, busca tu repositorio.
  2. Selecciona Settings > Secrets > New secret.
  3. Pega todo el JSON del comando de Azure CLI del paso anterior en el campo de valor del secreto. Dale un nombre como AZURE_CREDENTIALS.

Untitled

Actualiza tu Workflow para realizar el despliegue

En la segunda parte del workflow tenemos que asegurarnos de automatizar lo siguiente:

  • Hacer login a Azure
  • Subir archivos de app a Blob Storage
  • Hacer logout de Azure

Cuando configures tu workflow, utiliza el secreto creado anteriormente, el valor del secreto debe utilizarse para el parametro creds de la acción de Azure Login.

Actualiza tu YAML para agregar las Acciones y lograr lo antes mencionado. El archivo debería quedar de la siguiente manera:

# This is a basic workflow to help you get started with Actions

name: CI-CD

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the "main" branch
  push:
    branches: [ "main" ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "buildAndDeploy"
  buildAndDeploy:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: 16

      # Runs a single command using the runners shell
      - name: Install dependencies
        run: npm install

      # Runs a set of commands using the runners shell
      - name: Build project
        run: |
          npm run build

      - name: Login to Azure
        uses: azure/login@v1
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Upload to blob storage
        uses: azure/CLI@v1
        with:
          inlineScript: |
              az storage blob upload-batch --overwrite --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -s $GITHUB_WORKSPACE/dist/my-app-ejemplo1 -d '$web'

      # Azure logout
      - name: logout
        run: |
              az logout
        if: always()

Sube tus cambios al repositorio.

git add .
git commit -m "Agregar steps de deployment a workflow"
git push

Verifica la ejecucion automatica del workflow, el workflow debe ejecutarse correctamente y el sitio web debe estar publicado.

Untitled

Todos los pasos deben de haber sido ejecutados correctamente y el sitio web debe ser publicado.

Untitled

Ahora realiza una prueba más: modifica un archivo de tu proyecto, publica tus cambios a git y el workflow debe ejecutarse de manera automática..

Por ejemplo, modificar el archivo HTML app.component.html.

Untitled

Por último, publica los cambios al repo para activar el workflow y verifica que el workflow se haya ejecutado correctamente y que los cambios esten publicados en tu recurso de Azure.

¡Y eso es todo!. Ya tienes tu worflow creado y configurado correctamente.

comments powered by Disqus