Introducción
La Integración y Despliegue Continuos (CI/CD) son prácticas esenciales en el desarrollo moderno de software que permiten a los equipos entregar cambios de código de manera más rápida y segura. En este tema, aprenderás cómo configurar un pipeline de CI/CD para una aplicación Vue.js, utilizando herramientas populares como GitHub Actions y Netlify.
Objetivos
- Entender los conceptos básicos de CI/CD.
- Configurar un pipeline de CI/CD para una aplicación Vue.js.
- Automatizar pruebas y despliegues.
Conceptos Básicos de CI/CD
Integración Continua (CI)
La Integración Continua es una práctica de desarrollo de software en la que los desarrolladores integran su código en un repositorio compartido varias veces al día. Cada integración es verificada por una build automatizada (incluyendo pruebas) para detectar errores lo antes posible.
Despliegue Continuo (CD)
El Despliegue Continuo es una práctica en la que cada cambio que pasa todas las etapas del pipeline de producción se despliega automáticamente en producción. Esto asegura que el software puede ser liberado en cualquier momento.
Configuración del Pipeline de CI/CD
Herramientas Necesarias
- GitHub: Para el control de versiones y almacenamiento del código.
- GitHub Actions: Para la automatización de flujos de trabajo.
- Netlify: Para el despliegue de la aplicación.
Paso 1: Configuración del Repositorio en GitHub
- Crear un Repositorio: Si aún no tienes un repositorio para tu proyecto Vue.js, crea uno en GitHub.
- Subir el Código: Asegúrate de que tu código esté subido al repositorio.
Paso 2: Configuración de GitHub Actions
- Crear un Archivo de Workflow: En tu repositorio, crea un archivo en
.github/workflows/ci.yml.
name: CI/CD Pipeline
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Install dependencies
run: npm install
- name: Run tests
run: npm run test
- name: Build project
run: npm run build
- name: Deploy to Netlify
uses: nwtgck/[email protected]
with:
publish-dir: ./dist
production-deploy: true
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}Paso 3: Configuración de Netlify
- Crear una Cuenta en Netlify: Si no tienes una cuenta, regístrate en Netlify.
- Crear un Nuevo Sitio: Conecta tu repositorio de GitHub a Netlify y configura los ajustes de despliegue.
- Obtener Tokens de Autenticación: En la configuración del sitio en Netlify, obtén el
NETLIFY_AUTH_TOKENy elNETLIFY_SITE_ID. - Configurar Secretos en GitHub: En tu repositorio de GitHub, ve a
Settings > Secretsy añade los secretosNETLIFY_AUTH_TOKENyNETLIFY_SITE_ID.
Paso 4: Ejecutar el Pipeline
- Hacer un Push al Repositorio: Realiza un push de tu código a la rama
main. - Verificar la Ejecución: Ve a la pestaña
Actionsen tu repositorio de GitHub para ver la ejecución del pipeline.
Ejercicio Práctico
Ejercicio 1: Configurar CI/CD para una Aplicación Vue.js
- Crear un Repositorio en GitHub: Si no tienes uno, crea un nuevo repositorio.
- Subir una Aplicación Vue.js: Sube una aplicación Vue.js básica al repositorio.
- Configurar GitHub Actions: Crea el archivo
ci.ymlen.github/workflows/y configura el pipeline como se muestra arriba. - Configurar Netlify: Conecta tu repositorio a Netlify y configura los secretos en GitHub.
- Verificar el Despliegue: Realiza un push y verifica que la aplicación se despliega correctamente en Netlify.
Solución
- Repositorio en GitHub: Enlace al repositorio de ejemplo
- Archivo de Workflow:
.github/workflows/ci.yml
name: CI/CD Pipeline
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Install dependencies
run: npm install
- name: Run tests
run: npm run test
- name: Build project
run: npm run build
- name: Deploy to Netlify
uses: nwtgck/[email protected]
with:
publish-dir: ./dist
production-deploy: true
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}Conclusión
En esta sección, has aprendido a configurar un pipeline de CI/CD para una aplicación Vue.js utilizando GitHub Actions y Netlify. Esta configuración te permitirá automatizar el proceso de pruebas y despliegue, asegurando que tu aplicación esté siempre en un estado desplegable. En el siguiente módulo, aplicaremos estos conocimientos en proyectos reales para consolidar lo aprendido.
Curso de Vue.js
Módulo 1: Introducción a Vue.js
- ¿Qué es Vue.js?
- Configuración del Entorno de Desarrollo
- Creando Tu Primera Aplicación Vue
- Entendiendo la Instancia de Vue
Módulo 2: Conceptos Básicos de Vue.js
- Sintaxis de Plantillas
- Vinculación de Datos
- Propiedades Computadas y Observadores
- Vinculación de Clases y Estilos
- Renderizado Condicional
- Renderizado de Listas
Módulo 3: Componentes de Vue.js
- Introducción a los Componentes
- Props y Eventos Personalizados
- Slots
- Componentes Dinámicos y Asíncronos
- Comunicación entre Componentes
Módulo 4: Vue Router
- Introducción a Vue Router
- Configuración de Vue Router
- Rutas Dinámicas
- Rutas Anidadas
- Guardias de Navegación
Módulo 5: Gestión de Estado con Vuex
- Introducción a Vuex
- Estado, Getters, Mutaciones y Acciones
- Módulos en Vuex
- Usando Vuex en Componentes
- Patrones Avanzados de Vuex
Módulo 6: Directivas de Vue.js
Módulo 7: Plugins de Vue.js
Módulo 8: Pruebas en Vue.js
- Pruebas Unitarias con Vue Test Utils
- Pruebas de Extremo a Extremo con Cypress
- Simulación de Dependencias
Módulo 9: Conceptos Avanzados de Vue.js
- Funciones de Renderizado y JSX
- Renderizado del Lado del Servidor (SSR) con Nuxt.js
- API de Composición de Vue 3
- Optimización del Rendimiento
Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js
- Construcción para Producción
- Despliegue de Aplicaciones Vue.js
- Integración y Despliegue Continuos (CI/CD)