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" ]

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 .

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

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

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 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

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

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

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

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