Dockerized Flask Web Application with Redis, PostgreSQL & Nginx

 

Building a Dockerized Flask Web Application with Redis, PostgreSQL & Nginx

 I. Introduction

In this blog, I’ll walk through how I developed a Dockerized Flask web application integrated with Redis, PostgreSQL, and Nginx.
This project demonstrates how to build a modern, containerized, full-stack web system where each component runs in its own container — similar to real-world microservice architecture.

The project is divided into three major phases — each representing a milestone in development till DA2 (Design & Analysis 2).

Phase 1: Flask Application Development

I. Objective

The goal of this phase was to create a working Flask application that displays a simple visitor counter and renders a professional frontend.

II.  Implementation

• Created a Python Flask project (app/app.py) with basic routes:

  • / → Displays visitor count.

  • /stats → Shows logs from PostgreSQL.

  • /reset → Resets counter and database.

• Used Redis to handle real-time counting because it’s extremely fast for key-value operations.

• Integrated PostgreSQL for storing user IP addresses and timestamps persistently.

III. Technologies

• Flask for routing and templates

• Redis for fast counter updates

• PostgreSQL for permanent data storage

Snippet:

@app.route("/")
def index():
    count = redis.incr("hits")
    ip = request.remote_addr
    cur.execute("INSERT INTO visits (ip, timestamp) VALUES (%s, %s)", (ip, datetime.now()))
    return render_template("index.html", count=count)

Output

Visitors can see a live counter and a stats page showing visit details in a structured table.

 Phase 2: Containerization with Docker

I.  Objective

After the Flask app was ready, the next step was to containerize the project using Docker.
The aim was to ensure that the entire system — app, Redis, PostgreSQL, and Nginx — could run independently inside isolated containers.

II.  Implementation

• Created individual Dockerfiles for Flask and configurations for each service.

• Used Docker Compose to orchestrate all containers together.

Snippet:

services:
  web:
    build: ./app
    ports:
      - "5001:5000"
    depends_on:
      - redis
      - db
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: admin
      POSTGRES_DB: counterdb

  redis:
    image: redis:alpine

  db:
    image: postgres:14
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: admin
      POSTGRES_DB: counterdb

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - web

III.  Running the Containers

To start the project:

docker compose up --build

This command automatically builds images, creates containers, and runs all services together.

Running Containers:

• Flask app → web

• Redis → redis

• PostgreSQL → db

• Nginx → nginx

Phase 3: Frontend Design & Analytics Dashboard

I.  Objective

To make the project visually appealing and user-friendly, I built a modern and responsive frontend using Bootstrap and added analytics visualization with Chart.js.

II.  Implementation

• Used Bootstrap 5 to design clean buttons, counters, and tables.

• Added Chart.js to represent visit analytics as a line chart on the /stats page.

Snippet (stats.html):

<canvas id="visitsChart" width="600" height="300"></canvas>
<script>
fetch("/api/stats")
  .then(res => res.json())
  .then(data => {
    new Chart(document.getElementById("visitsChart"), {
      type: "line",
      data: {
        labels: data,
        datasets: [{
          label: "Visits Over Time",
          data: data.map((_, i) => i + 1),
          borderColor: "blue",
          fill: false
        }]
      }
    });
  });
</script>

III.  Features

• Displays the total visitor count in real-time

• Logs each visit (IP & timestamp) into PostgreSQL

• Renders a chart showing user visit trends

• Provides a Reset button to clear data

 Final Architecture Overview

Workflow:

1. Browser request → Nginx proxy (port 80)

2. Nginx → Flask app (port 5000)

3. Flask → Redis (counter) and PostgreSQL (logs)

4. Data rendered dynamically with Chart.js

Services Involved:

Service	Role
Flask	Backend & APIs
Redis	Real-time counter
PostgreSQL	Persistent database
Nginx	Reverse proxy
Docker Compose	Service orchestration

Acknowledgement

I would like to express my heartfelt gratitude to my faculty members and mentors for their continuous guidance and encouragement throughout the development of this project. Their valuable insights helped me understand the concepts of Docker, containerization, and full-stack web deployment more deeply.
I am also thankful to my peers and teammates who provided helpful feedback during the different stages of this work.
Lastly, I would like to acknowledge the support of VIT Chennai for providing the platform and environment that made this project possible.

Conclusion

This project demonstrates how containerization simplifies the deployment of complex, multi-component web applications.
Using Docker Compose, I was able to integrate backend, database, caching, and frontend layers in one seamless system.

Through this project, I learned:

• How to containerize applications using Docker

• How to connect multiple containers (Flask ↔ Redis ↔ PostgreSQL)

• How to create a scalable and production-ready environment

• And how to use frontend visualization for analytics

Prasenjit Choudhury
B.Tech, VIT Chennai