IMC Frontend — CI/CD mit GitHub Actions, Docker & Render


Steve Kana

    Dieses Projekt befindet sich noch in Entwicklung. Die Integration des Backend-Services und der Datenbank in unsere CI/CD-Pipeline wird aktuell vorbereitet und wird in Kürze veröffentlicht.

    Aufbau einer CI/CD-Pipeline für ein React-Projekt mit GitHub Actions: automatisierte Tests, striktes Linting, Docker-Image-Erstellung, Push nach Docker Hub und automatisiertes Deployment via Render. Umsetzung einer produktionsreifen Nginx/Docker-Konfiguration für Frontend-Hosting.
  • Projektziel:
  • eine vollständige CI/CD-Pipeline mit GitHub Actions einzurichten
  • ein Produktions-Image mit Docker + Nginx zu erstellen
  • automatisierte Deployments über Render und Docker Hub umzusetzen
  • Tests & Qualität: Unit-Tests laufen in der Pipeline; bei Fehlern wird das Deployment blockiert.
    • Technologien: React + Vite, GitHub Actions, Docker / Docker Hub / Nginx, Render
    • Architektur React-Projekt:
    • Pizza App (Django)
    • Continuous Integration (CI)
        • Die CI-Pipeline führt automatisch folgende Schritte aus:
      • ✔ Abhängigkeiten installieren
      • ✔ Build mit Vite (npm run build)
      • ✔ Unit-Tests (Vitest)
      • ✔ ESLint (striktes Linting)
      • ✔ Mindest-Coverage (80%)
      • ✔ Upload des dist/-Builds als Artifact

        • - Schlägt ein Test fehl → kein Deployment
        - Schlägt der Linter fehl → kein Deployment
    • Continuous Deployment (CD)
        • Der automatische Deploy-Prozess funktioniert wie folgt:
        1. GitHub Actions erstellt ein Docker-Image: 
          FROM nginx:1.27-alpine
              COPY dist /usr/share/nginx/html
              COPY nginx.conf /etc/nginx/conf.d/default.conf
              EXPOSE 80
              CMD ["nginx", "-g", "daemon off;"]
        2. Das Image wird in Docker Hub gepusht.
        3. GitHub Actions löst einen Deploy Hook bei Render aus.
        4. Render lädt das neue Image und startet den Container neu.
          5. Ergebnis: Jede Änderung im Git-Repository wird automatisch deployed.