DEV Community

Cover image for # 🚀 From “Why is nothing working?” to “Now I Understand Everything” — My Docker Compose + MongoDB + Volume Learning Journey
Prajwal P
Prajwal P

Posted on

# 🚀 From “Why is nothing working?” to “Now I Understand Everything” — My Docker Compose + MongoDB + Volume Learning Journey

#docker #mongodb #node #devops

``## 📌 Introduction

This is not just a blog.

This is a complete journey of how I:

  • Deployed a multi-container application on EC2
  • Debugged Docker networking issues
  • Fixed backend and frontend problems
  • Understood MongoDB behavior
  • And finally learned Docker volumes deeply

I didn’t learn this from theory.

I learned it by:

`text id="k5l1tt"
breaking things → debugging → understanding → fixing
`

🏗️ Project Architecture

My setup had 3 containers:

  1. Node.js App (Frontend + Backend)
  2. MongoDB Database
  3. Mongo Express (DB UI)

All managed using Docker Compose.

⚙️ Step 1: Initial Setup

I ran:

`id="g3f8t0"
docker compose up -d
`

Everything started successfully.

When I opened:

`id="v34txs"
http://<EC2-IP>:3000
`

👉 UI loaded
👉 But no data was showing from MongoDB ❌

❗ Problem 1: No Data in UI

`text id="x0k3qv"
Data from MongoDB:
`

👉 Empty

🔍 Debugging Step 1: Browser Network Tab

I checked DevTools → Network

`id="zk6v0l"
/fetch-data → FAILED ❌
`

❗ Problem 2: Wrong API URL

Frontend code:

`id="s2o64r"
fetch("http://localhost:3000/fetch-data")
`

👉 Wrong ❌

Why?

  • Browser → localhost = my laptop
  • App → running on EC2

✅ Fix 1: Use Relative Path

`id="kz8yqf"
fetch("/fetch-data")
`

🔍 Debugging Step 2: API Response

Now API returned:

`id="r1w9cz"
200 OK
`

But response:

`id="2l6c9c"
{}
`

❗ Problem 3: MongoDB Empty

I checked MongoDB:

`id="s1vxz1"
show dbs
use my-db
show collections
`

👉 No collections ❌

✅ Fix 2: Insert Data

`id="7x6pkn"
db.my-collection.insertOne({
data: "some dynamic data loaded from DB"
})
`

🔍 Debugging Step 3: Still Not Working

Even after inserting data:
👉 UI still empty ❌

❗ Problem 4: Backend Not Fetching Data

Backend was not:

  • Selecting DB properly
  • Querying collection
  • Returning response

✅ Fix 3: Backend Logic

`js id="v9u5ah"
const db = client.db("my-db");

db.collection("my-collection").findOne({}, function (err, result) {
res.json({
data: result.data
});
});
`

🔍 Debugging Step 4: Still Empty UI

Now:

  • API working ✅
  • DB has data ✅
  • Backend correct ✅

👉 UI still empty ❌

❗ Problem 5: Frontend Bug

Mistake:

`id="n3x7ml"
fetch('/fetch-data');
const jsonResponse = await response.json();
`

👉 response undefined ❌

✅ Fix 4: Correct Fetch

`js id="9z1qj8"
const response = await fetch('/fetch-data');
const jsonResponse = await response.json();
`

❗ Problem 6: DOM Not Loaded

`id="3u7q3x"
document.getElementById('dynamic')
`

👉 ran too early ❌

✅ Fix 5: window.onload

`js id="y5u2p0"
window.onload = async function () {
const response = await fetch('/fetch-data');
const jsonResponse = await response.json();

document.getElementById('dynamic').textContent = jsonResponse.data;
};
`

❗ Problem 7: Container Not Updating

Changes not reflecting ❌

✅ Fix 6: Rebuild + Recreate

`id="0j6yxn"
docker compose down
docker compose up --build --force-recreate -d
`

🎉 Final Result

`id="l8m1n7"
Data from MongoDB: some dynamic data loaded from DB
`

💾 The Biggest Learning — Docker Volumes

After everything worked, I discovered a critical issue.

When I ran:

`id="w5n6t2"
docker compose down -v
`

👉 My database data was gone 💥

❗ Why Data Was Lost

Because:

  • Containers are temporary
  • Data inside container is NOT persistent

🔥 What Is a Docker Volume?

A Docker volume is persistent storage mounted directly into a container.

🧠 My Initial Wrong Thinking

“Volume is just a link”

❌ WRONG

✅ Correct Understanding

Volume is directly mounted into container

📦 MongoDB Data Path

`id="d7n9rs"
/data/db
`

🔗 What Docker Does

`yaml id="3c5y7a"
volumes:

  • mongo-data:/data/db `

👉 Docker:

`text id="9n4qkz"
mounts volume → /data/db
`

📊 Visual Flow

`id="y0h4b8"
[ Container ]
│
▼
/data/db
│
▼
[ Docker Volume ]
│
▼
[ Host Storage ]
`

🔁 What Happens on Recreate

`id="5v1q6k"
docker compose down
docker compose up
`

  • Container deleted ❌
  • Volume remains ✅
  • New container created ✅
  • Volume mounted again ✅

👉 MongoDB reads existing data ✅

💡 Real-world Analogy

  • Container = Laptop 💻
  • Volume = External Hard Disk 💾

⚠️ Critical Command

`id="3m9q8x"
docker compose down -v
`

👉 Deletes volume ❌
👉 Deletes data 💥

✅ Safe Command

`id="n8k2z7"
docker compose down
`

👉 Keeps data ✅

🧠 Final Understanding

  • Container = temporary
  • Volume = persistent
  • Data lives in volume
  • Container just uses it

🎯 Final DevOps Insight

“Containers are ephemeral, but data must be persistent. Docker volumes ensure data survives container lifecycle.”

🚀 What I Learned

This project taught me:

  • Docker Compose networking
  • Service name vs localhost
  • EC2 deployment
  • MongoDB authentication
  • Backend API debugging
  • Frontend async handling
  • Docker rebuild vs recreate
  • Docker volumes (most important 🔥)

🧠 Interview Answer

“I deployed a multi-container app using Docker Compose on EC2, debugged networking and application issues, and implemented Docker volumes to ensure persistent database storage across container restarts.”

📢 Connect with me

Docker #DockerCompose #DockerVolumes #DevOps #MongoDB #AWS #NodeJS #Debugging #LearningByDoing #30DaysofAWSTerraform

Top comments (0)