CI/CD para Principiantes: Aprende a Desplegar Apps con GitHub Actions en Pocos Minutos

Guía práctica para iniciarse en CI/CD. Implementa tus flujos de trabajo de desarrollo usando GitHub Actions y aprende a desplegar tus aplicaciones automáticamente sin conocimientos técnicos avanzados.

¿Qué es lo que realmente quieres en tus proyectos?

Pienso que la idea más común y deseada es tener un proceso ágil para publicar cambios. Cada vez que haces una actualización, debes poder probarla, verificar si todo funciona como debe ser y, de paso, pasarla a producción sin olvidarte ningún paso ni equivocarte en algún script de despliegue.

A muchos nos ha pasado, ¿verdad? Cambiamos algo en el código, lo hacemos commit, subimos la rama, esperamos nerviosos si es que es una actualización interna para los usuarios y si todo sale bien entonces nos alegramos. Pero si algo falla en medio del proceso, ¡solo Dios sabe qué pasa!

Menura suerte la nuestra cuando nos concentramos en la funcionalidad del producto y no planeamos esos pasos tangenciales como pruebas o despliegues que, sin embargo, ¡son cruciales!

Llega el CI/CD para ayudarte: ¿Te consigo a un CI/CD y no sabes lo increíble que será?

Déjame explicarte que cuando hablamos de CI/CD, hablamos de práctica y simplicidad. Es un concepto que se ha infiltrado en los corazones de los desarrolladores porque ahorra tiempo y trae orden.

• Continuous Integration (CI) es una forma de asegurar que tu código funcione sin problemas cuando se une con código de otros a través de un sistema de control de versiones, como GitHub.
• Continuous Delivery/Deployment (CD) está detrás de esas máquinas o servicios que automáticamente se encargan de construir, probar y poner en producción automáticamente una vez que el código se ha probado y revisado.

Repetiré que la idea es crear pequeñas etapas manejables. Con CI/CD construiste en tu mente un flujo de trabajo tal que cada vez que subes cambios, pasas automáticamente por una sucesión de pasos.

Después del código, el CI te carga, te concatena las dependencias del proyecto, ejecuta pruebas automatizadas, ¡y si todo bien, la CD prepara la app para pasarlo a producción sin que tú ni sepa!

Simplifiquemos: GitHub Actions y qué son

Ahora bien, allí está GitHub, tu aliado por excelencia en el mundo Dev. Aprovechando tu cuenta, ofrece GitHub Actions. Es una máquina de flujos completamente integrada con tu repositorio. Que díces concretamente:

¿No es más inteligente usar una herramienta que esté en el corazón de tu día a día? Así que vamos a aprender a usarlo. Funcionamiento:

• Conectas un workflow con un trigger o evento: puede ser un evento push (nueva versión, nueva rana) u otra acción.
• La acción puede ser un correo, alguien pulsa un botón, una modificación de configuración o incluso que cambie la fecha.
• Si se cumple el evento, se ejecuta la secuencia de pasos definidos en el script que tú configuras.

GitHub Actions te permite crear scripts para ejecutar en distintas máquinas, en distintos entornos. Es maravilloso porque funciona en Linux, Windows, macOS y puede usar imágenes base como Docker. ¡Incluso te permite usar funcionalidades de Azure o AWS directamente en tu script!

Q&MÉY cuando se ejecuta un workflow: primero transformas tu código

Cuando alguien empuja código en GitHub (esto es el trigger), el workflow se activa. Lo primero, todo el código se está construyendo. ¿Qué significa construir cuando tenemos Node.js o React? Oprimir el play de ejecución.

Esto quiere decir que se ejecutan comandos como `npm install`, `yarn install`, para descargar todas las librerías necesarias. Sobre todo cuando usamos un lenguaje como Go, Java o Python, que son compilados, entonces sería una etapa de compilación.

Pruebas: antes de pasarla publica

