🚀 Multi-Environment Ticket Management Application

Complete Dockerized Deployment (Dev Backend + Prod Backend + React Frontend + MongoDB)

This project demonstrates a complete multi-environment application deployment featuring:

• Dev Backend (Flask)
• Prod Backend (Flask + Gunicorn)
• Frontend (React)
• MongoDB Database
• Docker & Docker Compose Multi-Service Orchestration
• Networking, Environment Handling & Service Communication

This repository fulfills the Multi-Environment Deployment Assessment requirements and includes complete troubleshooting notes.

---

📌 Features

Backend (Dev)

• Flask development server
• Auto-reload
• Accessible at: http://localhost:3001

Backend (Prod)

• Flask app served using Gunicorn
• Optimized for production
• Accessible at: http://localhost:3002

Frontend

• React application
• Communicates with both dev & prod backends
• Accessible at: http://localhost:3005

Database

• MongoDB running as a dedicated container
• Shared across dev and prod environments

Health Endpoints

Both environments include:

GET /health → {"status":"ok"}

---

🗂 Folder Structure

multienv_deployment_DEEPIKA_NARENDRAN/
├── backend
│   ├── dev
│   │   ├── app.py
│   │   ├── Dockerfile
│   │   ├── requirements.txt
│   │   └── templates
│   │       └── index.html
│   └── prod
│       ├── app.py
│       ├── Dockerfile
│       ├── requirements.txt
│       └── templates
│           └── index.html
├── docker-compose.yml
├── frontend
│   ├── Dockerfile
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── README.md
│   └── src
│       ├── App.css
│       ├── App.js
│       ├── App.test.js
│       ├── index.css
│       ├── index.js
│       ├── logo.svg
│       ├── pages
│       │   ├── Home.css
│       │   ├── Home.js
│       │   ├── Tickets.css
│       │   └── Tickets.js
│       └── setupTests.js
├── LICENSE
├── README.md
└── submission
    └── submission-info.txt

---

🧩 System Architecture

---

⚙️ Prerequisites

Ensure your machine has:

• Docker ≥ 20.x
• Docker Compose ≥ v2.x
• (Optional) Python 3.11+ for local testing

---

🚀 Deployment Steps

1️⃣ Clone the Repository

git clone https://github.com/YOUR-USERNAME/MultienvApp.git cd MultienvApp

---

2️⃣ 🌩 MongoDB Atlas Configuration

You are using MongoDB Atlas instead of a local Mongo container.

✔ Step 1 --- Create MongoDB Atlas Cluster

1. Go to https://cloud.mongodb.com
2. Create a free/shared cluster
3. Create a new database user
4. Assign password
5. Copy your connection string:

mongodb+srv://<username>:<password>@<cluster>.mongodb.net/

---

✔ Step 2 --- Allow Network Access

Go to Network Access → Add IP:

For development:

0.0.0.0/0 (Allow all)

Or more secure:

<Your IP>/32

---

✔ Step 3 --- Create databases

Dev DB:

multienv_dev

Prod DB:

multienv_prod

(Atlas auto-creates databases on the first write.)

---

🔐 Environment Variables (.env)

Important: DO NOT COMMIT .env FILES

Add to .gitignore:

backend/*/.env

---

backend/dev/.env

FLASK_DEBUG=1 PORT=3001 MONGO_URI="mongodb+srv://<username>:<password>@<cluster>.mongodb.net/multienv_dev?retryWrites=true&w=majority&appName=MultiEnvApp"

backend/prod/.env

FLASK_DEBUG=0 PORT=3002 MONGO_URI="mongodb+srv://<username>:<password>@<cluster>.mongodb.net/multienv_prod?retryWrites=true&w=majority&appName=MultiEnvApp"

---

3️⃣ Build and Start All Services

docker compose up --build -d

---

4️⃣ Verify Running Containers

docker ps --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"

Expected:

multienv_dev_backend Up 0.0.0.0:3001->3001/tcp multienv_prod_backend Up 0.0.0.0:3002->3002/tcp multienv_frontend Up 0.0.0.0:3005->3000/tcp multienv_mongo Up 0.0.0.0:27017->27017/tcp

---

5️⃣ Test Application

Backend Health Checks

curl http://localhost:3001/health

curl http://localhost:3002/health

Frontend

Open in browser:

http://localhost:3005

Dev View

http://localhost:3005/dev

Prod View

http://localhost:3005/prod

---

🛠️ Full Troubleshooting Guide

(All real issues encountered during this deployment)

---

❌ Issue 1: Port 3000 already in use

Error:

bind: address already in use

✔ Fix:

Changed frontend host port to 3005 in docker-compose.yml:

`ports:

• "3005:3000"`

---

❌ Issue 2: Backend cannot connect to MongoDB

Mongo logs showed:

Client sent an HTTP request over a native MongoDB connection

This happened because curl http://localhost:27017 was used --- MongoDB uses binary protocol.

✔ Fix:

Correct mongo connectivity testing:

docker run --rm -it --network multienvapp_multinet mongo:6.0 mongosh "mongodb://mongo:27017" --eval 'db.runCommand({ ping: 1 })'

Result:

{ ok: 1 }

---

❌ Issue 3: Backend crashed: missing MONGO_URI

ValueError: You must specify a URI or set the MONGO_URI

✔ Fix:

Added .env files with MONGO_URI Ensured env_file: is configured for each backend service.

docker run --rm -it --network multienvapp_multinet mongo:6.0 mongosh --host mongo --eval 'db.runCommand({ ping: 1 })' { ok: 1 }

---

❌ Issue 4: Production backend failed to start --- gunicorn not found

exec: "gunicorn": executable file not found in $PATH

✔ Fix:

Added gunicorn to backend/prod/requirements.txt:

gunicorn>=20.1.0

Rebuild:

docker compose build prod-backend

---

❌ Issue 5: 404 on /health

Backends had no /health endpoint.

✔ Fix:

Added this route:

@app.route("/health") def health(): return jsonify({"status": "ok"}), 200

---

❌ Issue 6: Pylance warning --- mongo.db might be None

OptionalMemberAccess

✔ Fix:

Added:

assert mongo.db is not None

Or:

# type: ignore

---

🧪 Final Verification Checklist

Component	Status	Test
MongoDB	✅ running	{ ok: 1 }
Dev Backend	✅ running	curl /health
Prod Backend	✅ running	curl /health
Frontend	✅ running	http://localhost:3005
API Communication	✅ working	Frontend → Backends → Mongo
Data Persistence	✅ working	add/complete/delete todos

---

---

---

---

Deploying to Docker Hub (Recommended Method)

To deploy images professionally, use:

✔ 1. Build images

✔ 2. Tag images

✔ 3. Push to Docker Hub

---

---

---

A fully functioning multi-environment Dockerized application backed by MongoDB Atlas, with professional-grade documentation and troubleshooting.

---

📌 Author

DEEPIKA NARENDRAN Project: Multi-Environment Ticket Management Application

GitHub: @JoinDeeHub