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.
Before we start, ensure you have the following prerequisites in place:
Docker: Docker must be installed on your local machine. You can download it here.
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.
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.
Docker Hub Account: Create an account on Docker Hub.
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
# Set the working directory in the container
# 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
# Define the command to run your app
CMD [ "npm", "start" ]
Customize the Dockerfile to match your Next.js project's specific requirements.
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 .
my-nextjs-app with a suitable name for your image.
You can verify that your Docker image was successfully built by listing your local images:
Your Next.js image should be listed.
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
your-dockerhub-username with your actual Docker Hub username.
Authenticate with your Docker Hub account using the following command:
Enter your Docker Hub credentials when prompted.
Now, push your Docker image to Docker Hub:
docker push your-dockerhub-username/my-nextjs-app
Use SSH to connect to your AWS EC2 instance:
ssh -i path/to/your/key.pem ec2-user@your-ec2-instance-ip
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.
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
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.
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.