DEV Community

End-to-End DevOps Project: Building, Deploying, and Monitoring a Full-Stack Application

H A R S H H A A on August 26, 2024

Table of Contents Introduction Project Overview Prerequisites Step 1: Infrastructure Setup on AWS 1.1 Setting Up the VPC and Network...

Read full post

H A R S H H A A • Aug 26

Updated Project Integration

Repository: Vitual-Browser

Step-by-Step Integration with `Vitual-Browser`

1. Clone the Repository

Start by cloning the Vitual-Browser repository to your local environment:

git clone https://github.com/jaiswaladi246/Vitual-Browser.git
cd Vitual-Browser

2. Build and Test Locally

2.1 Build the Application

Since Vitual-Browser appears to be a Node.js application, you need to build it. Ensure you have Node.js and npm installed.

# Install dependencies
npm install

# Build the project (if applicable)
npm run build

2.2 Run Tests

npm test

3. Containerize the Application

3.1 Create a Dockerfile

In the root of your Vitual-Browser project, create a Dockerfile:

# Use official Node.js image as base
FROM node:14

# Create and set working directory
WORKDIR /usr/src/app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the application (if applicable)
RUN npm run build

# Expose port (adjust if necessary)
EXPOSE 3000

# Start the application
CMD ["npm", "start"]

3.2 Build and Push Docker Image

# Build the Docker image
docker build -t myrepo/vitual-browser:latest .

# Push the Docker image to Docker Hub
docker tag myrepo/vitual-browser:latest myrepo/vitual-browser:v1.0.0
docker push myrepo/vitual-browser:v1.0.0

4. Deploy to Kubernetes (Amazon EKS)

4.1 Create Kubernetes Manifests

Deployment Manifest (deployment.yaml):

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vitual-browser-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: vitual-browser
  template:
    metadata:
      labels:
        app: vitual-browser
    spec:
      containers:
      - name: vitual-browser
        image: myrepo/vitual-browser:v1.0.0
        ports:
        - containerPort: 3000

Service Manifest (service.yaml):

apiVersion: v1
kind: Service
metadata:
  name: vitual-browser-service
spec:
  type: LoadBalancer
  selector:
    app: vitual-browser
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000

4.2 Apply the Manifests

kubectl apply -f deployment.yaml
kubectl apply -f service.yaml

5. CI/CD Integration with Jenkins

5.1 Update Jenkinsfile

In your Jenkinsfile, add stages to build, test, and deploy the application:

pipeline {
  agent any
  stages {
    stage('Checkout') {
      steps {
        git 'https://github.com/jaiswaladi246/Vitual-Browser.git'
      }
    }
    stage('Build') {
      steps {
        sh 'npm install'
        sh 'npm run build'
      }
    }
    stage('Test') {
      steps {
        sh 'npm test'
      }
    }
    stage('Docker Build and Push') {
      steps {
        sh 'docker build -t myrepo/vitual-browser:latest .'
        sh 'docker push myrepo/vitual-browser:latest'
      }
    }
    stage('Deploy') {
      steps {
        sh 'kubectl apply -f deployment.yaml'
        sh 'kubectl apply -f service.yaml'
      }
    }
  }
}

6. Monitoring and Security

Prometheus and Grafana: Ensure Prometheus is configured to scrape metrics from the Vitual-Browser application if it exposes any.
Trivy and SonarQube: Integrate Trivy in the Jenkins pipeline for scanning Docker images and SonarQube for code quality.

Conclusion

This integration ensures a smooth CI/CD pipeline for the Vitual-Browser application. By following these steps, you’ll have a robust, automated setup for building, testing, deploying, and monitoring your application.

Hamza Boughanim • Aug 28

Hi HARSHHAA,
Top, very nice and helpful !
Thanks for sharing.
geminitwins

H A R S H H A A • Aug 30

Thanks @geminitwins for your feedback ☺️

Sushant Nair • Aug 28 • Edited

Hi. Thanks for the article. I had four questions:

From start to end is it completely free?
It seems this was done in Linux. But I am a Windows User. Any help?
I didn't quite get your featured comment Updated Project Integration. Like, is it a particular application of a general procedure you delineated in the article, applying the process to deploy a nodejs application? Also, in case there is a django application to deploy, how to do it?
Finally, how would the pushed website be accessible? Like, what would be the URL?