assignment 2

2025-04-04 15:53:04 +02:00 · 2025-04-04 15:53:04 +02:00 · d558806fa9
commit d558806fa9
parent 3dcf0d0a81
19 changed files with 735 additions and 0 deletions
--- a/z1/README.md
+++ b/z1/README.md
--- a/z1/docker-compose.yaml
+++ b/z1/docker-compose.yaml
--- a/z1/prepare-app.sh
+++ b/z1/prepare-app.sh
--- a/z1/remove-app.sh
+++ b/z1/remove-app.sh
--- a/z1/start-app.sh
+++ b/z1/start-app.sh
--- a/z1/stop-app.sh
+++ b/z1/stop-app.sh
--- a/z2/Dockerfile
+++ b/z2/Dockerfile
@ -0,0 +1,13 @@
+# Stage 1: Build
+FROM node:18-alpine as builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Stage 2: Run
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
--- a/z2/README.md
+++ b/z2/README.md
@ -0,0 +1,144 @@
+# Kubernetes Task Manager - Technical Documentation
+
+## Project Purpose
+
+This project demonstrates a production-like Kubernetes deployment featuring:
+- Multi-container application
+- Persistent storage
+- Scalable frontend
+- Proper resource management
+
+## Deployment Components
+
+### Core Objects
+
+| Object Type       | Name                | Purpose                                                                 |
+|-------------------|---------------------|------------------------------------------------------------------|
+| `Namespace`       | `web-app`           | Isolates all application resources                                     |
+| `Deployment`      | `web-app`           | Manages 2 replicas of frontend pods                                    |
+| `StatefulSet`     | `mysql`             | Manages database pod with stable network identity
+
+| `Service`         | `web-app-service`   | Exposes frontend on NodePort 30080                                     |
+| `PersistentVolume`| `mysql-pv`          | Provides 5Gi storage for database                                      |
+
+### Container Images
+
+| Component | Image                       | Port | Notes                                  |
+|-----------|-----------------------------|------|----------------------------------------|
+| Frontend  | `k8s-task-manager-frontend` | 80   | Custom-built Nginx image               |
+| Database  | `mysql:5.7`                 | 3306 | With preconfigured credentials         |
+| Backend   | `k8s-task-manager-api`      | 8080 | Node.js/Express REST API               |
+
+## Deployment Workflow
+
+```mermaid
+graph TD
+    A[prepare-app.sh] --> B[Creates PV directories]
+    B --> C[Builds frontend image]
+    C --> D[start-app.sh]
+    D --> E[Creates Namespace]
+    E --> F[Deploys PV/PVC]
+    F --> G[Deploys MySQL StatefulSet]
+    G --> H[Deploys Frontend]
+    H --> I[Creates Service]
+
+# Key Configuration Details
+## Resource Allocation
+
+Frontend:
+
+resources:
+  requests:
+    cpu: "100m"
+    memory: "128Mi"
+  limits:
+    cpu: "250m"
+    memory: "256Mi"
+
+
+Database:
+
+resources:
+  requests:
+    cpu: "500m"
+    memory: "512Mi"
+  limits:
+    cpu: "1000m"
+    memory: "1Gi"
+
+Backend:
+
+```yaml
+resources:
+  requests:
+    cpu: "200m"
+    memory: "256Mi"
+  limits:
+    cpu: "500m"
+    memory: "512Mi"
+
+Storage Configuration
+
+# persistentvolume.yaml
+spec:
+  capacity:
+    storage: 5Gi
+  accessModes:
+    - ReadWriteOnce
+  hostPath:
+    path: "/mnt/data/mysql"
+
+
+# Operational Procedures
+## Accessing the Application
+
+Local Development:
+minikube service web-app-service -n web-app
+
+Production Access:
+http://<node-ip>:30080
+
+Monitoring Commands:
+# Check pod status
+kubectl get pods -n web-app -w
+
+# View frontend logs
+kubectl logs -n web_app deploy/web-app -f
+
+# Verify database health
+kubectl exec -n web-app mysql-0 -- mysql -uroot -ppassword -e "SHOW DATABASES;"
+
+# Maintenance Tasks
+Scaling Frontend:
+kubectl scale -n web-app deployment/web-app --replicas=3
+
+Database Backup:
+kubectl exec -n web-app mysql-0 -- \
+  mysqldump -u root -ppassword taskmanager > backup_$(date +%F).sql
+
+# Security Notes
+Database Credentials:
+
+Default credentials are for demonstration only
+
+In production, use:
+envFrom:
+- secretRef:
+    name: mysql-credentials
+
+Network Exposure:
+Current: NodePort (30080)
+Recommended: Ingress with TLS termination
+
+# Troubleshooting Guide
+Symptom	                        Diagnostic Steps        	        Resolution
+Frontend not responding	kubectl get svc -n web-app	                Verify NodePort configuration
+Database pod crash loops	kubectl describe pod mysql-0 -n web-app	Check storage permissions
+High CPU usage	                kubectl top pods -n web-app      	Adjust resource limits
+
+Cleanup Procedure
+# Full uninstall
+./stop-app.sh
+
+# Optional: Remove persistent data
+sudo rm -rf /mnt/data/mysql
--- a/z2/deployment.yaml
+++ b/z2/deployment.yaml
@ -0,0 +1,45 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: web-app
+  namespace: web-app
+  labels:
+    app: k8s-task-manager
+    tier: frontend
+spec:
+  replicas: 2
+  selector:
+    matchLabels:
+      app: k8s-task-manager
+      tier: frontend
+  template:
+    metadata:
+      labels:
+        app: k8s-task-manager
+        tier: frontend
+    spec:
+      containers:
+      - name: web-app
+        image: k8s-task-manager-frontend:latest
+        imagePullPolicy: IfNotPresent
+        ports:
+        - containerPort: 80
+        resources:
+          requests:
+            cpu: "100m"
+            memory: "128Mi"
+          limits:
+            cpu: "250m"
+            memory: "256Mi"
+        livenessProbe:
+          httpGet:
+            path: /
+            port: 80
+          initialDelaySeconds: 5
+          periodSeconds: 10
+        readinessProbe:
+          httpGet:
+            path: /
+            port: 80
+          initialDelaySeconds: 5
+          periodSeconds: 10
--- a/z2/index.html
+++ b/z2/index.html
@ -0,0 +1,375 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>K8s Task Manager</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #4a6fa5;
+            --secondary: #166088;
+            --accent: #4fc3f7;
+            --background: #f5f7fa;
+            --text: #333;
+        }
+
+        body {
+            font-family: 'Roboto', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: var(--background);
+            color: var(--text);
+            transition: all 0.3s ease;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        header {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            color: white;
+            padding: 2rem 0;
+            text-align: center;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+        }
+
+        h1 {
+            margin: 0;
+            font-size: 2.5rem;
+            animation: fadeIn 1s ease;
+        }
+
+        .subtitle {
+            font-weight: 300;
+            opacity: 0.9;
+            margin-top: 0.5rem;
+        }
+
+        .dashboard {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .card {
+            background: white;
+            border-radius: 8px;
+            padding: 1.5rem;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+        }
+
+        .card h2 {
+            color: var(--primary);
+            margin-top: 0;
+            border-bottom: 2px solid var(--accent);
+            padding-bottom: 0.5rem;
+            display: inline-block;
+        }
+
+        .stats {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 1rem;
+        }
+
+        .stat-item {
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: var(--secondary);
+        }
+
+        .stat-label {
+            font-size: 0.9rem;
+            opacity: 0.7;
+        }
+
+        .task-list {
+            list-style: none;
+            padding: 0;
+            margin: 1rem 0 0 0;
+        }
+
+        .task-item {
+            padding: 0.8rem;
+            margin-bottom: 0.5rem;
+            background: rgba(74, 111, 165, 0.05);
+            border-left: 3px solid var(--accent);
+            border-radius: 4px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: all 0.2s ease;
+        }
+
+        .task-item:hover {
+            background: rgba(74, 111, 165, 0.1);
+        }
+
+        .task-actions button {
+            background: none;
+            border: none;
+            color: var(--primary);
+            cursor: pointer;
+            margin-left: 0.5rem;
+            transition: color 0.2s ease;
+        }
+
+        .task-actions button:hover {
+            color: var(--secondary);
+        }
+
+        .add-task {
+            display: flex;
+            margin-top: 1rem;
+        }
+
+        .add-task input {
+            flex-grow: 1;
+            padding: 0.8rem;
+            border: 1px solid #ddd;
+            border-radius: 4px 0 0 4px;
+            font-size: 1rem;
+            outline: none;
+            transition: border 0.2s ease;
+        }
+
+        .add-task input:focus {
+            border-color: var(--accent);
+        }
+
+        .add-task button {
+            background-color: var(--primary);
+            color: white;
+            border: none;
+            padding: 0 1.5rem;
+            border-radius: 0 4px 4px 0;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+        }
+
+        .add-task button:hover {
+            background-color: var(--secondary);
+        }
+
+        .theme-toggle {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            background: var(--primary);
+            color: white;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            transition: all 0.3s ease;
+            border: none;
+        }
+
+        .theme-toggle:hover {
+            transform: scale(1.1);
+            background: var(--secondary);
+        }
+
+        footer {
+            text-align: center;
+            margin-top: 3rem;
+            padding: 1rem;
+            color: #666;
+            font-size: 0.9rem;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        body.dark {
+            --background: #1a1a2e;
+            --text: #f1f1f1;
+        }
+
+        body.dark .card {
+            background: #16213e;
+            color: #f1f1f1;
+        }
+
+        body.dark .task-item {
+            background: rgba(74, 111, 165, 0.2);
+        }
+
+        body.dark footer {
+            color: #aaa;
+        }
+    </style>
+</head>
+<body>
+<header>
+    <div class="container">
+        <h1>Kubernetes Task Manager</h1>
+        <p class="subtitle">Manage your cluster tasks efficiently</p>
+    </div>
+</header>
+
+<div class="container">
+    <div class="dashboard">
+        <div class="card">
+            <h2>Cluster Overview</h2>
+            <div class="stats">
+                <div class="stat-item">
+                    <div class="stat-value" id="node-count">3</div>
+                    <div class="stat-label">Nodes</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" id="pod-count">12</div>
+                    <div class="stat-label">Pods</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" id="service-count">5</div>
+                    <div class="stat-label">Services</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Recent Tasks</h2>
+            <ul class="task-list" id="task-list">
+                <li class="task-item">
+                    <span>Deploy new frontend version</span>
+                    <div class="task-actions">
+                        <button title="Complete">✓</button>
+                        <button title="Delete">✕</button>
+                    </div>
+                </li>
+                <li class="task-item">
+                    <span>Scale database pods</span>
+                    <div class="task-actions">
+                        <button title="Complete">✓</button>
+                        <button title="Delete">✕</button>
+                    </div>
+                </li>
+                <li class="task-item">
+                    <span>Update ingress configuration</span>
+                    <div class="task-actions">
+                        <button title="Complete">✓</button>
+                        <button title="Delete">✕</button>
+                    </div>
+                </li>
+            </ul>
+            <div class="add-task">
+                <input type="text" id="new-task" placeholder="Add new task...">
+                <button id="add-task-btn">Add</button>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Resource Usage</h2>
+            <div id="chart-container" style="height: 200px;">
+                <svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0,200 L50,150 L100,170 L150,120 L200,160 L250,130 L300,180"
+                          stroke="#4a6fa5" stroke-width="2" fill="none"/>
+                    <path d="M0,200 L50,160 L100,140 L150,180 L200,150 L250,170 L300,130"
+                          stroke="#4fc3f7" stroke-width="2" fill="none" stroke-dasharray="5,3"/>
+                    <text x="10" y="30" fill="#4a6fa5">CPU</text>
+                    <text x="10" y="50" fill="#4fc3f7">Memory</text>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+
+<footer>
+    <p>Kubernetes Web App | © 2025 | Deployed with ♥ using K8s</p>
+</footer>
+
+<button class="theme-toggle" id="theme-toggle">🌓</button>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const taskList = document.getElementById('task-list');
+        const newTaskInput = document.getElementById('new-task');
+        const addTaskBtn = document.getElementById('add-task-btn');
+        const themeToggle = document.getElementById('theme-toggle');
+
+        addTaskBtn.addEventListener('click', function() {
+            const taskText = newTaskInput.value.trim();
+            if (taskText) {
+                const taskItem = document.createElement('li');
+                taskItem.className = 'task-item';
+                taskItem.innerHTML = `
+                        <span>${Chan}</span>
+                        <div class="task-actions">
+                            <button title="Complete">✓</button>
+                            <button title="Delete">✕</button>
+                        </div>
+                    `;
+                taskList.appendChild(taskItem);
+                newTaskInput.value = '';
+
+                taskItem.querySelectorAll('button')[0].addEventListener('click', completeTask);
+                taskItem.querySelectorAll('button')[1].addEventListener('click', deleteTask);
+            }
+        });
+
+        function completeTask(e) {
+            const taskItem = e.target.closest('.task-item');
+            taskItem.style.opacity = '0.5';
+            taskItem.style.textDecoration = 'line-through';
+            setTimeout(() => {
+                taskItem.remove();
+            }, 1000);
+        }
+
+        function deleteTask(e) {
+            const taskItem = e.target.closest('.task-item');
+            taskItem.style.transform = 'translateX(100%)';
+            taskItem.style.opacity = '0';
+            setTimeout(() => {
+                taskItem.remove();
+            }, 300);
+        }
+
+        document.querySelectorAll('.task-actions button:nth-child(1)').forEach(btn => {
+            btn.addEventListener('click', completeTask);
+        });
+
+        document.querySelectorAll('.task-actions button:nth-child(2)').forEach(btn => {
+            btn.addEventListener('click', deleteTask);
+        });
+
+        themeToggle.addEventListener('click', function() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        });
+
+        if (localStorage.getItem('theme') === 'dark') {
+            document.body.classList.add('dark');
+        }
+
+        setInterval(() => {
+            document.getElementById('pod-count').textContent =
+                Math.floor(10 + Math.random() * 5);
+        }, 3000);
+    });
+</script>
+</body>
+</html>
--- a/z2/namespace.yaml
+++ b/z2/namespace.yaml
@ -0,0 +1,6 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: web-app
+  labels:
+    app: k8s-task-manager
--- a/z2/nginx.conf
+++ b/z2/nginx.conf
@ -0,0 +1,18 @@
+server {
+    listen 80;
+    server_name localhost;
+    
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 1y;
+        add_header Cache-Control "public, no-transform";
+    }
+}
--- a/z2/package.json
+++ b/z2/package.json
@ -0,0 +1,12 @@
+{
+  "name": "k8s-task-manager-frontend",
+  "version": "1.0.0",
+  "description": "Frontend for Kubernetes Task Manager",
+  "scripts": {
+    "build": "mkdir -p dist && cp index.html dist/",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
--- a/z2/persistentvolume.yaml
+++ b/z2/persistentvolume.yaml
@ -0,0 +1,16 @@
+apiVersion: v1
+kind: PersistentVolume
+metadata:
+  name: mysql-pv
+  namespace: web-app
+  labels:
+    type: local
+    app: k8s-task-manager
+spec:
+  storageClassName: manual
+  capacity:
+    storage: 5Gi
+  accessModes:
+    - ReadWriteOnce
+  hostPath:
+    path: "/mnt/data/mysql"
--- a/z2/prepare-app.sh
+++ b/z2/prepare-app.sh
@ -0,0 +1,12 @@
+#!/bin/bash
+
+sudo mkdir -p /mnt/data/mysql
+sudo chmod 777 -R /mnt/data
+
+docker build -t k8s-task-manager-frontend:latest -f Dockerfile .
+
+if command -v minikube &> /dev/null; then
+  minikube image load k8s-task-manager-frontend:latest
+fi
+
+echo "Kubernetes application preparation complete!"
--- a/z2/service.yaml
+++ b/z2/service.yaml
@ -0,0 +1,18 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: web-app-service
+  namespace: web-app
+  labels:
+    app: k8s-task-manager
+    tier: frontend
+spec:
+  type: NodePort
+  selector:
+    app: k8s-task-manager
+    tier: frontend
+  ports:
+    - protocol: TCP
+      port: 80
+      targetPort: 80
+      nodePort: 30080
--- a/z2/start-app.sh
+++ b/z2/start-app.sh
@ -0,0 +1,15 @@
+#!/bin/bash
+
+kubectl apply -f namespace.yaml
+
+kubectl apply -f persistentvolume.yaml
+
+kubectl apply -f statefulset.yaml
+
+kubectl wait --for=condition=ready pod -l app=mysql --timeout=120s -n web-app
+
+./prepare-app.sh
+kubectl apply -f deployment.yaml
+kubectl apply -f service.yaml
+
+echo "Application deployed to Kubernetes!"
--- a/z2/statefulset.yaml
+++ b/z2/statefulset.yaml
@ -0,0 +1,50 @@
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: mysql
+  namespace: web-app
+  labels:
+    app: k8s-task-manager
+    tier: database
+spec:
+  serviceName: mysql
+  replicas: 1
+  selector:
+    matchLabels:
+      app: k8s-task-manager
+      tier: database
+  template:
+    metadata:
+      labels:
+        app: k8s-task-manager
+        tier: database
+    spec:
+      containers:
+      - name: mysql
+        image: mysql:5.7
+        env:
+        - name: MYSQL_ROOT_PASSWORD
+          value: "password"
+        - name: MYSQL_DATABASE
+          value: "taskmanager"
+        ports:
+        - containerPort: 3306
+          name: mysql
+        volumeMounts:
+        - name: mysql-persistent-storage
+          mountPath: /var/lib/mysql
+        resources:
+          requests:
+            cpu: "500m"
+            memory: "512Mi"
+          limits:
+            cpu: "1000m"
+            memory: "1Gi"
+  volumeClaimTemplates:
+  - metadata:
+      name: mysql-persistent-storage
+    spec:
+      accessModes: [ "ReadWriteOnce" ]
+      resources:
+        requests:
+          storage: 2Gi
--- a/z2/stop-app.sh
+++ b/z2/stop-app.sh
@ -0,0 +1,11 @@
+#!/bin/bash
+
+kubectl delete -f service.yaml
+kubectl delete -f deployment.yaml
+
+kubectl delete -f statefulset.yaml
+kubectl delete -f persistentvolume.yaml
+
+kubectl delete -f namespace.yaml
+
+echo "Application removed from Kubernetes!"