Streamlined CI/CD Pipeline for Web Development using Jenkins, Git, and Docker

Streamlined CI/CD Pipeline for Web Development using Jenkins, Git, and Docker

Sandhya Babu's photo
Sandhya Babu
·

5 min read

Table of contents

This project demonstrates the process of setting up a Continuous Integration/Continuous Deployment (CI/CD) pipeline for a simple web application. The pipeline automates the steps from building to testing and deploying a web app using Jenkins, GitHub, and Docker.

Technologies Used

  • Jenkins

  • Git

  • GitHub

  • Docker

  • NGINX

  • EC2 Linux (for Jenkins & docker setup)

Key Achievements

  • Automated the entire software development lifecycle.

  • Improved deployment efficiency and reduced manual errors.

  • Deployed a web application using a Docker container with NGINX as a web server.

Step 1: Set Up Your Development Environment

  1. Install Git:

  2. Create a GitHub Repository:

    • Create a new repository on GitHub for your project.

  3. Clone the Repository to Your Local Machine:

git clone https://github.com/your-username/your-repo-name.git

Step 2: Create a Simple Web Application

  1. Create a Basic Web App:

In your cloned repository, create a simple HTML file named index.html with the following content:

<!DOCTYPE html>
<html>
<head>
<title>Hello Jenkins</title>
</head>
<body>
<h1>Hello, Jenkins!</h1>
</body>
</html>
  1. Commit and push the code to GitHub:
git add .
git commit -m "Initial commit"
git push origin main

Step 3: Set Up Jenkins

Install Jenkins:

To set up Jenkins, I used a Linux virtual machine (EC2 instance). I followed the official Jenkins installation guide to install it. First, I connected to my EC2 instance via SSH (or instance connect) and executed the following commands to install both Java and Jenkins:

Update Packages, Install Java & Check Java Installation

 sudo apt-get update
 sudo apt install openjdk-17-jre
 java --version

Add Jenkins Repository Key:

 curl -fsSL https://pkg.jenkins.io/debian/jenkins.io-2023.key | sudo tee /usr/share/keyrings/jenkins-keyring.asc > /dev/null

Add Jenkins Repository:

 echo deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] https://pkg.jenkins.io/debian binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list > /dev/null

Update Package Lists and Install Jenkins:

 sudo apt-get update
 sudo apt-get install jenkins

Start Jenkins:

 sudo systemctl start jenkins

Check Jenkins Status:

 sudo systemctl status jenkins

  1. Configure Jenkins:

Access Jenkins at http://localhost:8080 (or your server’s IP) and complete the initial setup.

  1. Install Plugins:

Install necessary plugins like Git, GitHub, and Docker.

Using Docker on the EC2 instance:

If you plan to use Docker for your builds:

On your EC2 instance, install Docker with:

sudo apt update
sudo apt install docker.io

Start and enable Docker service:

sudo systemctl start docker
sudo systemctl enable docker

Configure Jenkins to Use Docker:

Ensure the Jenkins user has permission to run Docker commands:

sudo usermod -aG docker jenkins

Restart Jenkins to apply changes:

sudo systemctl restart jenkins

Step 4: Create a Jenkins Pipeline

  1. Create a New Pipeline in Jenkins:

    • In Jenkins, click “New Item” and select “Pipeline.”

    • Name your project (e.g., "Webapp_Pipeline").

  1. Define the Pipeline Script: Use the following pipeline script:
pipeline {
    agent any
    stages {
        stage('Clone Repository') {
            steps {
                git branch: 'main', url: 'https://github.com/Sandhyagito/Jenkins-CI-CD-Pipeline-for-a-Web-Application.git'
            }
        }
        stage('Build') {
            steps {
                echo 'Building...'
            }
        }
        stage('Test') {
            steps {
                echo 'Testing...'
            }
        }
        stage('Deploy') {
            steps {
                script {
                    // Deploys the HTML page using a Docker container with NGINX
                    sh '''
                        docker run --name Sandhya-Webserver -d -p 8081:80 -v "$(pwd):/usr/share/nginx/html" nginx
                    '''
                }
            }
        }
    }
}
  1. Save and build the pipeline:
  • Save the pipeline and click “Build Now” to run it.

Console Output:

Step 5: Access Your Deployed Web Application

  1. Open the Correct Port in Security Groups:

    • Go to your EC2 instance’s security settings in the AWS console.

    • Add an inbound rule for port 8081:

      • Type: Custom TCP

      • Port Range: 8081

      • Source: 0.0.0.0/0 (or restrict it to your IP if necessary).

  2. Access the Web Application:

    • In your browser, go to: http://<your-ec2-public-ip>:8081

Understanding the Key Commands

  1. git clone https://github.com/your-username/your-repo-name.git: Clones the remote repository to your local machine.

  2. git add .: Stages all changes in the current directory for the next commit.

  3. git commit -m "Initial commit": Commits the staged changes with a descriptive message.

  4. git push origin main: Pushes your committed changes to the main branch in the remote repository.

  5. docker run --name Sandhya-Webserver -d -p 8081:80 -v "$(pwd):/usr/share/nginx/html" nginx: Runs an NGINX Docker container:

    • --name Sandhya-Webserver: Names the container "Sandhya-Webserver" to avoid conflicts.

    • -d: Runs the container in detached mode (in the background).

    • -p 8081:80: Maps port 8081 on your host to port 80 inside the container (where NGINX serves content).

-v "$(pwd):/usr/share/nginx/html": Here’s what happens step-by-step:

  • Container Creation: The command will create a Docker container named my-webserver using the official NGINX image.

  • Run NGINX in Detached Mode: The -d flag ensures that NGINX runs in the background (detached mode) so it doesn’t block the pipeline.

  • Port Mapping: The -p 8080:80 flag maps port 8080 on your EC2 instance (host) to port 80 inside the container, which is where NGINX serves content by default.

  • Volume Mounting: The -v "$(pwd):/usr/share/nginx/html" option mounts the current working directory ($(pwd)), which contains your index.html file, to the NGINX web directory inside the container (/usr/share/nginx/html). NGINX serves files from this directory, so your web application is served from there.

To View the Path Inside the Docker Container:

If you want to inspect the contents of /usr/share/nginx/html inside the running container, you can do the following:

  1. Find the container ID of your running NGINX container:
docker ps
  1. Access the container’s shell:
docker exec -it <container-id> /bin/bash

Navigate to the NGINX directory:

cd /usr/share/nginx/html
ls

You should see your index.html file here.

This confirms that the file is being served from this location inside the container.

Outcome:

  • NGINX will start within the container and serve the contents of your index.html file.

  • You can access your web application via http://<your-ec2-public-ip>:8080 in your browser.

In summary, this command spins up a Docker container running NGINX that serves your web application.

Troubleshooting Common Issues

  1. Port Already in Use:

    • If you encounter an error about the port being in use, modify the port (e.g., use 8081 instead of 8080) in your Jenkins pipeline script.

  2. Security Group Settings:

    • Ensure your EC2 instance allows inbound traffic on the correct port.

  3. Check Jenkins Console Output:

Monitor the Jenkins console output for errors during each stage.

Conclusion:

This project successfully demonstrates your ability to build and deploy a web application using a CI/CD pipeline with Jenkins and Docker.

DevopsJenkinsDockerCI/CDautomationCloud ComputingWeb Development
Â