Produktivität in der Webentwicklung

Produktivität in der Webentwicklung: Automatisierte Builds mit GitHub Actions, Docker, Spring Boot & React

In dieser Anleitung erfährst du, wie du deine Fullstack-Webanwendung mit GitHub Actions, Docker, Spring Boot und React automatisiert bauen, testen und deployen kannst – für eine moderne, effiziente CI/CD-Pipeline.

1. Projektstruktur

• /backend – Spring Boot Anwendung
• /frontend – React App
• docker-compose.yml – orchestriert beide Services
• .github/workflows/ci-cd.yml – GitHub Actions Workflow

2. Dockerfile erstellen (Backend & Frontend)

2.1 Backend: /backend/Dockerfile

FROM openjdk:17-jdk-slim
WORKDIR /app
COPY mvnw ./
COPY .mvn .mvn
COPY pom.xml .
COPY src src
RUN ./mvnw package -DskipTests
ENTRYPOINT ["java","-jar","target/myapp.jar"]

2.2 Frontend: /frontend/Dockerfile

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY src src
RUN npm run build
FROM nginx:alpine
COPY --from=0 /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

3. docker-compose.yml definieren

version: "3.8"
services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
  frontend:
    build: ./frontend
    ports:
      - "3000:80"

Führe docker-compose up --build aus, um beide Services lokal zu starten.

4. GitHub Actions Workflow (CI/CD)

Erstelle die Datei .github/workflows/ci-cd.yml:

name: CI/CD Pipeline

on:
  push:
    branches: [main]

jobs:
  build_and_test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Java 17 einrichten
        uses: actions/setup-java@v3
        with:
          distribution: 'temurin'
          java-version: '17'

      - name: Backend bauen & testen
        working-directory: backend
        run: ./mvnw test

      - name: Node.js einrichten
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Frontend bauen
        working-directory: frontend
        run: npm install && npm run build

  docker_build_and_push:
    needs: build_and_test
    runs-on: ubuntu-latest
    environment: production
    steps:
      - uses: actions/checkout@v3

      - name: Login bei Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USER }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Backend-Image bauen & pushen
        working-directory: backend
        uses: docker/build-push-action@v4
        with:
          context: ./backend
          tags: deinuser/backend:latest

      - name: Frontend-Image bauen & pushen
        working-directory: frontend
        uses: docker/build-push-action@v4
        with:
          context: ./frontend
          tags: deinuser/frontend:latest

5. GitHub Secrets einrichten

• DOCKERHUB_USER – dein Benutzername bei Docker
• DOCKERHUB_TOKEN – generiertes Zugriffstoken

6. Deployment-Optionen

• Docker Compose auf einem VPS – Pull & Restart via SSH
• Kubernetes – Helm Charts oder Kustomize verwenden
• Cloud Services – AWS ECS, Google Cloud Run o.Ä.

7. Best Practices

• Caching von Maven- & Node-Dependencies spart Zeit
• Verwende mvn verify und eslint zur Codequalität
• Nutze Versionstags statt :latest für Images
• Füge Healthchecks & Monitoring (z.B. Prometheus) hinzu

Fazit

Mit dieser CI/CD-Pipeline automatisierst du den gesamten Prozess vom Code bis zur produktionsreifen Anwendung – für maximale Effizienz und weniger manuelle Fehler.

Im nächsten Schritt: automatische Tests, Staging-Umgebungen, Canary-Releases und DB-Migrationen!