El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, exploraremos cómo implementar CI/CD en un proyecto web real. Este caso de estudio te ayudará a entender cómo aplicar los conceptos y prácticas aprendidas en los módulos anteriores a un entorno de desarrollo web.

Descripción del Proyecto

El proyecto que vamos a utilizar es una aplicación web sencilla desarrollada con las siguientes tecnologías:

Frontend: React.js
Backend: Node.js con Express
Base de Datos: MongoDB

Configuración del Entorno de Desarrollo

2.1. Requisitos Previos

Antes de comenzar, asegúrate de tener instalados los siguientes componentes en tu máquina:

Node.js y npm
MongoDB
Git

2.2. Estructura del Proyecto

La estructura del proyecto será la siguiente:

project-web/
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── ...
├── backend/
│   ├── src/
│   ├── package.json
│   └── ...
├── .gitignore
└── README.md

Configuración de CI

3.1. Integración con GitHub

Primero, sube tu proyecto a un repositorio en GitHub. Esto permitirá que las herramientas de CI/CD puedan acceder a tu código.

3.2. Configuración de Jenkins

Vamos a utilizar Jenkins para configurar nuestro pipeline de CI.

3.2.1. Instalación de Jenkins

Sigue las instrucciones oficiales para instalar Jenkins en tu máquina o servidor.

3.2.2. Configuración del Pipeline

Crear un nuevo Job:
- Abre Jenkins y crea un nuevo Job de tipo "Pipeline".
- Nombra tu Job, por ejemplo, project-web-ci.
Configurar el Pipeline:
- En la sección "Pipeline", selecciona "Pipeline script from SCM".
- Configura el SCM para usar Git y proporciona la URL de tu repositorio de GitHub.
- En "Script Path", especifica la ubicación de tu archivo Jenkinsfile.

3.3. Jenkinsfile

Crea un archivo Jenkinsfile en la raíz de tu proyecto con el siguiente contenido:

pipeline {
    agent any

    stages {
        stage('Build Frontend') {
            steps {
                dir('frontend') {
                    sh 'npm install'
                    sh 'npm run build'
                }
            }
        }
        stage('Build Backend') {
            steps {
                dir('backend') {
                    sh 'npm install'
                    sh 'npm run build'
                }
            }
        }
        stage('Test Frontend') {
            steps {
                dir('frontend') {
                    sh 'npm test'
                }
            }
        }
        stage('Test Backend') {
            steps {
                dir('backend') {
                    sh 'npm test'
                }
            }
        }
    }
}

3.4. Explicación del Jenkinsfile

agent any: Ejecuta el pipeline en cualquier agente disponible.
stages: Define las etapas del pipeline.
- Build Frontend: Instala las dependencias y construye el frontend.
- Build Backend: Instala las dependencias y construye el backend.
- Test Frontend: Ejecuta las pruebas del frontend.
- Test Backend: Ejecuta las pruebas del backend.

Configuración de CD

4.1. Despliegue en un Servidor

Vamos a utilizar un servidor de DigitalOcean para desplegar nuestra aplicación.

4.1.1. Configuración del Servidor

Crear un Droplet en DigitalOcean:
- Selecciona una imagen de Ubuntu y crea un nuevo Droplet.
- Conéctate a tu Droplet usando SSH.

Instalar Docker:

Ejecuta los siguientes comandos para instalar Docker:

sudo apt update
sudo apt install docker.io
sudo systemctl start docker
sudo systemctl enable docker

Configurar Docker Compose:

Instala Docker Compose:

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

4.2. Dockerfile y docker-compose.yml

Crea los siguientes archivos en la raíz de tu proyecto:

4.2.1. Dockerfile para el Backend

# backend/Dockerfile
FROM node:14

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000
CMD ["npm", "start"]

4.2.2. Dockerfile para el Frontend

# frontend/Dockerfile
FROM node:14

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000
CMD ["npx", "serve", "-s", "build"]

4.2.3. docker-compose.yml

version: '3'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
  backend:
    build: ./backend
    ports:
      - "3001:3001"
    environment:
      - MONGO_URL=mongodb://mongo:27017/mydatabase
  mongo:
    image: mongo
    ports:
      - "27017:27017"

4.3. Despliegue Automático

Actualiza tu Jenkinsfile para incluir una etapa de despliegue:

pipeline {
    agent any

    stages {
        stage('Build Frontend') {
            steps {
                dir('frontend') {
                    sh 'npm install'
                    sh 'npm run build'
                }
            }
        }
        stage('Build Backend') {
            steps {
                dir('backend') {
                    sh 'npm install'
                    sh 'npm run build'
                }
            }
        }
        stage('Test Frontend') {
            steps {
                dir('frontend') {
                    sh 'npm test'
                }
            }
        }
        stage('Test Backend') {
            steps {
                dir('backend') {
                    sh 'npm test'
                }
            }
        }
        stage('Deploy') {
            steps {
                sshagent(['your-ssh-credentials-id']) {
                    sh '''
                    scp -r * user@your-server-ip:/path/to/deploy
                    ssh user@your-server-ip 'cd /path/to/deploy && docker-compose up -d --build'
                    '''
                }
            }
        }
    }
}

Monitoreo y Retroalimentación

5.1. Configuración de Monitoreo

Utiliza herramientas como Prometheus y Grafana para monitorear el rendimiento de tu aplicación.

5.2. Retroalimentación

Configura alertas para recibir notificaciones sobre el estado de tu aplicación y posibles problemas.

Conclusión

En este caso de estudio, hemos cubierto cómo configurar un pipeline de CI/CD para un proyecto web utilizando Jenkins, Docker y Docker Compose. Hemos visto cómo automatizar la construcción, pruebas y despliegue de una aplicación web, y cómo monitorear y recibir retroalimentación sobre el estado de la aplicación.

Este caso de estudio te proporciona una base sólida para implementar CI/CD en tus propios proyectos web. Asegúrate de adaptar y expandir estas configuraciones según las necesidades específicas de tus proyectos.

Caso de Estudio: Proyecto Web