El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest cas d'estudi, explorarem com implementar CI/CD en un projecte web. Aquest exemple pràctic il·lustrarà els passos necessaris per configurar un pipeline de CI/CD complet, des de la integració contínua fins al desplegament continu, utilitzant eines populars com Jenkins, Git, i Docker.

Descripció del Projecte

1.1. Objectius del Projecte

Desenvolupar una aplicació web amb una arquitectura de servidor-client.
Automatitzar la construcció, proves i desplegament de l'aplicació.
Assegurar la qualitat del codi mitjançant proves automatitzades.
Desplegar l'aplicació en un entorn de producció de manera segura i eficient.

1.2. Tecnologies Utilitzades

Frontend: React.js
Backend: Node.js amb Express
Base de Dades: MongoDB
Control de Versions: Git
CI/CD: Jenkins
Contenidors: Docker

Configuració del Repositori de Git

2.1. Estructura del Repositori

/projecte-web
  /frontend
    /src
    /public
    package.json
  /backend
    /src
    package.json
  Dockerfile
  docker-compose.yml
  Jenkinsfile
  README.md

2.2. Fitxer README.md

El fitxer README.md ha de contenir informació sobre el projecte, com ara les instruccions per a la instal·lació, l'ús i la contribució.

# Projecte Web

## Instal·lació

### Frontend

cd frontend npm install

### Backend

cd backend npm install

## Ús

### Executar en Desenvolupament

docker-compose up

### Executar Proves

cd frontend npm test

cd backend npm test

Configuració de Jenkins

3.1. Instal·lació de Jenkins

Instal·la Jenkins en un servidor o utilitza Jenkins en un contenidor Docker.
Instal·la els plugins necessaris: Git, Docker, Pipeline.

3.2. Creació del Pipeline

3.2.1. Fitxer Jenkinsfile

El fitxer Jenkinsfile defineix el pipeline de CI/CD.

pipeline {
    agent any

    stages {
        stage('Checkout') {
            steps {
                git 'https://github.com/usuari/projecte-web.git'
            }
        }
        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('Build Docker Image') {
            steps {
                sh 'docker build -t usuari/projecte-web .'
            }
        }
        stage('Deploy') {
            steps {
                sh 'docker-compose up -d'
            }
        }
    }
}

3.3. Configuració del Job de Jenkins

Crea un nou job de pipeline a Jenkins.
Configura el job per utilitzar el fitxer Jenkinsfile del repositori.

Automatització de la Construcció i Proves

4.1. Scripts de Construcció

Frontend: npm run build
Backend: npm run build

4.2. Scripts de Proves

Frontend: npm test
Backend: npm test

Desplegament amb Docker

5.1. Fitxer Dockerfile

Defineix com construir la imatge Docker per al projecte.

# Backend
FROM node:14 as backend
WORKDIR /app
COPY backend/package*.json ./
RUN npm install
COPY backend/ .
RUN npm run build

# Frontend
FROM node:14 as frontend
WORKDIR /app
COPY frontend/package*.json ./
RUN npm install
COPY frontend/ .
RUN npm run build

# Final Image
FROM node:14
WORKDIR /app
COPY --from=backend /app /app/backend
COPY --from=frontend /app /app/frontend
CMD ["node", "backend/dist/index.js"]

5.2. Fitxer docker-compose.yml

Defineix els serveis necessaris per executar l'aplicació.

version: '3'
services:
  web:
    image: usuari/projecte-web
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    depends_on:
      - mongo
  mongo:
    image: mongo
    ports:
      - "27017:27017"

Monitoratge i Retroalimentació

6.1. Configuració del Monitoratge

Utilitza eines com Prometheus i Grafana per monitoritzar l'aplicació.
Configura alertes per a errors i rendiment.

6.2. Retroalimentació

Configura notificacions a Jenkins per informar l'equip de desenvolupament sobre l'estat del pipeline.
Utilitza eines com Slack o correu electrònic per a les notificacions.

Resum

En aquest cas d'estudi, hem vist com implementar un pipeline de CI/CD per a un projecte web utilitzant Jenkins, Docker i altres eines. Hem cobert des de la configuració del repositori de Git fins al desplegament i monitoratge de l'aplicació. Aquest procés automatitzat ajuda a assegurar la qualitat del codi i a desplegar l'aplicació de manera eficient i segura.

Cas d'Estudi: Projecte Web