Welcome Devs to the world of DevOps and Cloud computing. Today, we are diving into an exciting Next.js project—we’ll be deploying a Book reader app using a Docker container. This setup will be hosted on AWS, the most popular cloud provider. We’ll create an EC2 instance as our host machine, build a Docker image of the app, and run it in a container. This beginner-friendly guide will help you understand Docker’s utility. So, without further ado, let’s get started! Prerequisites Prerequisites Before we start building and deploying the project, we need to ensure we have the following requirements met: Basic Knowledge of JavaScript: Since our app is built with Next.js, a basic understanding of Javascript is appreciated.
Basic Understanding of Docker: We’ll be containerizing our app using Docker, so having a decent understanding of Docker is recommended.
An AWS Account: We will be setting up this project on an Ec2 instance, for that we would need an AWS account, so create a AWS account, if you don’t have one. Basic Knowledge of JavaScript: Since our app is built with Next.js, a basic understanding of Javascript is appreciated. Basic Knowledge of JavaScript: Basic Understanding of Docker: We’ll be containerizing our app using Docker, so having a decent understanding of Docker is recommended. Basic Understanding of Docker: An AWS Account: We will be setting up this project on an Ec2 instance, for that we would need an AWS account, so create a AWS account, if you don’t have one. An AWS Account: After ensuring the above requirements are met, we can start with the project. Step 1: Setting Up the EC2 Instance Step 1: Setting Up the EC2 Instance We will start the project by creating the Ec2 instance from the Ec2 dashboard. This will act as our host machine for the project. 1. Launching the EC2 Instance: 1. Launching the EC2 Instance: Head over to your EC2 Dashboard and click Launch Instance.


Name: Set a name like book-reader-app.


AMI: Select Ubuntu as the Amazon Machine Image.


Instance Type: Choose t2.micro (since it’s Free Tier eligible).


Key Pair:

Select an existing key pair, or
If you don’t have one, create a new key pair and download it (.pem file).



Security Group:

Create a new Security Group (SG).
Allow SSH (port 22) access and any other necessary ports.



Leave the rest of the settings as default and hit Launch Instance. Head over to your EC2 Dashboard and click Launch Instance. Head over to your EC2 Dashboard and click Launch Instance. Name: Set a name like book-reader-app. Name: Set a name like book-reader-app. AMI: Select Ubuntu as the Amazon Machine Image. AMI: Select Ubuntu as the Amazon Machine Image. Instance Type: Choose t2.micro (since it’s Free Tier eligible). Instance Type: Choose t2.micro (since it’s Free Tier eligible). Key Pair:

Select an existing key pair, or
If you don’t have one, create a new key pair and download it (.pem file). Key Pair: Select an existing key pair, or
If you don’t have one, create a new key pair and download it (.pem file). Select an existing key pair, or If you don’t have one, create a new key pair and download it (.pem file). Security Group:

Create a new Security Group (SG).
Allow SSH (port 22) access and any other necessary ports. Security Group: Create a new Security Group (SG).
Allow SSH (port 22) access and any other necessary ports. Create a new Security Group (SG). Allow SSH (port 22) access and any other necessary ports. Leave the rest of the settings as default and hit Launch Instance. Leave the rest of the settings as default and hit Launch Instance. 2. Connecting to the EC2 Instance: 2. Connecting to the EC2 Instance: Once the instance is running, select the instance and hit connect.
Under SSH connect, copy the provided SSH command: Once the instance is running, select the instance and hit connect. Under SSH connect, copy the provided SSH command: ssh -i <your-key.pem> ubuntu@<public-ip-address-of-instance> ssh -i <your-key.pem> ubuntu@<public-ip-address-of-instance> Important: If you created a new key pair, set the correct permissions: chmod 400 <your-key.pem> chmod 400 <your-key.pem> Make sure you are in the dir where the pem file is stored.
Paste the SSH command into your terminal, type yes when prompted, and boom—you’re inside the instance! Make sure you are in the dir where the pem file is stored. Paste the SSH command into your terminal, type yes when prompted, and boom—you’re inside the instance! Step 2: Installing Docker, Node.js, and NPM Step 2: Installing Docker, Node.js, and NPM To install the required tools like Docker, node js and NPm, use the following commands: To install the required tools like Docker, node js and NPm, use the following commands: sudo apt update -y sudo apt update -y sudo apt install -y docker.io sudo apt install -y docker.io sudo systemctl enable --now docker sudo systemctl enable --now docker sudo usermod -aG docker $USER && newgrp docker sudo usermod -aG docker $USER && newgrp docker sudo apt install -y node npm sudo apt install -y node npm Verify the installations: docker --version docker --version node -v node -v npm -v npm -v If you see the version numbers, you’re all set! Step 3: Cloning the repo and running the Project After setting up the host machine, we will clone the code from the github repo. I have hosted the code on application on Github repo to save some time. Clone the GitHub Repository:
First, clone the Book Reader App repository using Git:
https://github.com/rajudandigam/book-website-nextjs-app.git


