Real-Time Monitoring Dashboard Project Using FastAPI and Azure

Project Overview

This application monitors system metrics (CPU, memory, and disk usage) in real-time and provides visual representations via an HTML interface. The project was developed using FastAPI for the backend and Jinja2 for dynamic HTML rendering. The application is hosted on Azure App Service, making it scalable and easily accessible from anywhere.

Technologies Used

FastAPI: Lightweight web framework used to build APIs quickly and efficiently.
Uvicorn: Lightning-fast ASGI server for serving the FastAPI application.
Jinja2: Template engine for rendering HTML dynamically based on system metrics.

File Structure

1. monitoring_app.py:
The main FastAPI application that handles system metrics and renders the HTML templates.

• This is the main Python file where the FastAPI application is defined.
• It contains the endpoints for retrieving system metrics (CPU, memory, and disk usage) using the psutil library.
• The application uses the Jinja2 templating engine to render HTML pages dynamically, displaying the system metrics in a clean format.

1. requirements.txt: This file lists all the dependencies needed to run the project. Key dependencies include FastAPI for building the web framework, Uvicorn for running the app, Psutil for retrieving system metrics, and Jinja2 for rendering HTML templates.

3. templates/:
This directory contains the HTML files used to display system metrics.

• home.html:

  • This is the template displayed when a user visits the root endpoint /.
  • It can include a welcome message and provide navigation to the metric pages (CPU, memory, disk).

• cpu_usage.html:

  • Displays the current CPU usage in a styled, centered format.

• memory_usage.html

  • Displays the current memory usage (total, available, and percentage used)

• disk_usage.html

  • Displays the disk usage (total, used, free, and percentage used).

How It Works

1. FastAPI for the Backend: The backend is built with FastAPI to serve system metrics through different endpoints (/metrics/cpu, /metrics/memory, /metrics/disk).

2. Jinja2 for Rendering: The system metrics are passed to the Jinja2 templates, which dynamically generate HTML pages. For example, the CPU usage is rendered with the current percentage centered and styled using CSS.

3. Azure Deployment: The application is deployed on Azure App Service, providing a highly available and scalable environment

Azure Deployment Process

The following steps outline how I deployed my FastAPI Monitoring Application to Azure App Service, making use of the Azure CLI to automate the process and configure the deployment.

1. Install Necessary Python Packages

Before starting the deployment process, I installed the necessary dependencies, including FastAPI, Uvicorn, jinja2 and Psutil

1. Create an Azure Resource Group

An Azure Resource Group is a container that holds related resources for an Azure solution. To create the resource group, I used the following command

• monitoring-app-rg: This is the name of the resource group.
• eastus: The Azure region where the resources are hosted

1. Create an Azure App Service Plan

An App Service Plan defines the region, size, and scale of the web apps running on Azure. In this step, I created an App Service plan with the B1 pricing tier on a Linux server

• --is-linux: Specifies that this is a Linux-based service plan.

1. Create an Azure Web App The Web App is the actual hosting service for the application. Here, I created a Python 3.9 Web App within the resource group and plan

• --runtime "Python|3.9": Specifies the Python version for the app

1. Initialize Git and Commit Code
   Once the Azure resources were set up, I initialized a Git repository in my local project folder, added all the files, and made an initial commit

2. Configure Local Git Deployment to Azure
   Azure App Service allows you to configure local Git deployment. This step sets up the connection between my local Git repository and Azure Web App

After running this command, Azure provided a Git Remote URL that I needed to use to push my local code to the Azure App Service

1. Add Azure Remote to Git Using the Git URL provided in the previous step, I added the Azure remote to my local Git configuration

1. Get Username and Password from Azure Portal
   To push the code to Azure, I needed the username and password for the Azure Git repository:

2. I went to the Azure Portal and navigated to my App Service (monitoring_app).

3. From there, I selected the Deployment Center in the left-hand menu.

4. Under the User Credentials section, I found the Git Username (which

   • is usually the name of your app) and generated/reset the Git Password.
   • Username: Typically, it’s the name of your app (e.g., @monitoring_app).
   • Password: Generated in the Deployment Center.

5. Push Code to Azure Remote
   With the username and password in hand, I was able to push my local code to the Azure Web App by using "git push azure"

Upon pushing, I was prompted to enter the username and password that I retrieved from the Azure portal. After a successful push, Azure automatically deployed the code

1. Verify the Deployment After the deployment was successful, I visited my web app's URL to ensure it was running

The application was live, and the CPU, memory, and disk usage metrics were accessible via the respective endpoints:

• /metrics/cpu
• /metrics/memory
• /metrics/disk

Author
This project was developed by Uyiosa Praise Oboite

GitHub Repository
You can find the source code for this project here: Git Repository