Despliega tu aplicación SIN FALLOS con GitHub Actions y Angular

En este taller aprenderás a desplegar una aplicación de Angular utilizando la automatización de GitHub Actions. Crearemos una aplicación desde cero, estructurándola y manejando el despliegue automático. Utilizaremos GitHub y Visual Studio Code, con algunos tips y extensiones útiles para el proceso.

Creación del repositorio en GitHub

Para comenzar, crearemos un nuevo repositorio en GitHub. Este repositorio contendrá el código de nuestra aplicación Angular y el script de GitHub Actions que configuraremos para el despliegue automático.

1. Configuración inicial del repositorio:
   • Ve a GitHub y crea un nuevo repositorio llamado angular-poc.
   • Configura los permisos de GitHub Actions en los ajustes del repositorio para permitir lectura y escritura.
2. Creación del script de GitHub Actions:
   • En el repositorio, crea un archivo .github/workflows/main.yml.
   • Define el script para automatizar el despliegue, configurando los pasos necesarios como instalación de dependencias, construcción y despliegue.

Configuración del script de GitHub Actions

El script de GitHub Actions manejará todo el proceso de despliegue. A continuación, se muestra un ejemplo de configuración:

name: Angular CI/CD

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Build the app
        run: npm run build -- --configuration production --base-href /angular-poc/

      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v3
        with:
          target_branch: gh-pages
          build_dir: dist/angular-poc
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Este script configura GitHub Actions para realizar las siguientes tareas:

1. Checkout del repositorio: Clona el repositorio en el entorno de trabajo.
2. Setup de Node.js: Configura el entorno de Node.js con la versión especificada.
3. Instalación de dependencias: Ejecuta npm install para instalar todas las dependencias necesarias.
4. Construcción de la aplicación: Ejecuta el comando npm run build para crear el bundle de la aplicación.
5. Despliegue a GitHub Pages: Utiliza una acción de GitHub para desplegar el contenido de dist/angular-poc a la rama gh-pages.

Creación de la aplicación Angular

Ahora, vamos a crear la aplicación Angular desde cero utilizando el CLI de Angular.

1. Generación de la aplicación:
   • Abre una terminal y ejecuta ng new angular-poc para crear una nueva aplicación Angular.
   • Sigue las instrucciones interactivas para configurar la aplicación, seleccionando CSS y la inclusión de rutas.
2. Estructuración de la aplicación:
   • Dentro de la aplicación, crea dos módulos: Home y About.
   • Configura las rutas para que cada módulo cargue sus respectivos componentes de forma lazy-loaded.
3. Configuración de las rutas:
   • En el archivo app-routing.module.ts, define las rutas principales de la aplicación:

const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
{ path: 'about', loadChildren: () => import('./pages/about/about.module').then(m => m.AboutModule) },
];

4. Ajuste del build para GitHub Pages:
   • Modifica el script de build en el archivo package.json para incluir el base-href:

"scripts": {
"build": "ng build --configuration production --base-href /angular-poc/"
}

Despliegue de la aplicación

Una vez configurados el script de GitHub Actions y la aplicación Angular, realiza un commit y un push al repositorio. Esto disparará el flujo de trabajo definido en GitHub Actions y desplegará automáticamente la aplicación en GitHub Pages.

1. Commit y push de los cambios:
   • Asegúrate de tener todos los cambios necesarios en el repositorio.
   • Ejecuta los comandos:

git add .
git commit -m "Initial commit with Angular app and CI/CD pipeline"
git push origin master

2. Verificación del despliegue:
   • Ve a la sección de Actions en tu repositorio de GitHub para verificar la ejecución del flujo de trabajo.
   • Una vez completado, la aplicación estará disponible en GitHub Pages bajo la URL configurada.

Conclusión

Con esta configuración, hemos automatizado el despliegue de una aplicación Angular utilizando GitHub Actions. Ahora, cada vez que realices un push a la rama master, la aplicación se desplegará automáticamente, facilitando el proceso de desarrollo y entrega continua.