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