Full React Deployment

Complete Jenkins CI/CD Flow for a React App with Docker & Kubernetes Deployment

This guide covers: ✅ Jenkins Server Setup (Plugins & Config) ✅ Jenkins Agent Setup (Node.js, Docker) ✅ Pipeline Stages:

• Build & Test React App

• Docker Image Build & Security Scan

• Deploy to Kubernetes

---

1️⃣ Jenkins Server Setup

You need a Jenkins master (controller) with:

🔹 Required Plugins

1. Pipeline Plugin → For defining CI/CD pipelines

2. Git Plugin → For SCM checkout

3. NodeJS Plugin → To install Node.js

4. Docker Pipeline Plugin → For building Docker images

5. Trivy Plugin → For Docker image scanning

6. Kubernetes Plugin → For deploying to Kubernetes

🔹 Configuration Steps

1. Install Jenkins on a server (Ubuntu 22.04 recommended).

2. Install the required plugins from "Manage Jenkins" → "Manage Plugins."

3. Create Credentials for DockerHub & Kubernetes:

   • docker-hub → DockerHub credentials

   • kube-config → Kubernetes kubeconfig file

---

2️⃣ Jenkins Agent Setup

Since we are building a React app with Docker, our agent needs: ✅ Node.js & npm (for npm install & npm run build) ✅ Docker (for building & pushing images) ✅ kubectl (for deploying to Kubernetes)

Install NPM and NodeJS

Install Node.js & npm Using NVM on Ubuntu

NVM (Node Version Manager) allows you to install and manage multiple versions of Node.js easily.

---

1️⃣ Install NVM

Run the following command to install NVM:

curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

After installation, reload your shell:

source ~/.bashrc

Verify NVM is installed:

nvm --version

---

2️⃣ Install Node.js & npm

Check available Node.js versions:

nvm ls-remote

Install the latest LTS version:

nvm install --lts

Or install a specific version (e.g., Node.js 18):

nvm install 18

Set the installed version as default:

nvm use 18
nvm alias default 18

Verify installation:

node -v  # Check Node.js version
npm -v   # Check npm version

---

3️⃣ (Optional) Install Yarn

If you need Yarn as well:

npm install -g yarn
yarn --version

---

Now, your system has Node.js, npm, and (optionally) Yarn installed using NVM! 🚀

🔹 Install Dependencies (Ubuntu Agent)

# Install Node.js & npm
curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
apt install -y nodejs

# Install Docker
apt update && apt install -y docker.io
usermod -aG docker jenkins  # Give Jenkins Docker access

# Install kubectl
curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
chmod +x kubectl && mv kubectl /usr/local/bin/

---

3️⃣ Jenkins Pipeline

Here’s the complete Jenkinsfile for:

• Building & Testing the React App

• Scanning the Docker Image for Security

• Deploying to Kubernetes

Jenkinsfile

pipeline {
    agent { label 'react-builder' } // Agent with Node.js, npm, and Docker installed

    environment {
        DOCKER_IMAGE = "your-dockerhub-username/react-app"
        DOCKER_TAG = "latest"
        KUBE_NAMESPACE = "default"
        KUBE_DEPLOYMENT = "react-app"
    }

    tools {
        nodejs 'NodeJS-18'  // Ensure Node.js is installed in Jenkins
    }

    stages {
        stage('Checkout Code') {
            steps {
                git 'https://github.com/your-repo/react-app.git'
            }
        }

        stage('Install Dependencies') {
            steps {
                sh 'npm install'
            }
        }

        stage('Run Tests') {
            steps {
                sh 'npm test'
            }
        }

        stage('Build React App') {
            steps {
                sh 'npm run build'
            }
        }

        stage('Build Docker Image') {
            steps {
                sh "docker build -t ${DOCKER_IMAGE}:${DOCKER_TAG} ."
            }
        }

        stage('Scan Docker Image (Trivy)') {
            steps {
                sh "trivy image --exit-code 1 --severity HIGH,CRITICAL ${DOCKER_IMAGE}:${DOCKER_TAG} || true"
            }
        }

        stage('Push Docker Image') {
            steps {
                withDockerRegistry([credentialsId: 'docker-hub', url: '']) {
                    sh "docker push ${DOCKER_IMAGE}:${DOCKER_TAG}"
                }
            }
        }

        stage('Deploy to Kubernetes') {
            steps {
                withKubeConfig([credentialsId: 'kube-config']) {
                    sh """
                    kubectl set image deployment/${KUBE_DEPLOYMENT} react-app=${DOCKER_IMAGE}:${DOCKER_TAG} -n ${KUBE_NAMESPACE}
                    kubectl rollout status deployment/${KUBE_DEPLOYMENT} -n ${KUBE_NAMESPACE}
                    """
                }
            }
        }
    }
}

---

4️⃣ Breakdown of Pipeline Stages

Stage	Purpose	Required Setup
Checkout Code	Fetches React app source code	Git repository URL
Install Dependencies	Runs npm install to install libraries	Node.js, npm
Run Tests	Executes npm test to ensure functionality	Jest or Mocha tests
Build React App	Runs npm run build to generate static files	Node.js, React
Build Docker Image	Creates a Docker image from React app	Docker
Scan Docker Image	Uses Trivy to check for vulnerabilities	Trivy security tool
Push Docker Image	Pushes image to DockerHub	DockerHub credentials
Deploy to Kubernetes	Updates the deployment with the new image	Kubernetes, kubectl

---

5️⃣ Kubernetes Deployment YAML

You need a Kubernetes Deployment & Service to host your React app.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app
  namespace: default
spec:
  replicas: 2
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
    spec:
      containers:
      - name: react-app
        image: your-dockerhub-username/react-app:latest
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: react-app-service
  namespace: default
spec:
  type: LoadBalancer
  selector:
    app: react-app
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80

---

6️⃣ How the Pipeline Works

1️⃣ Code is Pulled from GitHub 2️⃣ React App is Built (npm install & npm run build) 3️⃣ Docker Image is Created (docker build) 4️⃣ Security Scan is Performed (Trivy) 5️⃣ Image is Pushed to DockerHub 6️⃣ Kubernetes Deployment is Updated (kubectl set image)

---

7️⃣ Summary

✅ Jenkins Server → Installed with required plugins & credentials ✅ Jenkins Agent → Has Node.js, npm, Docker, and kubectl ✅ Jenkins Pipeline → Automated build, test, security scan, and deployment ✅ Kubernetes Deployment → Runs the React app in a cluster

---

🔹 Next Steps

• Configure Jenkins Credentials (docker-hub, kube-config)

• Set up a dedicated Jenkins agent with Node.js, npm, Docker

• Run the pipeline and verify deployment in Kubernetes

🚀 Now your React app is fully automated with CI/CD! Let me know if you need any refinements! 🚀