Navigate to the Project Directory: Clone the GitHub Repository:
First, clone the Book Reader App repository using Git:
https://github.com/rajudandigam/book-website-nextjs-app.git Clone the GitHub Repository: Clone the GitHub Repository: First, clone the Book Reader App repository using Git: https://github.com/rajudandigam/book-website-nextjs-app.git https://github.com/rajudandigam/book-website-nextjs-app.git Navigate to the Project Directory: Navigate to the Project Directory: Navigate to the Project Directory: cd book-website-nextjs-app cd book-website-nextjs-app Install the Required Packages: Install the Required Packages: Install the Required Packages: npm install npm install Start the Application in Development Mode: Start the Application in Development Mode: Start the Application in Development Mode: npm run dev npm run dev Step 4: Open Port 3000 in the Security Group Since Next.js application runs on port 3000, we need to allow port 3000 in the inbound rules of our security group that is attached to the instance, For that follow the steps below: Go to your AWS EC2 Dashboard.


Navigate to the Security Groups.


Select the security group attached to your instance.


Click on Edit Inbound Rules.


Add a rule to allow port 3000 with 0.0.0.0/0 (for testing purposes). Go to your AWS EC2 Dashboard. Go to your AWS EC2 Dashboard. AWS EC2 Dashboard Navigate to the Security Groups. Navigate to the Security Groups. Security Groups. Select the security group attached to your instance. Select the security group attached to your instance. security group Click on Edit Inbound Rules. Click on Edit Inbound Rules. Edit Inbound Rules Add a rule to allow port 3000 with 0.0.0.0/0 (for testing purposes). Add a rule to allow port 3000 with 0.0.0.0/0 (for testing purposes). port 3000 0.0.0.0/0 Now, you should be able to access the app using: Now, you should be able to access the app using: http://<public-ip-address>:3000 http://<public-ip-address>:3000 Step 5: Understanding the Dockerfile Step 5: Understanding the Dockerfile The application code contains the Dockerfile for the project, it is a multi-stage docker file that is efficient in size and performance, a brief explanation of the dockerfile is provided below: # Stage 1: Build Stage
FROM node:20-alpine AS builder

WORKDIR /app

# Install dependencies separately for caching
COPY package*.json ./
RUN npm install

# Copy the rest of the app
COPY . .

# Build the Next.js app
RUN npm run build

# Install only production dependencies
RUN npm ci --only=production # Stage 1: Build Stage
FROM node:20-alpine AS builder

WORKDIR /app

# Install dependencies separately for caching
COPY package*.json ./
RUN npm install

# Copy the rest of the app
COPY . .

# Build the Next.js app
RUN npm run build

# Install only production dependencies
RUN npm ci --only=production 🧱 Build Stage: 🧱 Build Stage: Base Image: We are using node-alpine as base image because it is lightweight
Working Directory: /app is where our app will live.
Dependency Caching: Installing packages using package.json first helps with caching in Docker.
Build the App: npm run build builds the application
Production Dependencies: We switch to production-only packages to ensure that  the image size is small. Base Image: We are using node-alpine as base image because it is lightweight Base Image Working Directory: /app is where our app will live. Working Directory Dependency Caching: Installing packages using package.json first helps with caching in Docker. Dependency Caching Build the App: npm run build builds the application Build the App Production Dependencies: We switch to production-only packages to ensure that  the image size is small. Production Dependencies production-only packages # Stage 2: Production Stage
FROM node:20-alpine AS runner

