DEV Community

Cover image for I built an Overly Complex Random Number Generator with Docker Compose!
Rohan Sawant
Rohan Sawant

Posted on • Updated on

I built an Overly Complex Random Number Generator with Docker Compose!

This is an Overly Complex Random Number Generator, created to demystify how containers work.

Demo

  1. User sets a Random Seed
  2. Clicks Generate a Random Number
  3. Random Number is generated

Alt Text

GitHub logo CT83 / The-Overly-Complicated-Random-Number-Generator

An Overly Complex Random Number Generator, created to demystify how containers work.

The-Overly-Complicated-Random-Number-Generator

Build Status

This is an Overly Complex Random Number Generator, created to demystify how containers work.

How to Run?

Easy peasy lemon squeezy. 🍋💦

  1. docker-compose up --build

  2. Visit localhost

Below is an excerpt from my Blog Post about this.

Demo

  1. User sets a Random Seed
  2. Clicks Generate a Random Number
  3. Random Number is generated

Prerequisites

  • You have an understanding of Docker and Docker Compose
  • You have heard about Python, React and Redis

Aim

  • To illustrate how containerization actually looks in the wild
  • We will be skipping how the actual Python, JavaScript Apps work, as we want to focus on containerization here, you can find all of the code on Github - CT83/The-Complicated-Simple-Container-App

Architecture

  1. Nginx Proxy - Exposed on port 80, Manages networking
  2. React Dev Server - Accepts Input, Supports Live Reloading, Replaced with Nginx in Production
  3. Flask Server - Serves the API
  4. Redis Cache - To maintain the Task Queue
  5. Python…

Prerequisites

  • You have an understanding of Docker and Docker Compose
  • You have heard about Python, React and Redis

Aim

  • To illustrate how containerization actually looks in the wild
  • We will be skipping how the actual Python, JavaScript Apps work, as we want to focus on containerization here, you can find all of the code on Github - CT83/The-Complicated-Simple-Container-App

Architecture

Alt Text

  1. Nginx Proxy - Exposed on port 80, Manages networking
  2. React Dev Server - Accepts Input, Supports Live Reloading, Replaced with Nginx in Production
  3. Flask Server - Serves the API
  4. Redis Cache - To maintain the Task Queue
  5. Python Worker - Uses specified Seed to Generate Random Number, stores it in DB
  6. Database - PostGreSQL DB to store generated random numbers

Working

  1. React App is served, user inputs the random seed.
  2. Seed is sent to the Flask API through a POST
  3. Task is added to Queue
  4. Worker picks up the task, generates a random number and store result in the database
  5. Result is returned to the user.

Configuration

Here, is the minified docker-compose-prod.yml

version: "3.3"

services:
  proxy:
    container_name: proxy
    build: 
      ...
    ports:
      - 80:80

  database:
    container_name: database
    build: database/.
    volumes:
      - ./database/db_data:/var/lib/postgresql
    ...

  client:
    container_name: client
    build: 
      ...
    environment:
      ...

  api:
    container_name: api
    build: 
    ...
    volumes:
      - ./api:/app

  worker:
    container_name: worker
    build:
    ...

  redis:
    container_name: redis
    build: 
    ...
Enter fullscreen mode Exit fullscreen mode

You can find the development docker-compose.yml here. It even supports Live Reloading for both, the Flask and React Container!

Next Steps

You could now move on to trying to push the built images to DockerHub, or add TravisCI integration!

Inspirations

Stephen Grider in his Udemy Course Docker and Kubernetes: The Complete Guide built an overly complex simple app, that greatly inspired me.

Top comments (2)

Collapse
 
dance2die profile image
Sung M. Kim

Nice one Rohan!

I wanna learn how to do that too, especially with Redis :)

Collapse
 
rohansawant profile image
Rohan Sawant

Hello old friend!

Thanks you so much! ♥ 🔥

It's way easier than it looks!