Despliegue continuo con Vercel y GitHub Actions (CI/CD)

La entrega continua (CD) y la integración continua (CI) son dos pilares fundamentales en el desarrollo moderno. Estas prácticas permiten a los equipos liberar nuevas funcionalidades y correcciones a producción con mayor frecuencia, seguridad y rapidez. En este artículo exploraremos cómo integrar Vercel con GitHub para crear un pipeline de CI/CD que simplifique el proceso de despliegue de un proyecto front-end, ya sea en React, Angular u otro framework similar.

¿Por qué Vercel?

Vercel se ha convertido en una herramienta muy popular para el despliegue de aplicaciones front-end. Entre sus principales ventajas se encuentran:

• Despliegue rápido: Con solo unos cuantos clics, tu aplicación estará en producción.
• Integraciones con Git: Cada vez que empujas cambios a tu repositorio, Vercel se encarga de generar una vista previa y, si todo está en orden, puedes promoverla a producción.
• Escalabilidad y CDN global: Tu aplicación estará servida desde una red de distribución de contenido global, asegurando rapidez y disponibilidad.
• Soporte para frameworks populares: Vercel funciona perfectamente con Next.js, React, Vue, Angular, Svelte y otros frameworks de front-end.

¿Qué es CI/CD?

• Integración Continua (CI): Es una práctica que busca integrar cambios en el código de forma frecuente, asegurando que estos cambios sean compilados, testeados y validados de manera automática.

• Despliegue Continuo (CD): Una vez que los cambios han pasado los checks de CI, se despliegan de forma automática al entorno de producción o a entornos previos, asegurando un flujo de entrega constante y sin interrupciones.

La combinación de CI/CD es especialmente útil cuando queremos tener la certeza de que cada commit que hacemos en nuestro repositorio es potencialmente desplegable a producción.

Preparando el entorno

1. Crear el repositorio en GitHub

Lo primero es contar con un proyecto alojado en GitHub. Puede ser un proyecto Angular, React o cualquier otro framework front-end. Supongamos que tienes ya tu código en un repositorio.

2. Crear una rama (Opcional)

Si prefieres trabajar en una rama específica antes de fusionar a la principal, puedes crear una nueva rama:

git checkout -b nombre_rama
git push -u origin nombre_rama

3. Configurar GitHub Actions para CI/CD

Para aprovechar la integración continua con GitHub Actions y el despliegue en Vercel, crearemos un flujo de trabajo (workflow) en nuestro repositorio:

1. Crear el directorio en el proyecto:

   En la raíz de tu proyecto, crea el siguiente directorio:

   .github/workflows/
    
2. Crear el archivo de configuración del workflow
   1. chaski-deploy.yml
3. Agregar la configuración del archivo YML:

Dentro del archivo chaski-deploy.yml, deberás configurar los pasos necesarios para:

• Instalar dependencias
• Ejecutar tests (opcional)
• Construir el proyecto
• Desplegar en Vercel

Un ejemplo básico (adaptar según el framework) podría verse así:

name: Deploy test DAS
on:
push:
branches:
– main
pull_request:
branches:
– main

jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
– name: Checkout code
uses: actions/checkout@v2
– uses: actions/setup-node@v2
– name: Install dependencies
run: npm install
– name: Bundle
run: npm run build

4. Integrar GitHub con Vercel

En la plataforma de Vercel:

• Crea un nuevo proyecto apuntando a tu repositorio de GitHub.
• Vercel pedirá permisos para integrarse con tu cuenta de GitHub.
• Una vez configurado, cada vez que hagas un push a la rama configurada, se activará el workflow de GitHub Actions y, de ser exitoso, desplegará automáticamente en Vercel

Video Tutorial: 2024-12-15 20-39-47.mkv