WORKDIR /app

# Copy the built app from the build stage
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/public ./public
COPY --from=builder /app/next.config.js ./next.config.js

ENV NODE_ENV=production

EXPOSE 3000

CMD ["npm", "run", "start"] # Stage 2: Production Stage
FROM node:20-alpine AS runner

WORKDIR /app

# Copy the built app from the build stage
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/public ./public
COPY --from=builder /app/next.config.js ./next.config.js

ENV NODE_ENV=production

EXPOSE 3000

CMD ["npm", "run", "start"] 🚀 Production Stage: 🚀 The second stage uses a fresh Node.js Alpine image.
We only copy the essential files that is needed to run the app in production.
Expose Port 3000: We are exposing port 3000 where our application will run
Start the Application: The CMD command runs the app in production mode. The second stage uses a fresh Node.js Alpine image. second stage Node.js Alpine We only copy the essential files that is needed to run the app in production. essential files Expose Port 3000: We are exposing port 3000 where our application will run Expose Port 3000: Start the Application: The CMD command runs the app in production mode. Start the Application Step 6: Building and Running the Docker Container Build the Docker Image:
We will build the docker image using the following command:
docker build -t book-read-app:v1 Build the Docker Image:
We will build the docker image using the following command:
docker build -t book-read-app:v1 Build the Docker Image: Build the Docker Image: We will build the docker image using the following command: docker build -t book-read-app:v1 docker build -t book-read-app:v1 This will create a Docker image named book-read-app with the v1 tag. Docker image book-read-app 2. Run the Docker Container: 2. Run the Docker Container: To run a container of the application, use the following command docker run -d -p 3000:3000 book-read-app:v1 docker run -d -p 3000:3000 book-read-app:v1 The -d flag runs the container in detached mode, and the -p flag maps port 3000 of the container to port 3000 of the EC2 instance. Step 7: Accessing the Application Step 7: Accessing the Application Open your browser and go to: Open your browser and go to: http://<public-ip-address>:3000 http://<public-ip-address>:3000 You should now see the Book Reader App up and running!
You can read the sample book, underline important parts, and explore the app’s features. You should now see the Book Reader App up and running! You can read the sample book, underline important parts, and explore the app’s features. read the sample book, underline important parts, and explore 💡 Conclusion 💡 Conclusion And there you have it, folks! We've successfully deployed our Book Reader App on an AWS EC2 instance, containerized it using Docker, and followed best practices with a multi-stage Dockerfile. By going through this project, we’ve not only sharpened our skills with Next.js and Docker but also got hands-on experience with cloud computing using AWS. Book Reader App AWS EC2 Docker best practices multi-stage Dockerfile This journey demonstrates how powerful containerization can be in making our applications more portable, scalable, and easy to manage. Plus, running the app inside a Docker container ensures a consistent environment, whether on a local machine or in the cloud. containerization portable scalable manage We hope this tutorial helped you gain confidence in building and deploying applications on the cloud. If you encounter any challenges or if you have more ideas to make this project even cooler, don’t hesitate to drop your thoughts in the comments!

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

How to Deploy a Next.js Book Reader App on AWS with Docker

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Cut Load Times in Half with These Next.js Tweaks

105 Stories To Learn About K8s

10 Ways to Future-Proof Your Business With Cloud

10 Ways to Reduce Data Loss and Potential Downtime Of Your Database

10 Upcoming DevOps Conferences for 2018

101 Stories To Learn About Cloud Infrastructure

Cut Load Times in Half with These Next.js Tweaks

105 Stories To Learn About K8s

10 Ways to Future-Proof Your Business With Cloud

10 Ways to Reduce Data Loss and Potential Downtime Of Your Database

10 Upcoming DevOps Conferences for 2018

101 Stories To Learn About Cloud Infrastructure

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps