CI/CD Pipeline for Next.js: Jenkins, Docker, and GitHub Webhooks Integration

Demo

Objective

In this article, you will learn how to automate the deployment of a Next.js application using Jenkins and Docker, triggered by GitHub webhooks. Key takeaways include:

• Setting up GitHub Webhooks: How to configure a webhook to notify Jenkins on every code push.
• Jenkins Pipeline: Writing a Jenkinsfile to automate the build, test, and deployment process.
• Docker Integration: Building and running a Docker container for the Next.js app.
• End-to-End Deployment: Automating the deployment to a VPS and ensuring the app is live on port 3000.

This guide will be particularly useful for DevOps practitioners looking to streamline their CI/CD pipelines.

The architecture of this setup involves multiple tools working together to automate the process of building and deploying a Next.js application. Here’s a simplified explanation:

1. GitHub: This is where your source code is hosted. When you push changes to the repository, GitHub sends a notification (webhook) to Jenkins.
2. GitHub Webhook: A webhook is set up on GitHub to trigger Jenkins every time you push changes. It acts like an alert system, notifying Jenkins that there’s a new update to process.
3. Jenkins: Jenkins is a tool that automates tasks like building and deploying code. Once Jenkins receives the webhook, it starts the pipeline process.
   • It clones your GitHub repository.
   • Jenkins uses a Jenkinsfile () to define the steps for building and deploying the app.
4. Docker: Docker is used to create a container, which is like a portable, isolated environment for your app. Jenkins builds this container using the Dockerfile in your project, ensuring that the app runs consistently across different systems.
5. VPS (Virtual Private Server): This is where Jenkins and Docker are running. After Jenkins builds the Docker container, it deploys it on this server, making your Next.js app accessible on a specific port (e.g., 3000).

+-------------------+                +------------------+
|    GitHub Repo    |                |   Jenkins on     |
|                   | --Webhook-->   |    VPS (8080)    |
|   Source Code,    |                |                  |
|   Dockerfile,     |                +------------------+
|   Jenkinsfile     |                | Builds Docker    |
+-------------------+                | Images and Runs  |
                                     | Containers       |
                                     +------------------+
                                             |
                                             |
                                      +------------------+
                                      |     VPS with     |
                                      |   Docker (3000)  |
                                      |                  |
                                      | Docker Container |
                                      |   (Running App)  |
                                      +------------------+
                                             |
                                             |
                                      +-------------------+
                                      |    End-Users      |
                                      |                   |
                                      | Access app via    |
                                      | http://vps_ip:3000|
                                      +-------------------+

Step 1: Deploy Next.js app using Docker

Dockerfile

FROM node:18.17-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install --production

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

1. Build the Docker Image:

docker build -t techblog-app .

This builds a Docker image from the Dockerfile and tags it as techblog-app.

2. Run the Docker Container:

docker run -d --name techblog-container -p 3000:3000 techblog-app

This runs the container in detached mode (-d) with the name techblog-container, mapping port 3000 of the container to port 3000 on the host machine.

3. Check active Docker Container:

docker ps

By following these steps, your Next.js application will be built, deployed, and accessible on http://localhost:3000

Now to automate this deployment process using Jenkins

Step 2: Configure Jenkins

Install Jenkins on VPS

Make sure that your Jenkins instance has the GitHub Integration Plugin installed:

1. Open Jenkins > Manage Jenkins > Manage Plugins.

2. Under the Available tab, search for the GitHub Integration Plugin and install it.

3. Restart Jenkins if required.

Step 3: Create a Jenkins Pipeline to Automate Deployment

1. Open Jenkins > New Item > Select Pipeline > Enter a name for your pipeline > Click OK.

2. Under Pipeline Definition, select Pipeline script from SCM.

3. Set the SCM to Git and enter the repository URL.

4. Under Branches to build, specify the branch you want Jenkins to trigger the build for (e.g., main).

5. Under Script Path, specify the path to your Jenkinsfile (default is Jenkinsfile in the root directory of source code).

Jenkinsfile

pipeline {  
    agent any  
    stages {  
        stage('Clone Repository') {
            steps {
                git branch: 'main', url: 'https://github.com/apoorva-01/Next.js-Ghost-Blog.git'
            }
        }
        stage('Build Docker Image') {
            steps {
                  sh '''
                    docker stop techblog-container || true
                    docker rm techblog-container || true
                    docker build -t techblog-app .
                    docker run -d --name techblog-container -p 3000:3000 techblog-app
                  '''
            }
        }
    }  
}  

Step 4: Configure GitHub Webhook

1. Go to your GitHub repository.

2. Navigate to Settings > Webhooks.

3. Click Add webhook.

• Payload URL: http://your_vps_ip:8080/github-webhook/

• Content type: Set to application/json.

• Trigger: Select “Just the push event.”

4. Click Add Webhook.

This webhook will trigger Jenkins whenever a new push is made to the GitHub repository.