Deploying a Next.js Book Reader App on AWS EC2 with Jenkins: A Step-by-Step Guide

Learn how to seamlessly deploy your Next.js application on AWS using Jenkins, Docker, and EC2—perfect for students and budding developers!

💡 Introduction

Welcome to the World of Cloud and Automation!

Today, we’re diving into an exciting DevOps project where we'll deploy a Book Reader App built with Next.js on an AWS EC2 instance using Docker. We'll walk you through creating a Jenkins pipeline for this project, setting up a webhook to the GitHub repo, and automating deployments so that every change to the repository triggers the Jenkins pipeline automatically.

This guide is crafted with beginners in mind, offering a step-by-step approach to help you gain confidence with cloud deployments and CI/CD pipelines. Whether you're a student, a budding developer, or just curious about DevOps, we've got you covered!

💡 Pre-requisites: What You Need Before We Start

Before we dive into the deployment process, let’s make sure we have a few essentials in place:

• An AWS Account: Since we'll be using an EC2 instance, you need an active AWS account. If you don’t have one, no worries—you can sign up at aws.amazon.com and even explore the free tier options.




• Basic Understanding of Docker and Jenkins: We’ll be containerizing our Book Reader App using Docker and setting up a CI/CD pipeline with Jenkins. While this guide will cover each step, having some foundational knowledge of these tools will make the process smoother.




• The Spirit to Learn: This is the most important part! Whether you’re a complete beginner or looking to sharpen your skills, bring along a desire to learn and experiment. We’ll take it one step at a time, and you’ll walk away with practical DevOps experience.

💡 Project Implementation

Step 1: Setting Up the AWS EC2 Instance

To get started, we need to spin up an EC2 instance on AWS. Follow these steps:

1. Navigate to the EC2 Dashboard: Head over to your AWS Management Console and select EC2.




2. Launch a New Instance: Click on Launch Instance, and in the configuration settings:

* **AMI:** Select **Ubuntu** as the **Amazon Machine Image (AMI)**.



* **Instance Type:** Choose **t2.small** for a balance of performance and cost.



* **Key Pair:** Select an existing **key-pair** or create a new one for **SSH access**.



* **Storage:** Set **15 GB** of disk space (more if needed).



* **Network Configuration:** Stick with the **default security group** for now.

Launch the Instance: Hit Launch Instance, and wait for it to initialise.

Step 2: Connect to the EC2 Instance

Once the instance is up and running, connect to it using SSH:

ssh -i <your-key.pem> ubuntu@<instance-ip-address>

Make sure to replace <your-key.pem> with your private key file and <instance-ip-address> with your EC2 instance's public IP address.

Step 3: Install Required Tools

Now that you’re connected, let’s set up the necessary tools on the server. Run the following commands:

# Update the package list

sudo apt update -y  



# Install Docker, Node.js, and npm

sudo apt install -y docker.io node npm  



# Enable Docker and add the current user to the Docker group

sudo systemctl enable --now docker  

sudo usermod -aG docker $USER && newgrp docker  



# Install Java and Jenkins

sudo apt install -y fontconfig openjdk-17-jre  

sudo wget -O /usr/share/keyrings/jenkins-keyring.asc https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key  

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

sudo apt update -y  

sudo apt install -y jenkins  



# Enable Jenkins and add it to the Docker group

sudo systemctl enable --now jenkins  

sudo usermod -aG docker jenkins  



# Reboot the instance

sudo reboot

The final reboot command will restart the instance, causing your SSH connection to drop. Wait 2-3 minutes, then reconnect using the SSH command from earlier.

Step 4: Cloning the Project Repository

With the EC2 instance up and running, it’s time to get our Book Reader App onto the server. We'll clone the project directly from the GitHub repository:

# Fork the repo and clone that fork. Here is the repo: https://github.com/Pravesh-Sudha/book-website-nextjs.git

git clone https://github.com/<Your-Github-Username>/book-website-nextjs.git

Once cloned, navigate into the project directory:

cd book-website-nextjs

Step 5: Building the Docker Image

Inside the project directory, you'll find a Dockerfile. Let’s build a Docker image using the following command:

docker build -t book-app:v1 .

This command will package the Next.js app into a Docker image named book-app with the v1 tag.

Step 6: Configuring Security Group Inbound Rules

Before running the Docker container, we need to ensure our EC2 instance can be accessed externally:

1. Go to the AWS EC2 Dashboard: Navigate to the Security Groups section.




2. Select the Default Security Group: Find the security group associated with your instance’s VPC.




3. Edit Inbound Rules: Add the following rules:

• Port 3000 is for our Next.js application.




