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 renderi…


This content originally appeared on DEV Community and was authored by Uyi Oboite

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.

Image description

Image description

  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.

Image description

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

Image description

  • cpu_usage.html:

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

Image description

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

Image description

Image description

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

Image description

  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

Image description

  • 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

Image description

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

Image description

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

Image description

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

Image description

  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

Image description

  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

Image description

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

Image description

Image description

Image description

Image description

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


This content originally appeared on DEV Community and was authored by Uyi Oboite


Print Share Comment Cite Upload Translate Updates
APA

Uyi Oboite | Sciencx (2024-09-19T15:26:08+00:00) Real-Time Monitoring Dashboard Project Using FastAPI and Azure. Retrieved from https://www.scien.cx/2024/09/19/real-time-monitoring-dashboard-project-using-fastapi-and-azure/

MLA
" » Real-Time Monitoring Dashboard Project Using FastAPI and Azure." Uyi Oboite | Sciencx - Thursday September 19, 2024, https://www.scien.cx/2024/09/19/real-time-monitoring-dashboard-project-using-fastapi-and-azure/
HARVARD
Uyi Oboite | Sciencx Thursday September 19, 2024 » Real-Time Monitoring Dashboard Project Using FastAPI and Azure., viewed ,<https://www.scien.cx/2024/09/19/real-time-monitoring-dashboard-project-using-fastapi-and-azure/>
VANCOUVER
Uyi Oboite | Sciencx - » Real-Time Monitoring Dashboard Project Using FastAPI and Azure. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/19/real-time-monitoring-dashboard-project-using-fastapi-and-azure/
CHICAGO
" » Real-Time Monitoring Dashboard Project Using FastAPI and Azure." Uyi Oboite | Sciencx - Accessed . https://www.scien.cx/2024/09/19/real-time-monitoring-dashboard-project-using-fastapi-and-azure/
IEEE
" » Real-Time Monitoring Dashboard Project Using FastAPI and Azure." Uyi Oboite | Sciencx [Online]. Available: https://www.scien.cx/2024/09/19/real-time-monitoring-dashboard-project-using-fastapi-and-azure/. [Accessed: ]
rf:citation
» Real-Time Monitoring Dashboard Project Using FastAPI and Azure | Uyi Oboite | Sciencx | https://www.scien.cx/2024/09/19/real-time-monitoring-dashboard-project-using-fastapi-and-azure/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.