Deploying Next.js using Docker Compose

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