3-Tier Dockerized Application with Nginx, Frontend, Backend, and MySQL

🛠️ Technologies Used

• Frontend: Static HTML.

• Backend: Flask (Python) API server.

• Database: MySQL.

• Proxy Server: Nginx to handle routing and communication between frontend and backend.

• Containerization: Docker and Docker Compose.

🚀 Setup and Running the Application

Prerequisites

Make sure you have the following installed on your system:

• Docker: Download Docker

• Docker Compose: Install Docker Compose

Step 1: Clone the Repository

git clone https://github.com/sriram-ravi705/DataHub.gitt

cd 3-tier-docker-app

Step 2: Build and Run the Application

Use Docker Compose to build and start all services (frontend, backend, and MySQL):

docker-compose up --build

This command will:

1. Build the Docker images for the frontend, backend, and Nginx.

2. Start the MySQL database.

3. Run the backend Flask API server.

4. Serve the frontend through Nginx.

Step 3: Access the Application

• Open your browser and go to http://localhost. This is where the frontend will be served.

• The backend API can be accessed at http://localhost:5000.

Step 4: Stopping the Application

To stop the application and remove all running containers:

docker-compose down

🏗️ Services Overview

This project contains the following services:

1. Frontend Service (Nginx)

The frontend service serves static files, such as HTML, CSS, and JavaScript. It is built with a simple Nginx configuration to serve the files and forward requests to the backend when needed.

Dockerfile for Frontend:

FROM nginx:alpine

COPY ./index.html /usr/share/nginx/html/index.html

Here we are using the nginx:alpine image (a minimal version of Nginx) and copying our static index.html file into it.

2. Backend Service (Flask API)

The backend is a simple API server created with Flask. It listens on port 5000 and interacts with the MySQL database.

Dockerfile for Backend:

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" ]

The backend is built using the official python:3.9-slim Docker image. We copy the application code, install dependencies, and expose port 5000 (the default Flask port).

3. Nginx Service (Reverse Proxy)

The Nginx service is used as a reverse proxy between the frontend and backend. It forwards frontend requests to the backend and handles serving static content.

Nginx Configuration Explained

• Serving Static Files: Nginx serves the static index.html file for the frontend.

• Proxying Requests: When a request for dynamic content (e.g., API requests) is made, Nginx forwards it to the backend API, which runs on port 5000.

Nginx Service in docker-compose.yml:

FROM nginx:alpine

COPY nginx.conf /etc/nginx/conf.d/

Nginx depends on both the frontend and backend services and will handle traffic between them.

🔧 Docker Compose Explanation

In the docker-compose.yml file, we have four services:

1. db (MySQL): A MySQL container running with user credentials, database initialization, and persistent data volume.

      db:
        image: mysql
        container_name: mysql
        environment:
          MYSQL_ROOT_PASSWORD: root 
          MYSQL_USERNAME: admin
          MYSQL_PASSWORD: admin
          MYSQL_DATABASE: exampledb
        ports:
          - 3036:3036
        volumes:
          - db_mysql:/var/lib/mysql
          - ./db/setup.sql:/docker-entrypoint-initdb.d/setup.sql
   

2. backend: A Python Flask API that connects to the MySQL database and serves data to the frontend.

   Markdown

    backend:
        build: ./backend
        container_name: backend
        environment:
          MYSQL_HOST: db
          MYSQL_USERNAME: root
          MYSQL_PASSWORD: root
          MYSQL_DATABASE: exampledb
        ports:
          - 5000:5000
        networks:
          - app-network
        depends_on:
          - db
   

3. frontend: The Nginx web server serving the static files and acting as a reverse proxy to the backend.

    frontend:
        build: ./frontend
        container_name: frontend
        ports:
          - 80:80
        networks:
          - app-network
   

4. nginx: Handles the reverse proxy and static file serving.

    nginx:
        build: ./nginx
        container_name: nginx
        networks:
          - app-network
        depends_on:
          - frontend
          - backend
   

5. These services all connect via the custom bridge network (app-network), allowing them to communicate with each other.

    networks:
      app-network:
        driver: bridge
   
    volumes:
      db_mysql:
   

   ---