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.

• 
  

  cpu_usage.html:

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

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

• --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

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. 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