Luego de construir, ¡pruebalo todo! Eso sí que forma parte de la cultura de calidad. En GitHub Actions, puedes definir scripts que ejecuten pruebas unitarias, verificaciones de estilos, pruebas funcionales. Todo debe ser rápido y pasar sin problemas.

Despliegue: la gloria final

Ahora si todo fue bien (build + tests), llegamos al momento esperado: ¡desplegar la aplicación!

GitHub Actions puede ser muy versátil. Depende de tu aplicación. Podrías desplegar desde un contenedor en un servicio como Google Cloud Run o AWS Fargate, o bien hacer el push de tu código a un repositorio en Azure App Service o incluso conectar tu base de datos y cambiar variables de entorno.

El workflow puede tener tantas etapas como quieras. Algunos ejemplos que ves en comunidad:

• Build: donde construimos la imagen del contenedor o compilamos el código.
• Test: a donde corremos las pruebas unitarias, de rendimiento, integración, etc.
• Deploy: donde subimos la aplicación a producción.

Creemos nuestro primer workflow en GitHub Actions: un ejemplo práctico

Voy a mostrarte un fragmento de un workflow que podrías usar para Node.js, un entrenamiento perfecto para que lo copies y pases a tu repositorio.

Aquí un ejemplo de workflow típico para Node.js que se activa cuando el código se sube a la rama main y no olvides definir los permissions para poder actualizar tu repositorio de despliegue (como podría ser un repositorio en Heroku, Netlify o cualquier otra plataforma), puede que tengas que personalizarlo.

name: Node.js Build and Deploy

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test

      - name: Build the application
        run: npm run build

      - name: Deploy to production
        run: npm run deploy
        env:
          DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}

Expliquemos sencillamente:

Parte 1: Configuración general del workflow

El bloque name es simplemente el nombre para identificar el workflow.

El bloque on define qué evento activa esto. En este ejemplo es el evento push a la rama main.

El bloque jobs: esta es la ejecución en sí, define el entorno y pasos.

Dentro de jobs, tenemos «runs-on», indica el OS de la máquina temporal que usar.

Parte 2: Pasos del workflow

• Checkout code: accede al repositorio
• Setup Node.js: prepara el entorno con la versión del Node deseada
• Install dependencies: instala las librerías del proyecto
• Run tests: Ejecuta pruebas de tu aplicación
• Build the application: Prácticamente empaqueta tu aplicación. Puede ser compilar código estático o construir la imagen del contenedor
• Deploy to production: El código compilado y testeado es pasado a producción. Esta acción podría descargar un archivo de puesta en marcha o simplemente conectar con cierta API

También ve en el último paso que podría usar variables de entorno (por eso ve la palabra env). Estas variables normalmente contienen credenciales o configuraciones sensibles. Has de definirlas previamente en tu repositorio o cuenta de GitHub como secrets.

Herramientas alrededor: No solo GitHub Actions

Claro que no. Existen otras herramientas importantes que además facilitan el despliegue, incrementan las posibilidades de integraciones y de prácticas comunes como pasar de tener un commit a tener un Docker image listo.

Sin embargo, si tu flujo de trabajo está en GitHub, comenzar con GitHub Actions puede ser un acierto.

En resumen: Un flujo de trabajo que no puede esperar

Vamos a dejar claro que el CI/CD es un eje esencial en cualquier proyecto de desarrollo moderno. Aplicarlo desde GitHub Actions y construir tus workflows es sencillo, claro y de gran utilidad.

Solo necesitas empezar a definir qué tan automatizado quieres que esté tu proceso. Cuidado con lo mínimo necesario y con lo Franco. A lo mejor en un principio, solo extraes el paso de ejecutar las pruebas cada que subes un cambio.

Recuerda que el objetivo final no es simplemente tener un CI/CD, sino que de manera constante, se vaya automatizando cada paso del desarrollo y de publicación, para que cada pequeño cambio que haces, sea replicado, probado y mostrado a los usuarios de manera segura.

Contigo en eso emprendedor. ¿Listo para tener tu primer workflow en GitHub Actions? ¡Cuéntanos cómo te fue!>