Automating Full-Stack App Deployments: Application and Monitoring Setup Using Docker Compose.

---

This project orchestrates a robust full-stack deployment featuring a FastAPI backend, React frontend, PostgreSQL database, and a comprehensive monitoring stack. From Dockerization to reverse proxy routing, this project ensures seamless deployment and insightful monitoring, making it a symphony of interconnected services tailored for high performance and scalability.

Overview

This project demonstrates:

• Dockerizing and orchestrating a full-stack application.
• Configuring advanced monitoring and logging tools.
• Setting up a reverse proxy for efficient routing.
• Deploying the stack to a cloud platform with a custom domain and HTTPS.

Highlights: 🚀 Tech Stack: React, FastAPI, PostgreSQL, Docker, Prometheus, Grafana, Loki, cAdvisor. 🔍 Monitoring Tools: Real-time metrics, logs,container insights, customized dashboards. 🌐 Cloud Deployment: Accessible using cloud service via a secure domain.

Before You Begin

You should have:

• Docker and Docker Compose installed
• An instance from a cloud provider (Azure, AWS, or GCP)
• The following ports accessible, 80, 443, 8080 and 22 (if you intend to make access the server)
• Domain name
• Basic knowledge of Docker

Core Components

Application stack Services:

• React Frontend: A dynamic and responsive UI powered by Chakra UI
• FastAPI Backend: Provides REST APIs and Swagger documentation and using Poetry as package manager.
• PostgreSQL: A robust database for persistent storage.
• Traefik: Reverse Proxy fpr routing traffic seamlessly to appropriate services.

Monitoring stack services:

• Prometheus: Collects and stores real-time metrics and provides querying abilities
• Grafana: Visualizes performance and logs using data from prometheus and Loki
• Loki & Promtail: Promtail collects logs, and Loki stores them for querying and visualization.
• cAdvisor: Monitors container resource usage and forwards metrics to promethues

Setting Up

1. Clone the Repository

git clone https://github.com/yutee/devops-react-fastapi.git  
cd devops-react-fastapi

2. Create Environment Variables Prepare .env files for the frontend, backend and docker compose configurations, you can find each env file in their respective directory:

For the application stack:

#domain
DOMAIN=yourdomain.com

# database
POSTGRES_USER=youruser  
POSTGRES_PASSWORD=yourpassword  
POSTGRES_DB=yourdb  
BACKEND_PORT=5000  
FRONTEND_PORT=80 

# cors
BACKEND_CORS_ORIGINS="http://yourdomain.com,https://yourdomain.com"

Ensure URL is properly updated:

VITE_API_URL=yourdomain.com

Docker-compose env:

DOMAIN=yourdomain.com

3. Inspect Configurations If you want to explore the codebase and/or add custom configuration, .

3. Application Stack Compose Files: docker-compose.yml | traefik.yml |

4. Monitoring Stack Compose File: /monitoring/docker-compose.yml |

You can also find a link to an article covering the full process from start to finish and a little bit more from a learning perspective here.

4. Bring Up the Stacks SSH into your cloud instance, Ensure you are in the root directory and then run:

# create file for tls certificate, traefik and let's encrypt nneds this
touch acme.json
chmod 600 acme.json

# spin up both stacks. use "--build" if you do not already have the images
docker compose up -d --build

This will provision the complete application including the monitoring stack.

N/B: If you do not want to perform the deployment manually, you can use a customizable Actions workflow available at .github/workflow.deploy.yaml.

5. Domain, Accessibility & Monitoring

• Set up your DNS on your provider account to point to the cloud instance’s public IP address using A records.
• Confirm domain name is properly mapped to your IP address

The application can be accessed at:

• Frontend: https://yourdomain.com
• Backend API: https://yourdomain.com/api
• Adminer dashboard: https://db.yourdomain.com
• Traefik dashboard: https://traefik.yourdomain.com
• Prometheus: https://yourdomain.com/prometheus
• Granfana: https://yourdomain.com/grafana

For monitoring: Access Grafana and add prometheus and loki as data source. You can explore the available logs via "Explore". But to ultimately setup a dashboard, Go to Dashboard and create new.

Useful PromQL queries:

count(container_last_seen{container_label_com_docker_compose_service=~".+"})

{service_name="varlogs"} |~ "ERROR"

{service_name="varlogs"} |= "INFO"

{job="docker"} |= "container"

You can also use the follwoing dashboard templates. Cadvisor metrics dashboard: 19792 Loki + Prometheus dashboard: 13186