DevOps Projekt – CI/CD Pipeline mit GitHub Actions & Docker

1. Projektziel

Ziel dieses Projekts war es, eine realistische DevOps CI/CD-Pipeline aufzubauen, wie sie in professionellen Entwicklungsumgebungen eingesetzt wird.

Automatisierte Qualitätssicherung bei jedem Push
Reproduzierbare Builds durch Containerisierung
Deployment nur bei erfolgreicher CI

2. Architektur React-Projekt(IMC Frontend)

Die folgende Grafik zeigt die Architektur des React-Frontends und die Trennung der Verantwortlichkeiten.

React Projekt Architektur — Architekturübersicht des React-Frontends: klare Trennung von UI-Komponenten und Logik.

3. CI/CD-Ablauf (visuelles Schema)

Dieses Diagramm entspricht 1:1 deinem GitHub Actions Workflow (CI pipeline) mit den Jobs build → test → build_image → deploy.

Gate-Prinzip: Das Deployment (deploy) läuft nur, wenn build, test und build_image erfolgreich sind. Artefakte (dist) werden zwischen Jobs via upload-artifact / download-artifact weitergegeben.

Secrets: Docker Hub Login über DOCKERHUB_USERNAME / DOCKERHUB_TOKEN, Render Deploy über RENDER_DEPLOY_HOOK.

4. CI – Continuous Integration

Der Workflow „CI pipeline“ wird automatisch bei jedem Push auf die entsprechende Feature-Branch ausgelöst und führt alle Continuous-Integration-Schritte aus.

npm ci – saubere Installation der Abhängigkeiten
npm run test – automatisierte Tests mit Vitest
npm run lint – Code-Qualitätsprüfung mit ESLint
npm run build – Erzeugung des Production-Builds

Quality Gate: Schlägt ein CI-Schritt fehl, werden die nachfolgenden Jobs (Docker-Build und Deployment) automatisch blockiert.

Beispiel: Fehlgeschlagener CI-Run (Quality Gate)

Dieses Beispiel zeigt einen fehlgeschlagenen CI-Durchlauf. Der Test-Job schlägt fehl, wodurch das Quality Gate greift und ein Deployment verhindert wird.

GitHub Actions – Fehlgeschlagener CI-Run — Fehlgeschlagener CI-Run: Der Test-Fehler blockiert automatisch den weiteren Pipeline-Ablauf.

Beispiel: Erfolgreicher CI-Run

Dieser Screenshot zeigt einen erfolgreichen CI-Durchlauf, bei dem alle Integrationsschritte ohne Fehler ausgeführt wurden.

GitHub Actions – Erfolgreicher CI-Run — Erfolgreicher CI-Run: Tests, Linting und Build wurden erfolgreich abgeschlossen.

5. Docker Multi-Stage Build

Die Anwendung wird mit einem Multi-Stage Dockerfile gebaut:

Builder Stage: Node.js 20 – Build des React-Frontends
Runtime Stage: Nginx (Alpine) – Auslieferung der statischen Dateien

Vorteil: kleines, sicheres und performantes Production-Image.

Der Docker-Build und Push erfolgen automatisch innerhalb der GitHub Actions CI/CD-Pipeline.

Veröffentlichte Docker Image (Docker Hub)

Das folgende Beispiel zeigt die veröffentlichte Docker Image im öffentlichen Docker Hub Repository.

Docker Hub – Öffentliches Image Repository — Öffentliches Docker Hub Repository mit automatisch erzeugten Images aus der CI/CD-Pipeline.

6. Continuous Deployment auf Render

Nach erfolgreichem CI wird das Deployment automatisch über einen Render Deploy Hook ausgelöst:

Trigger via curl -X POST
Secret sicher gespeichert in GitHub Secrets
Kein manuelles Eingreifen notwendig

🔗 Live Demo

Deployment-Historie

Die Deployment-Historie dokumentiert mehrere automatische Releases, ausgelöst durch erfolgreiche CI/CD-Pipeline-Runs.

7. Warum diese technischen Entscheidungen?

GitHub Actions – Nahtlose Integration, keine zusätzliche Infrastruktur
Docker – Reproduzierbarkeit über alle Umgebungen hinweg
Nginx – Bewährte, performante Lösung für statische Frontends
Render – Einfaches, zuverlässiges Continuous Deployment

8. Lernziele & DevOps-Kompetenzen

Design und Implementierung einer echten CI/CD-Pipeline
Quality Gates als fester Bestandteil des Release-Prozesses
Containerisierung mit Docker Multi-Stage Builds
Automatisiertes Deployment mit Secrets-Management

Hinweis:
Die Integration des Backend-Services und der Datenbank in die CI/CD-Pipeline befindet sich aktuell in Vorbereitung. Die Erweiterung um End-to-End-Flows und automatisierte Deployments wird zeitnah umgesetzt.