In our previous guide on Dockerizing Next.js projects, we explored the process of containerizing Next.js applications. While the process worked well, there is one problem, running projects using lengthy Docker commands can be cumbersome, especially when dealing with multiple flags or environment variables. To streamline this process and facilitate deployment, we'll now use Docker Compose.
Docker Compose is a tool designed to simplify the management of multi-container Docker applications. It allows you to define and run multi-container Docker applications using YAML configuration files. With Docker Compose, you can manage complex applications with ease, specifying dependencies, networks, volumes, and other configurations in a single file.
Firstly, sign in to Docker Hub and create a repository. Docker Hub offers both public and private repositories, with options for free and paid accounts. For our purposes, we'll create a public repository named nextjs-blog.
After creating the repository, note down the repository URL, in our use case it is dallotech/nextjs-blog
.
Navigate to your Docker Hub account settings and generate a security token. This token will be used for authentication when pushing Docker images to Docker Hub.
Create a New access token, and while creating provide necessary permissions as per requirement. When the token is created it gives us the option to copy the token
In your local terminal, log in to Docker Hub using the following command to login to docker hub
docker login
Provide your Docker Hub username and the security token generated in the previous step when prompted. Upon successful authentication, you'll receive a "Login Succeeded" message.
Create a file named docker-compose.yml
in your project directory and populate it with the following configuration:
version: '3.8'
services:
app:
image: dallotech/nextjs-blog:latest
platform: linux/amd64
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
restart: always
dallotech/nextjs-blog
with your Docker Hub repository URL that you created in step 1.image: dallotech/nextjs-blog:latest
Specifies the Docker image to use for this service. It pulls the latest version of the image named "dallotech/nextjs-blog" from Docker Hub.platform: linux/amd64
Defines the platform architecture for which this service is intended. In this case, it's specified as "linux/amd64".context: . & dockerfile: Dockerfile
Specifies how to build the Docker image. It indicates that the Dockerfile (Dockerfile
) is located in the current directory (context: .
). This means it will look for a Dockerfile
in the same directory where the docker-compose.yml
file is located.ports: - "3000:3000"
Maps port 3000 on the host machine to port 3000 inside the container. This allows traffic to reach the Next.js application running inside the container.restart: always
Specifies the restart policy for the container. In this case, it's set to "always", which means Docker will always restart the container if it stops for any reason.
Execute the following command in the terminal in the project root directory
docker-compose build
It will build the Docker image defined in the docker-compose.yml
file.
Once the build is complete, run the following command
docker-compose up
This will start the Next.js project locally. Access the project via localhost:3000
in the browser.
Push the Docker image to Docker Hub using the following command
docker-compose push
This command uploads the built image to your Docker Hub repository, making it accessible for deployment.
SSH into your remote server using the ssh command
ssh -i ubuntu@xxx.xxx.xxx.xxx
Replace the IP with the IP of your server.
Create a directory for your Next.js project and navigate into it.
mkdir nextjs-blog
cd nextjs-blog
Create a docker-compose.yml
file in the project directory and paste the configuration from Step 4.
Execute the following command
docker-compose pull
It pulls Docker images from Docker Hub onto the remote server.
Finally, run the following command to run the docker image
docker-compose up
This will run the project in the remote server, you could find the project running in 3000 port.
To access the running project go to xxx.xxx.xxx.xxx:3000
in the browser (please remember to enable inbound requests in the 3000 port)
For hosting this project in a particular domain, please have a look at this tutorial.
In this way, we successfully dockerized the next-js project and deployed it on a remote server
With Docker Compose, Dockerizing and deploying Next.js projects becomes more streamlined and efficient. By following these steps, you can containerize your applications, manage dependencies, and deploy them across different environments with ease. Happy coding! For further information on deployment please write at anuj@dallotech.com
Discover how to streamline your file transfers between local machines and remote servers using SFTP with native OpenSSH on Windows 10, Linux, and macOS. Say goodbye to third-party software complexities and embrace secure, efficient file management.
Learn about the concept of design optimization in the field of user experience (UX) and user interface (UI) design. Discover how iterative refinement leads to superior user experiences through examples and insights. Understand the iterative process of refining designs based on user feedback to create more user-friendly and effective interfaces
Explore how various graph and visualization tools, including line graphs, pie charts, bar graphs, treemaps, KPI dashboards, waterfall charts, and heat maps, can transform financial data analysis. Learn how selecting the right visualization method helps in accurate data interpretation and impactful presentations.
DalloTech is your free consultant for all IT-related issues, and we are always ready to assist you. Your success is our happiness.
Discover Dallo Tech, a leading software development company offering expertise in Mobile and Web App Development, Data Analytics, Visualization, AI, and Blockchain solutions. Elevate your digital journey with our innovative technology services.
Sun - Fri, 10:00 am - 5:00 pm
Saturday : CLOSED
Sun - Fri, 10:00 am - 5:00 pm
Saturday : CLOSED