Docker Compose in Action : A Real Case Study for Nextjs Projects

Docker Compose sounds great in theory, but how does it actually look in a real project? In this post, we'll dive into a practical case study where I’ll walk you through the setup of my own Next.js application using Docker Compose.

This isn't just another tutorial—this is the real deal. You’ll see exactly how I configured Redis, MySQL, and Next.js to work together in harmony using Docker. Spoiler alert: It’s easier than you think, and by the end, you’ll be ready to deploy your own stack with confidence.

The Journey Begins:

So, there I was, diving into the world of open-source projects when I stumbled upon a repository that looked perfect for me. But there was one catch—it came with a docker-compose.yml file, which meant I had to get my hands dirty with Docker Compose.

Before we dive into the details of how everything works, let me show you the Docker Compose file I used to set up the environment:

//docker-compose.yml
version: '2.3'

services:
  redis-server:
    restart: always
    image: redis:4.0
    platform: "linux/amd64"
    container_name: redis-server
    command: redis-server --requirepass ubuntu
    sysctls:
      - net.core.somaxconn=65535
    ports:
      - "6379:6379"
    volumes:
      - redis-data:/data
    mem_limit: 96m

  redis-insight:
    image: redislabs/redisinsight:latest
    platform: "linux/amd64"
    container_name: redis-insight
    ports:
      - "8001:8001"
    depends_on:
      - redis-server

  mysql-server:
    restart: always
    image: mysql:5.7
    container_name: mysql-server
    platform: "linux/amd64"
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
      MYSQL_DATABASE: shiptalker
    ports:
      - "3306:3306"
    volumes:
      - mysql-data:/var/lib/mysql
    mem_limit: 512m

volumes:
  redis-data:
    driver: local
  mysql-data:
    driver: local

In this file, we define three services—essentially, a service in Docker Compose refers to a containerized process, such as a database or server, that your application depends on. these are the core components of our project that need to run.

Here’s a quick overview of the services we’re using:

1. Redis Server: This service is responsible for running a Redis instance, which acts as our in-memory data store, used for caching and real-time analytics.
2. Redis Insight: This is a web-based GUI for managing and visualizing your Redis data. It provides an easier way to interact with Redis compared to the command line.
3. MySQL Server: The database service where all the structured data (like user information) is stored.

Now, let's break it down step by step to see how this configuration powers the entire stack.

Step 1: MySQL – Setting the Foundation

The first challenge on this journey was setting up MySQL. I opened up MySQL Workbench and created a new database.

Once the database was ready, the next step was to grab the all-important DATABASE_URL. This key detail was needed in the project’s env.js file, and without it, nothing would work.

Since this is an open-source project, I need to follow their DATABASE_URL format. It looks something like this :

mysql://youruser:yourpassword@localhost:3306/yourdatabase

his URL tells the application how to connect to your MySQL database:

• youruser: The MySQL user (in this case, it's root by default).
• yourpassword: The password for the MySQL user.
• localhost: The host where MySQL is running.
• 3306: The default MySQL port.
• yourdatabase: The database name

If your MySQL database doesn't require a password, you can simply leave out the password, like this:

mysql://youruser@localhost:3306/yourdatabase

You can verify your MySQL user and port with the following queries in the MySQL command line:

• To check the current user:

SELECT user();

• To check the port MySQL is running on:

SHOW VARIABLES WHERE Variable_name = 'port';

Once your DATABASE_URL is configured, the application will be able to connect to the MySQL database.

Step 2: Setting Up Redis

Now that MySQL was up and running, it was time to tackle the next step of the journey: setting up Redis. But before we dive into the setup, let me explain what Redis is and why it's essential for this project.

Redis is like the speedster of the data storage world. It’s an in-memory data structure store that acts as a lightning-fast cache. Think of it as the hyper-efficient assistant that quickly fetches and stores data, so your website doesn’t have to do the heavy lifting every single time.

Now, I didn’t have Redis installed on my laptop yet, so that was the next task. If you're setting this up on Windows, the official Redis documentation will guide you through the process. But here's the simplified version of what I did:

1️⃣Check Your Setup:
Make sure Ubuntu and WSL 2 (Windows Subsystem for Linux) are installed and working on your laptop.
Before we can install Redis on Windows, we need to enable the Windows Subsystem for Linux (WSL).

WSL is a compatibility layer that enables running Linux binary executables natively on Windows 11 and Windows Server 2019.

Open PowerShell as Administrator and run the following command to enable WSL:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

After running this command, you need to reboot your system. Note that this step only needs to be done once.

Once the WSL is enabled, launch the Microsoft Windows Store and search for your preferred Linux distribution. In this example, we will use Ubuntu.

Download the latest version of Ubuntu and wait for it to finish the installation.

2️⃣Install Redis:
With Ubuntu and WSL 2 all set up, I jumped into the Ubuntu terminal and ran the commands needed to install Redis. It’s a straightforward process :

sudo apt-get install lsb-release curl gpg
curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
sudo chmod 644 /usr/share/keyrings/redis-archive-keyring.gpg
echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
sudo apt-get update
sudo apt-get install redis

3️⃣Configure and Start Redis:
After installation, I started the Redis server with the following command:

sudo service redis-server start

Redis sprang to life, and just like that, I had a caching system up and running.

4️⃣Connect to Redis:
Once Redis is running, you can test it by running redis-cli:

redis-cli

Test the connection with the ping command:

127.0.0.1:6379> ping
PONG

Step 3 : Install Redis Insight

Redis Insight is a powerful tool for visualizing and optimizing data in Redis or Redis Stack, making real-time application development easier and more fun than ever before. Redis Insight lets you do both GUI- and CLI-based interactions in a fully-featured desktop GUI client.

You can check out the installation here. It’s pretty straightforward—just head over to the Microsoft Store and download it. Easy peasy!

Step 4: Docker to the Rescue

With MySQL and Redis set up individually, things were working, but let’s be real—it wasn’t the most convenient setup. I found myself constantly running different services manually, and that’s when I realized: Docker could save me a lot of time and headaches. Instead of starting each service one by one, Docker allows us to run everything at once with the power of Docker Compose.

Before we dive in, if you haven't set up Docker on your machine yet, don’t worry! I’ve created a detailed tutorial on how to install Docker👇🏻

Now, with the docker dekstop and docker-compose.yml ready, running all of these services together is simple. Here’s what you need to do:

1. Open Ubuntu: Head over to your Ubuntu terminal (make sure you’re using WSL 2).
2. Navigate to the Directory: Use cd to move into the directory where your docker-compose.yml file is located.
3. Start the Services: Run the following command to bring everything up:

docker-compose up

This command tells Docker to spin up all the services defined in your Compose file. It’s like hitting the power button for your project—everything just starts working!

And that’s it! You don’t have to start Redis, MySQL, or Redis Insight individually anymore. Docker Compose does all the heavy lifting for you.

---

So there you have it—your docker-compose setup is good to go!. If you found this blog post helpful, feel free to share it with others who might benefit from it. And hey, why not hit that follow button for more nerdy goodness on JavaScript, React, and all things web development?

Let's stay in touch on Instagram, Twitter, and GitHub—where the real magic happens.

Thanks for sticking around! 😊