initial commit

2026-04-13 14:20:53 +03:00
commit 0abb1b5550
4 changed files with 339 additions and 0 deletions
@@ -0,0 +1,7 @@
+FROM httpd:2.4-alpine
+
+# Copy your landing page into Apache's web root
+COPY index.html /usr/local/apache2/htdocs/
+
+# Expose port 80
+EXPOSE 80
@@ -0,0 +1,145 @@
+# Simple CI/CD Demo with Docker, Nginx, and GitLab CI
+
+This repository demonstrates a **minimal end-to-end CI/CD pipeline** using **Docker**, **Nginx**, and **GitLab CI/CD**.  
+The project intentionally uses a **very simple static webpage** to focus on illustrating the **build, registry, and deployment workflow** rather than application complexity.
+
+---
+
+## Overview
+
+The repository contains a small static website served by **Nginx running in a Docker container**.  
+A **GitLab CI/CD pipeline** automatically builds the Docker image, pushes it to the container registry, and deploys it to a remote server.
+
+This setup demonstrates a **complete CI/CD lifecycle**:
+
+1. Developer pushes code to the repository
+2. GitLab CI pipeline triggers automatically
+3. Docker image is built from the `Dockerfile`
+4. Image is pushed to the container registry
+5. Deployment server pulls the new image
+6. Container is started or updated on the server
+
+---
+
+## Repository Structure
+```
+.
+├── index.html # Simple static webpage
+├── Dockerfile # Builds the Nginx container
+├── .gitlab-ci.yml # CI/CD pipeline configuration
+└── README.md # Project documentation
+```
+
+---
+
+## Application
+
+The application consists of a **single static HTML page** served by **Nginx**.
+
+The page is packaged inside a Docker container and served via an **Nginx server running on Alpine Linux**, providing a lightweight and efficient runtime environment.
+
+---
+
+## Docker Setup
+
+The `Dockerfile` builds a container using:
+
+- **Nginx**
+- **Alpine Linux base image**
+- The static `index.html` copied into the default Nginx web directory
+
+Typical responsibilities of the container:
+
+- Start an Nginx server
+- Serve the static HTML page
+- Expose the HTTP port
+
+---
+
+## CI/CD Pipeline
+
+The `.gitlab-ci.yml` file defines the automated pipeline used by **GitLab CI/CD**.
+
+### Pipeline Stages
+
+1. **Build**
+   - Builds the Docker image from the repository's `Dockerfile`.
+
+2. **Push**
+   - Tags and pushes the image to the **GitLab Container Registry**.
+
+3. **Deploy**
+   - Connects to the deployment server using **SSH**
+   - Pulls the latest image from the registry
+   - Runs (or replaces) the container on the server
+
+---
+
+## Deployment Flow
+
+```
+Developer Push
+│
+▼
+GitLab CI Pipeline
+│
+├── Build Docker Image
+│
+├── Push to Container Registry
+│
+▼
+Deployment Server (SSH)
+│
+├── Pull Latest Image
+└── Run Container
+```
+
+
+---
+
+## Purpose of This Repository
+
+This repository serves as a **minimal working example of a CI/CD pipeline** that demonstrates:
+
+- Containerizing a web application
+- Automating builds using GitLab CI
+- Publishing Docker images to a registry
+- Deploying containers remotely using SSH
+
+Because the application itself is intentionally simple, the focus remains on **understanding the CI/CD workflow**.
+
+---
+
+## Use Cases
+
+This project can be used for:
+
+- Learning CI/CD fundamentals
+- Demonstrating Docker build pipelines
+- Testing GitLab CI deployment strategies
+- Teaching DevOps workflows with minimal complexity
+
+---
+
+## Requirements
+
+To run or adapt this pipeline you typically need:
+
+- GitLab repository with CI/CD enabled
+- GitLab Container Registry access
+- Docker installed on the deployment server
+- SSH access configured for CI/CD deployment
+
+---
+
+## Summary
+
+This project demonstrates a **simple but complete DevOps workflow**:
+
+- Static web page
+- Dockerized with Nginx (Alpine base)
+- Automated build and registry push
+- Remote deployment via GitLab CI/CD
+
+It provides a clear and lightweight example of **how CI/CD pipelines automate containerized application delivery**.
+
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Campus DevOps Meetup</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-slate-950 text-slate-100">
+
+  <!-- Navbar -->
+  <nav class="flex items-center justify-between p-6 max-w-6xl mx-auto">
+    <h1 class="text-xl font-bold text-cyan-400">Campus DevOps</h1>
+    <a href="#register" class="px-4 py-2 rounded-lg bg-cyan-500 hover:bg-cyan-400 text-black font-semibold">
+      Register
+    </a>
+  </nav>
+
+  <!-- Hero -->
+  <section class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-12 items-center">
+    <div>
+      <h2 class="text-4xl md:text-5xl font-extrabold leading-tight">
+        Learn DevOps.<br />
+        Build Faster.<br />
+        Ship Better.
+      </h2>
+      <p class="mt-6 text-slate-300 text-lg">
+        A hands-on DevOps meetup for campus CS students. Learn CI/CD, Docker, cloud basics,
+        and how real teams ship software.
+      </p>
+      <div class="mt-8 flex gap-4">
+        <a href="#register" class="px-6 py-3 rounded-lg bg-cyan-500 hover:bg-cyan-400 text-black font-semibold">
+          Join the Meetup
+        </a>
+        <a href="#agenda" class="px-6 py-3 rounded-lg border border-slate-700 hover:border-cyan-400">
+          View Agenda
+        </a>
+      </div>
+    </div>
+
+    <div class="bg-slate-900 rounded-2xl p-6 shadow-lg">
+      <pre class="text-sm text-green-400 overflow-x-auto">
+$ git clone campus-devops-meetup
+$ docker build -t hello-devops .
+$ kubectl apply -f deployment.yaml
+🚀 Deployed successfully!
+      </pre>
+    </div>
+  </section>
+
+  <!-- Features -->
+  <section class="bg-slate-900 py-20">
+    <div class="max-w-6xl mx-auto px-6">
+      <h3 class="text-3xl font-bold mb-12 text-center">What You’ll Learn</h3>
+      <div class="grid md:grid-cols-3 gap-8">
+        <div class="bg-slate-800 p-6 rounded-xl">
+          <h4 class="text-xl font-semibold text-cyan-400 mb-2">CI/CD Pipelines</h4>
+          <p class="text-slate-300">
+            Build automated pipelines using GitHub Actions and learn how real teams ship code.
+          </p>
+        </div>
+        <div class="bg-slate-800 p-6 rounded-xl">
+          <h4 class="text-xl font-semibold text-cyan-400 mb-2">Docker & Containers</h4>
+          <p class="text-slate-300">
+            Package your apps with Docker and run them anywhere.
+          </p>
+        </div>
+        <div class="bg-slate-800 p-6 rounded-xl">
+          <h4 class="text-xl font-semibold text-cyan-400 mb-2">Cloud & Kubernetes</h4>
+          <p class="text-slate-300">
+            Learn how apps scale in the cloud with Kubernetes basics.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Agenda -->
+  <section id="agenda" class="py-20 max-w-5xl mx-auto px-6">
+    <h3 class="text-3xl font-bold mb-8 text-center">Meetup Agenda</h3>
+    <div class="space-y-4">
+      <div class="flex justify-between bg-slate-900 p-4 rounded-lg">
+        <span>🎤 Intro to DevOps</span>
+        <span class="text-slate-400">15 min</span>
+      </div>
+      <div class="flex justify-between bg-slate-900 p-4 rounded-lg">
+        <span>⚙️ CI/CD Demo</span>
+        <span class="text-slate-400">30 min</span>
+      </div>
+      <div class="flex justify-between bg-slate-900 p-4 rounded-lg">
+        <span>🐳 Docker Hands-on</span>
+        <span class="text-slate-400">30 min</span>
+      </div>
+      <div class="flex justify-between bg-slate-900 p-4 rounded-lg">
+        <span>☁️ Cloud Q&A + Networking</span>
+        <span class="text-slate-400">30 min</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- Registration -->
+  <section id="register" class="bg-cyan-500 py-20 text-black">
+    <div class="max-w-4xl mx-auto px-6 text-center">
+      <h3 class="text-3xl font-bold mb-4">Join the DevOps Meetup</h3>
+      <p class="mb-8">
+        Free for campus CS students. Limited seats. Register now.
+      </p>
+
+      <form class="max-w-md mx-auto grid gap-4">
+        <input type="text" placeholder="Full Name" class="p-3 rounded-lg border" required />
+        <input type="email" placeholder="Email" class="p-3 rounded-lg border" required />
+        <input type="text" placeholder="University / College" class="p-3 rounded-lg border" />
+        <button class="bg-black text-white py-3 rounded-lg font-semibold hover:bg-slate-900">
+          Reserve My Spot
+        </button>
+      </form>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="py-10 text-center text-slate-500">
+    <p>© 2026 Campus DevOps Meetup • Built by CS students for CS students</p>
+  </footer>
+
+</body>
+</html>
@@ -0,0 +1,61 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: mywebapp
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: mywebapp-config
+  namespace: mywebapp
+data:
+  APP_ENV: "production"
+  LOG_LEVEL: "info"
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: mywebapp
+  namespace: mywebapp
+spec:
+  replicas: 2
+  selector:
+    matchLabels:
+      app: mywebapp
+  template:
+    metadata:
+      labels:
+        app: mywebapp
+    spec:
+      containers:
+      - name: mywebapp
+        image: 10.10.131.45:30500/mywebapp:latest
+        imagePullPolicy: Always
+        ports:
+        - containerPort: 80
+        env:
+        - name: APP_ENV
+          valueFrom:
+            configMapKeyRef:
+              name: mywebapp-config
+              key: APP_ENV
+        - name: LOG_LEVEL
+          valueFrom:
+            configMapKeyRef:
+              name: mywebapp-config
+              key: LOG_LEVEL
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: mywebapp-service
+  namespace: mywebapp
+spec:
+  selector:
+    app: mywebapp
+  ports:
+    - protocol: TCP
+      port: 80
+      targetPort: 80
+  type: NodePort
+