Deploying a Fullstack Application with Monitoring: A Comprehensive Guide

In this article, we will walk through deploying a fullstack application (frontend, backend, and database) and setting up a monitoring stack using Prometheus, Grafana, and cAdvisor. The goal is to simplify the process so even beginners can follow along and understand the purpose of each step.

---

Overview

• Fullstack Application Deployment: Deploy a frontend, backend, and database with Docker and Docker Compose.
• Monitoring Stack Setup: Integrate monitoring tools to track application and server performance.
• NGINX Proxy Manager: Use it for routing traffic, enabling SSL, and managing domain redirections.

---

1. Prerequisites

Before starting, ensure you have the following installed on your server or local machine:

1. Docker: To containerize and run applications.
2. Docker Compose: To manage multi-container setups.
3. A Domain Name: For accessing your application and monitoring stack (e.g., example.com).
4. Basic Linux Skills: Ability to use the terminal for commands.

---

2. Setting Up the File Structure

Here’s how your project folder should look:

project/
├── backend/          # Contains the backend application
├── frontend/         # Contains the frontend application
├── monitoring/       # Contains configurations for Prometheus, Promtail, and Loki
├── docker-compose.yml
└── README.md

• Backend: API service logic (e.g., Node.js, Python).
• Frontend: UI served via NGINX.
• Monitoring: Monitoring tools (Prometheus, Grafana, etc.).
• docker-compose.yml: Defines all services for deployment.

---

3. Writing the docker-compose.yml

The docker-compose.yml file combines all the services into one deployable stack.

version: '3.8'

services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: backend
    ports:
      - "8000:8000"
    networks:
      - app-network
    depends_on:
      - db

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: frontend
    ports:
      - "5173:80"
    networks:
      - app-network

  db:
    image: postgres:14
    container_name: db
    volumes:
      - db-data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: appuser
      POSTGRES_PASSWORD: password123
      POSTGRES_DB: appdb
    networks:
      - app-network

  prometheus:
    image: prom/prometheus
    container_name: prometheus
    command:
      - '--config.file=/etc/prometheus/prometheus.yml'
      - '--web.external-url=http://localhost/prometheus'
    ports:
      - "9090:9090"
    volumes:
      - ./monitoring/prometheus.yml:/etc/prometheus/prometheus.yml
    networks:
      - app-network

  grafana:
    image: grafana/grafana
    container_name: grafana
    environment:
      - GF_SERVER_ROOT_URL=http://localhost/grafana
      - GF_SERVER_SERVE_FROM_SUB_PATH=true
    ports:
      - "3000:3000"
    volumes:
      - grafana-data:/var/lib/grafana
    networks:
      - app-network

  cadvisor:
    image: gcr.io/cadvisor/cadvisor:latest
    container_name: cadvisor
    ports:
      - "8083:8080"
    volumes:
      - /:/rootfs:ro
      - /var/run:/var/run:rw
      - /sys:/sys:ro
      - /var/lib/docker/:/var/lib/docker:ro
    networks:
      - app-network

volumes:
  db-data:
  grafana-data:

networks:
  app-network:
    driver: bridge

---

4. Configuring the Monitoring Tools

4.1 Prometheus Configuration

Prometheus scrapes metrics from services like cAdvisor. Add a prometheus.yml file in the monitoring folder.

global:
  scrape_interval: 15s

scrape_configs:
  - job_name: "prometheus"
    static_configs:
      - targets: ["localhost:9090"]

  - job_name: "cadvisor"
    static_configs:
      - targets: ["cadvisor:8080"]

4.2 Grafana Configuration

Grafana uses Prometheus as a data source. Configure dashboards by:

1. Starting Grafana (http://localhost:3000).
2. Logging in (default: admin/admin).
3. Adding Prometheus as a data source (http://prometheus:9090).

---

5. Deploying the Fullstack Application

1. Build and Start Services: Run the following command to start all services:

   docker-compose up -d

1. Access the Services:
   • Backend: http://localhost:8000
   • Frontend: http://localhost:5173
   • Prometheus: http://localhost:9090
   • Grafana: http://localhost:3000
   • cAdvisor: http://localhost:8083

---

6. Setting Up NGINX Proxy Manager

NGINX Proxy Manager provides routing, HTTPS, and domain management.

6.1 Installation

Install NGINX Proxy Manager as a Docker container:

services:
  proxy:
    image: 'jc21/nginx-proxy-manager:latest'
    ports:
      - "80:80"
      - "443:443"
      - "81:81"
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

Run docker-compose up -d to start the proxy manager.

6.2 Configuring Proxy Hosts

1. Log in to NGINX Proxy Manager (http://<your-server-ip>:81).

2. Add a Proxy Host for each service:

   • Domain: example.com
   • Forward Hostname: Container name (e.g., frontend, backend).
   • Forward Port: Port of the service (e.g., 8000 for the backend).

3. Enable Force SSL and request a Let's Encrypt certificate.

---

7. Testing and Debugging

1. Logs: Check logs for errors:

   docker logs <container-name>

1. Network:
   Ensure containers can communicate via docker network inspect app-network.

2. DNS:
   Verify domain resolves to the server IP using:
   

   nslookup example.com

---

8. Enhancements

• Add Alerting: Integrate Alertmanager with Prometheus for alert notifications.
• Expand Monitoring: Use Node Exporter to monitor the host system.
• Automate Deployment: Use CI/CD pipelines to deploy updates automatically.

---

Conclusion

This guide covered deploying a fullstack application with a monitoring stack and routing traffic using NGINX Proxy Manager. With Docker Compose, the process is streamlined, and tools like Prometheus and Grafana ensure your application is monitored effectively. Let me know if you need further assistance! 😊