Skip to main content

​
Overview

Multi-Cloud Manager uses Docker Compose to orchestrate both the backend (Flask) and frontend (React) services. This guide walks you through deploying the application using Docker.

​
Prerequisites

  • Docker Engine 20.10+
  • Docker Compose 2.0+
  • Git (to clone the repository)

​
Project Structure

The application consists of two main services:
  • Backend: Flask API (Python 3.9)
  • Frontend: React application (Node.js 18)

​
Docker Configuration

​
Backend Dockerfile

Located at project/backend/Dockerfile: 
FROM python:3.9-slim

WORKDIR /app

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

EXPOSE 5000

CMD ["python", "app.py"]

​
Frontend Dockerfile

Located at project/frontend/Dockerfile: 
FROM node:18

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

​
Docker Compose Configuration

The docker-compose.yml file orchestrates both services: 
services:
  backend:
    build: ./project/backend
    container_name: flask-backend
    ports:
      - "5000:5000"
    env_file:
      - .env
    volumes:
      - ./project/backend:/app
    networks:
      - app-network

  frontend:
    build: ./project/frontend
    container_name: react-frontend
    ports:
      - "3000:3000"
    stdin_open: true
    tty: true
    volumes:
      - ./project/frontend:/app
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

​
Port Mappings

ServiceContainer PortHost PortDescription
Backend50005000Flask API server
Frontend30003000React development server

​
Volume Mounts

Both services use volume mounts for development:
  • Backend: ./project/backend:/app - Hot reload for Python code changes
  • Frontend: ./project/frontend:/app - Hot reload for React code changes

​
Network Configuration

The application uses a custom bridge network (app-network) to enable communication between containers:
  • Frontend communicates with backend via proxy: http://backend:5000
  • Both services are isolated from the host network

​
Running the Application

​
Step 1: Clone the Repository

git clone <repository-url>
cd multi-cloud-manager

​
Step 2: Set Up Environment Variables

Create a .env file in the root directory. See Environment Variables for all required variables. 
cp .env.example .env
# Edit .env with your credentials

​
Step 3: Build and Start Services

docker-compose up --build
This command will:
  1. Build Docker images for both services
  2. Create the app-network
  3. Start both containers
  4. Stream logs from both services

​
Step 4: Verify Deployment

Once the services are running: Check the logs to ensure both services started successfully: 
docker-compose logs -f

​
Common Docker Commands

​
Start Services (Detached Mode)

docker-compose up -d

​
Stop Services

docker-compose down

​
View Logs

# All services
docker-compose logs -f

# Specific service
docker-compose logs -f backend
docker-compose logs -f frontend

​
Rebuild Services

# Rebuild all services
docker-compose build

# Rebuild specific service
docker-compose build backend

​
Restart Services

# Restart all services
docker-compose restart

# Restart specific service
docker-compose restart backend

​
Execute Commands in Container

# Backend shell
docker-compose exec backend /bin/bash

# Frontend shell
docker-compose exec frontend /bin/sh

​
View Running Containers

docker-compose ps

​
Remove Containers and Volumes

docker-compose down -v

​
Production Deployment

For production deployments, consider these modifications:

​
Remove Development Volumes

Remove volume mounts from docker-compose.yml to use built-in code: 
services:
  backend:
    build: ./project/backend
    # Remove volumes line

​
Use Production Build for Frontend

Modify project/frontend/Dockerfile for production: 
FROM node:18 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

​
Set Production Environment Variables

Ensure all environment variables are set correctly for production. See Configuration for best practices.

​
Use Docker Secrets

For sensitive credentials, use Docker secrets instead of .env files: 
secrets:
  azure_client_secret:
    external: true

services:
  backend:
    secrets:
      - azure_client_secret

​
Troubleshooting

​
Port Already in Use

If ports 3000 or 5000 are already in use, modify the port mappings in docker-compose.yml: 
ports:
  - "8080:3000"  # Use port 8080 instead

​
Container Exits Immediately

Check logs for errors: 
docker-compose logs backend
Common issues:
  • Missing environment variables
  • Dependency installation failures
  • Port binding errors

​
Network Connection Issues

If frontend cannot reach backend:
  1. Verify both containers are on the same network: 
    docker network inspect multi-cloud-manager_app-network
  2. Check the proxy configuration in package.json: 
    "proxy": "http://backend:5000"

​
Build Cache Issues

Clear Docker cache and rebuild: 
docker-compose build --no-cache
docker-compose up

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us