MERN Stack CI/CD Pipeline

Automated container deployment with security scanning and quality checks using GitLab CI/CD

MERN Stack CI/CD Deployment Architecture Diagram
Conceptual architecture of the MERN Stack CI/CD pipeline.

Project Overview

This project involved designing and implementing a robust CI/CD pipeline for a full-stack MERN (MongoDB, Express.js, React, Node.js) application. The core objective was to automate the build, security scanning, quality assurance, and deployment processes using Docker for containerization and GitLab CI/CD for orchestration. This solution ensures reliable, secure, and consistent deployments across environments.

Core Components & Pipeline Stages

The solution leverages Docker Compose to manage the MERN application's services and integrates various tools within a multi-stage GitLab CI/CD pipeline:

Containerization (Docker Compose)

Packaged the frontend (React), backend (Node.js/Express), and database (MongoDB) into isolated Docker containers, defining their networking and persistent storage for MongoDB.

Security Scanning (Trivy)

Integrated Trivy for comprehensive vulnerability scanning of both application filesystem and built container images, ensuring early detection of security risks.

Code Quality Gates (SonarQube)

Implemented SonarQube analysis to enforce stringent code quality standards and identify potential bugs or code smells before deployment.

Automated CI/CD Pipeline

Configured a 5-stage GitLab CI/CD workflow to automate the entire deployment lifecycle, including parallel execution for efficiency.

Implementation Details

Container Architecture (docker-compose.yml)

The application's services are defined and orchestrated using the following Docker Compose configuration:

version: '3.8'

services:
  frontend:
    build: ./mern/frontend
    ports:
      - "5173:5173"
    networks:
      - mern_network
    environment:
      REACT_APP_API_URL: http://backend:5050

  backend:
    build: ./mern/backend
    ports:
      - "5050:5050"
    networks:
      - mern_network
    environment:
      MONGO_URI: mongodb://mongodb:27017/mydatabase
    depends_on:
      - mongodb

  mongodb:
    image: mongo:latest
    ports:
      - "27017:27017"
    networks:
      - mern_network
    volumes:
      - mongo-data:/data/db

networks:
  mern_network:
    driver: bridge

volumes:
  mongo-data:
    driver: local

This setup ensures proper communication between services and persistent data storage for MongoDB.

GitLab CI/CD Pipeline Stages

  1. Build: Installs application dependencies and prepares artifacts for subsequent stages.
  2. Security Scan: Executes Trivy and SonarQube analysis on the source code.
  3. Docker Build: Creates optimized Docker images for frontend and backend, tagged with pipeline IDs.
  4. Image Scan: Performs vulnerability scanning on the newly built Docker images using Trivy.
  5. Deployment: Pushes approved images to a container registry, ready for deployment to target environments.

Key Pipeline Features

  • Artifact passing between pipeline stages to ensure consistency.
  • Parallel execution of frontend and backend jobs for faster pipeline runs.
  • Utilization of multiple GitLab runners for efficient resource allocation.
  • Integrated security and quality gates to prevent vulnerable or low-quality code from reaching production.

Key Achievements

  • Successfully containerized a full-stack MERN application using Docker and Docker Compose.
  • Designed and implemented a robust, automated CI/CD pipeline with GitLab CI/CD.
  • Integrated industry-standard security scanning (Trivy) and code quality analysis (SonarQube) into the pipeline.
  • Ensured data persistence for the MongoDB database using Docker volumes.
  • Streamlined the development-to-deployment workflow, reducing manual effort and improving release frequency.
  • Enhanced application security posture through automated vulnerability detection and quality gates.

Work Samples

CI/CD Pipeline Screenshots

GitLab CI/CD Pipeline Visuals

12 images