DEV Community

Cover image for Building and Deploying a Next.js Website with Docker
Rishi Kumar
Rishi Kumar

Posted on • Updated on

Building and Deploying a Next.js Website with Docker

Next.js is a popular framework for building server-rendered React applications. Combining it with Docker can simplify deployment and ensure consistency across different environments. In this tutorial, we'll walk you through the process of building a Docker image for your Next.js website on your localhost, pushing it to Docker Hub, and deploying it on an Amazon EC2 instance.

Prerequisites

Before we start, ensure you have the following prerequisites in place:

  1. Docker: Docker must be installed on your local machine. You can download it here.

  2. Node.js and Next.js: Your Next.js website project should be set up and running on your local machine. If not, follow the Next.js documentation to create a Next.js project.

  3. Amazon EC2 Instance: You should have an Amazon EC2 instance up and running. If you don't have one, follow Amazon's documentation on how to create an EC2 instance.

  4. Docker Hub Account: Create an account on Docker Hub.

Step 1: Create a Dockerfile

Navigate to your Next.js project directory and create a Dockerfile. Below is an example Dockerfile for a Next.js project:

# Use an official Node.js runtime as the base image
FROM node:16

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install project dependencies
RUN npm install

# Copy all source files to the working directory
COPY . .

# Build the Next.js application
RUN npm run build

# Expose the port your app runs on
EXPOSE 3000

# Define the command to run your app
CMD [ "npm", "start" ]
Enter fullscreen mode Exit fullscreen mode

Customize the Dockerfile to match your Next.js project's specific requirements.

Step 2: Build the Docker Image

Before building the Docker image, it's a good practice to create a .dockerignore file to specify which files or directories should be excluded from the Docker build context. This can help reduce the size of the Docker image and improve build times.

In your terminal, navigate to your Next.js project directory containing the Dockerfile and run the following command to build the Docker image:

docker build -t my-nextjs-app .
Enter fullscreen mode Exit fullscreen mode

Replace my-nextjs-app with a suitable name for your image.

Step 3: Verify the Local Image

You can verify that your Docker image was successfully built by listing your local images:

docker images
Enter fullscreen mode Exit fullscreen mode

Your Next.js image should be listed.

Step 4: Tag the Image for Docker Hub

Before pushing the image to Docker Hub, tag it with your Docker Hub username and the image name:

docker tag my-nextjs-app your-dockerhub-username/my-nextjs-app
Enter fullscreen mode Exit fullscreen mode

Replace your-dockerhub-username with your actual Docker Hub username.

Step 5: Log in to Docker Hub

Authenticate with your Docker Hub account using the following command:

docker login
Enter fullscreen mode Exit fullscreen mode

Enter your Docker Hub credentials when prompted.

Step 6: Push the Image to Docker Hub

Now, push your Docker image to Docker Hub:

docker push your-dockerhub-username/my-nextjs-app
Enter fullscreen mode Exit fullscreen mode

Step 7: SSH into EC2 Instance

Use SSH to connect to your AWS EC2 instance:

ssh -i path/to/your/key.pem ec2-user@your-ec2-instance-ip
Enter fullscreen mode Exit fullscreen mode

Replace path/to/your/key.pem with the path to your EC2 key pair file and your-ec2-instance-ip with your actual EC2 instance's public IP.

Step 8: Pull Image on EC2

On your EC2 instance, use the following command to pull the Docker image you pushed to Docker Hub:

docker pull your-dockerhub-username/my-nextjs-app
Enter fullscreen mode Exit fullscreen mode

Step 9: Run Container on EC2

Finally, run a container on your EC2 instance using the Docker image:

docker run -d -p 3000:3000 your-dockerhub-username/my-nextjs-app
Enter fullscreen mode Exit fullscreen mode

This command maps port 3000 on the EC2 instance to port 3000 in the container. Adjust the ports and container options as needed.

Step 10: Website is Live!

Your Next.js website is now live on your EC2 instance as a Docker container. Access it using your EC2 instance's public IP or domain name.

Congratulations! You've successfully built a Docker image for your Next.js website, pushed it to Docker Hub, and deployed it on an EC2 instance. Docker simplifies the process of packaging and deploying Next.js applications, making it easier to manage your website in a containerized environment.


By following these steps, you can efficiently deploy your Next.js website using Docker, ensuring consistency and ease of deployment across different environments. Docker is a valuable tool for modern web development and deployment practices, helping you streamline your deployment process.


Extra: NestJS Developers: Upgrade Your Logging with This Simple Guide

Top comments (2)

Collapse
 
havran profile image
Juraj Chlebec

I recommend to look official way, how to create docker image. In this way you get whole node modules dir inside your docker image - and you do not want that.

Collapse
 
mrrishimeena profile image
Rishi Kumar

Right, This is a simple guide for people who are new to coding.