• Port 8080 is for Jenkins access.

Setting 0.0.0.0/0 allows access from any IP address, which is fine for testing and learning purposes. However, in production environments, consider tightening security rules.

Step 7: Running the Docker Container

With the image built and ports opened, we can now run our Docker container:

docker run --name book-reader -d -p 3000:3000 book-app:v1

• The -d flag runs the container in detached mode.




• The -p 3000:3000 flag maps port 3000 of the container to port 3000 on the EC2 instance.

Step 8: Accessing the Application

To see the Book Reader App in action:

1. Open a Browser:




2. Visit: http://<your-instance-ip>:3000

Replace with your EC2 instance’s public IP address. You should see the Book Reader App up and running! 🚀

Step 9: Automating Deployment with Jenkins CI/CD Pipeline

Now that our Book Reader App is running manually, let’s automate its deployment using a Jenkins CI/CD pipeline. But before that, we need to stop the currently running Docker container:

docker kill book-reader

This ensures that our Jenkins pipeline can take over the deployment process without any conflicts.

Step 10: Accessing Jenkins for the First Time

To set up Jenkins, we need its Initial Admin Password. Retrieve it using:

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

1. Copy the Password.




2. Go to: http://<your-instance-ip>:8080.




3. Paste the Password on the Jenkins setup page.

1. Install Suggested Plugins.




2. Skip the Create Admin User part.




3. Start Using Jenkins.

Step 11: Setting Up the Jenkins Pipeline

To automate our application deployment, follow these steps:

1. Create a New Item:

* **Item Name:** `book-reader-cicd-pipeline`.



* **Project Type:** **Pipeline**.



* **Click Create**.

1. Configure the Pipeline:

• Pipeline Script from SCM: Select this option to pull the code directly from GitHub.




• Source: Choose Git.




• Repository URL:
  
  

https://github.com/<your-github-username>/book-website-nextjs.git

• Branch Configuration: Change the branch from master to main.




• Script Path: Keep it as the default (Jenkinsfile).




• Triggers: Enable GitHub hook trigger for GITScm polling.




• Save Configuration. After Saving to the Jenkinsfile of the project on github. Change the repository URL to your Github account

Step 12: Setting Up the GitHub Webhook

To automate the CI/CD pipeline, we need to link GitHub and Jenkins using a webhook:

1. 
   Clone the Repository:
   

git clone https://github.com/<Your-Github-Username>/book-website-nextjs.git

1. Navigate to the Repository Settings:

• 
  Settings Tab > Webhooks > Add Webhook.

1. Configure the Webhook:

• 
  Payload URL:
  

http://<your-instance-ip>:8080/github-webhook/

• Content-Type: application/json.




• Click on Add Webhook.

Step 13: Testing the CI/CD Pipeline

Let’s test our automated deployment by making a small code change:

1. Edit the Code:

Navigate to src/components/Header.tsx, and on line 28, change the placeholder text from:

"Tell me what you like to read and we will get that ...."

To:

"Search a Book"

1. 
   Commit and Push the Changes:
   

git add .

git commit -m "Updated placeholder text in search bar"

git push origin main

1. Watch Jenkins in Action:

• The Jenkins pipeline will trigger automatically due to the webhook.




• Once the pipeline completes, visit:
  
  

http://<your-instance-ip>:3000

1. Verify the Change:

• You should see the application running with the updated search bar text:
  

"Search a Book"

With the CI/CD pipeline in place, every push to the GitHub repository will automatically deploy the latest version of your Book Reader App!

💡 Conclusion

Congratulations! 🎉 You've successfully deployed a Book Reader App built with Next.js on an AWS EC2 instance using Docker and automated the deployment process with a Jenkins CI/CD pipeline. This project not only demonstrated how to set up a robust CI/CD pipeline but also showcased the power of webhooks for automated deployments.

By integrating Jenkins with GitHub, we ensured that every code change triggers an automated build and deployment, providing a streamlined and efficient DevOps workflow. Whether you're a beginner or an aspiring DevOps engineer, this project is a fantastic stepping stone into the world of cloud automation and continuous delivery.

We hope this guide helped you understand the entire process from setting up the EC2 instance to configuring the Jenkins pipeline and deploying the app automatically. Keep experimenting, keep learning, and don't hesitate to explore new tools and technologies in the DevOps ecosystem.

If you found this tutorial helpful, feel free to share it, drop a comment, or reach out with questions. Stay tuned for more beginner-friendly DevOps projects and tutorials!

Happy Learning and Happy Coding! 🚀😊

✨ For more informative blog, Follow me on Hashnode, X(Twitter) and LinkedIn.