Frontend-Automatisierung & Deployment

Für das Automatisieren und Bereitstellen (Deployment) eines Angular-Frontends wird üblicherweise ein Dockerfile verwendet.
Dieses Dockerfile besteht aus zwei Phasen (Multi-Stage-Build):

• Build-Stage → Angular-App bauen
• Deployment-Stage → Build-Ergebnis mit Nginx ausliefern

Das Dockerfile liegt z. B. unter:

/webui/Dockerfile

Dockerfile-Inhalt

# --- BUILD STAGE ---
FROM node AS node
WORKDIR /ausgabemanagement

COPY . .
RUN npm install
RUN npm install -s node-sass
RUN npm run build

# --- DEPLOY STAGE ---
FROM nginx
COPY --from=node /ausgabemanagement/dist /usr/share/nginx/html
# Kopiert die gebaute Angular-App in das Nginx-Verzeichnis

Dockerfile bauen

Im Terminal in das Dockerfile-Verzeichnis wechseln:

cd ausgabe-management/src/webui

Docker-Image bauen:

docker build . -t mang-frontend

Mit -t wird das Image mit einem Tag versehen.
Dieser Tag wird im docker-compose.yml verwendet.

docker-compose.yml – Frontend, Backend, Datenbank verbinden

Über docker-compose.yml werden drei Komponenten gestartet:

• Frontend (Angular)
• Backend (Spring Boot)
• Datenbank (PostgreSQL)

Alle Container müssen im gleichen Netzwerk sein, damit sie kommunizieren können.

PostgreSQL im Backend aktivieren

In der pom.xml muss die PostgreSQL-Dependency enthalten sein:

<dependency>
    <groupId>org.postgresql</groupId>
    <artifactId>postgresql</artifactId>
    <version>42.7.3</version>
    <scope>runtime</scope>
</dependency>

WICHTIG: Frontend → Backend URL anpassen

Lokal würde Angular so aussehen:

export const environment = {
    production: false,
    API_BASE_PATH: "http://localhost:8000/api"
};

Im Docker-Umfeld funktioniert „localhost“ nicht, denn jeder Container hat sein eigenes Netzwerk.

Deshalb muss der Backend-Container-Name verwendet werden, z. B.:

API_BASE_PATH: "http://go-codierung-backend-server:8100/api"

docker-compose.yml (korrigiert)

version: "3.1"

networks:
  go-codierung:

services:

  db:
    image: postgres
    container_name: go-codierung-pg-server
    hostname: go-codierung-pg-server
    networks:
      - go-codierung
    ports:
      - "5432:5432"
    environment:
      POSTGRES_PASSWORD: postgres

  backend:
    image: backend
    container_name: go-codierung-backend-server
    hostname: go-codierung-backend-server
    ports:
      - "8100:8100"
    restart: always
    networks:
      - go-codierung

  frontend:
    image: frontend
    container_name: go-codierung-frontend-server
    hostname: go-codierung-frontend-server
    ports:
      - "8200:80"
    restart: always
    networks:
      - go-codierung

Hinweis:
Das Frontend braucht eigentlich keinen eigenen Hostnamen, da es nur statische Dateien ausliefert.