Full-Stack Deployment on Azure with Django, React, PostgreSQL, and Kubernetes

Project Overview

A cloud-native deployment pipeline for a full-stack application (Django + React + PostgreSQL) on Azure, featuring:

• Infrastructure-as-Code: AKS cluster provisioned via Terraform
• Containerization: Dockerized Django backend and React frontend
• Orchestration: Kubernetes deployments with persistent storage
• CI/CD Automation:
  • CI: GitHub Actions for build and image publishing
  • CD: Automated Kubernetes deployments

Key Components

Component	Description
AKS Cluster	Managed Kubernetes service with auto-scaling
PostgreSQL	Database (containerized or Azure Database)
Django API	Backend container with Gunicorn/ASGI
React Frontend	Static assets served via Nginx
GitHub Actions	CI/CD automation for builds and deployments
Monitoring	Prometheus + Grafana
Terraform	Infrastructure as Code for Azure resources

Project Structure

.
├── .github/             # GitHub Actions workflows
├── frontend/           # React frontend application
│   ├── src/           # Source code
│   ├── cypress/       # E2E testing
│   ├── public/        # Static assets
│   └── package.json   # Dependencies and scripts
├── infra/             # Infrastructure code
│   ├── terraform/     # Azure resource provisioning
│   └── k8s/          # Kubernetes manifests
└── Screenshots/       # Project documentation images

Deployment Phases

1. Infrastructure Provisioning (Terraform)

Azure Resources:

• Resource Group
  Central container for all resources
• Virtual Network (VNet)
  Private network space for components
• Kubernetes Cluster (AKS)
  Managed Kubernetes service
• PostgreSQL Database
  Flexible Server with VNet integration
• Container Registry (ACR) Private registry for Docker images

2. Application Containerization

Django:

• Multi-stage Docker build
• Environment variables for configuration
• Security scanning in build process
• Django REST Framework API endpoints
• JWT authentication integration

React:

• Optimized production build
• Nginx with proper caching headers
• Modern UI components
• Redux state management
• Protected routes with JWT

Registry:

• Images built and pushed to ACR via GitHub Actions
• Tags based on Git commit SHA
• Vulnerability scanning during push

3. CI/CD Pipeline (GitHub Actions)

Workflow Triggers:

• On push to main branch
• On pull requests

CI Steps:

1. Build & Test

   • Install Python/Node dependencies
   • Run unit tests for Django/React
   • Run Cypress E2E tests
   • Build production assets

2. Container Build

   • Build Docker images for backend/frontend
   • Scan images for vulnerabilities
   • Multi-stage builds for optimization

3. Registry Push

   • Authenticate with ACR
   • Push images with git-commit-sha tags
   • Additional latest tag for main branch

4. Deployment

   • Authenticate with AKS cluster
   • Apply Kubernetes manifests
   • Verify deployment status
   • Run health checks

4. Monitoring and Maintenance

Observability Stack:

• Prometheus for metrics collection
• Grafana dashboards for visualization
• Kubernetes resource monitoring
• Application performance metrics

Maintenance:

• Regular security updates
• Database backups
• Log rotation
• Performance optimization

GitHub Actions to AKS CI/CD Flow

Deployment Screenshots

Azure Resources

• Azure Kubernetes Service (AKS) Cluster

  • Managed Kubernetes cluster with auto-scaling enabled
  • Node pools configured for optimal performance

• Azure Resource Groups

  • Organized resource management
  • Clear resource hierarchy and dependencies

Container Registry

• Docker Hub Images
  • Containerized application images
  • Version-tagged releases

Kubernetes Resources

• Kubernetes Dashboard
  • Pod status and health monitoring
  • Resource utilization metrics
  • Service discovery and load balancing

Application Interface

• WorkWise Web Interface
  • Modern, responsive design
  • Intuitive user experience
  • Real-time updates and notifications

Application Overview

WorkWise
An Employee and Machine Management System to streamline communication across shifts, manage machine maintenance, and schedule jobs based on shipping dates.

WorkWise is designed to simplify communication and management in a company environment with multiple shifts and machines. The application provides:

• Machine maintenance ticketing
• Job scheduling based on priorities (such as shipping dates)
• Employee management and communication
• Department management system for better collaboration

Features

• Employee Shift Management: Easily manage employees across different shifts
• Machine Ticketing System: Track machine maintenance and service tickets
• Job Scheduling: Manage job schedules with shipping dates and priorities
• Department Management: Enable department-based task and communication tracking
• Real-time Updates: Instant notifications for critical updates
• Reporting Dashboard: Analytics and performance metrics
• Mobile Responsive: Access from any device

Technologies Used

• Frontend:
  • React.js
  • Redux for state management
  • Material-UI components
  • Cypress for E2E testing
• Backend:
  • Django REST Framework
  • PostgreSQL database
  • JWT authentication
  • Swagger/OpenAPI documentation
• DevOps:
  • Azure Kubernetes Service
  • Terraform for IaC
  • GitHub Actions for CI/CD
  • Docker containers
  • Prometheus/Grafana monitoring

Getting Started

Prerequisites

• Node.js 16+
• Python 3.8+
• Docker and Docker Compose
• Azure CLI
• Terraform

Local Development

1. Clone the repository
2. Set up frontend:

   cd frontend
   npm install
   npm start

3. Run tests:

   npm test
   npm run cypress:open