< Back
18FEB

Deploying Next.js using Docker Compose

DevOps
Published by:Anuj Poudel
 

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.

 

What is 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.

 

Step 1: Create a Docker Hub Repository

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.

 

Step 2: Generate a Security Token

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

 

Step 3: Docker Login

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.

 

 

Step 4: Dockerize with Docker Compose

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
This configuration specifies the Docker image to build, ports to expose, and other service settings. Replace 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.
     
     

Step 5: Build and Run Locally

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.

 

Step 6: Push to Docker Hub

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.

 

Step 7: Pull and Deploy on Remote Server

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 

 

Conclusion

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

Share:

Latest posts

18JUN
DevOps

Transfer Easy Files with Native OpenSSH on Windows, Linux, and Mac: A Complete Guide

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.

22APR
Technology

Design Optimization for better user experience

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

27MAR
Technology

Key to Financial Data Visualization: How Selection of Graphs make data more informative?

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.

Start your project today

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.

Contact

Khumaltar Height Marg, Lalitpur, Nepal
+9779849933272
info@dallotech.com

Open Hours

Sun - Fri, 10:00 am - 5:00 pm

Saturday : CLOSED

© 2018 - 2024 . DalloTech Pvt. Ltd. All Rights Reserved