Angular-basierte Homelab-Startseite für das lokale Netzwerk (neugasse.lan).
Zeigt Self-Hosted-Services aus Directus als Link-Karten an und ermöglicht die Steuerung von Tasmota-Steckdosen direkt aus dem Browser.

Features

Service-Übersicht — Links zu allen Self-Hosted-Diensten, Bilder und Beschreibungen werden dynamisch aus Directus geladen
Tasmota-Steuerung — Ein/Aus-Toggle für Tasmota-Steckdosen direkt über die Web-UI
Nginx-Container — Auslieferung des Angular-Builds über nginx:stable-alpine via Docker Compose

Stack

Komponente	Technologie
Frontend	Angular 17.1, Bootstrap 5
CMS / API	Directus
Steckdosen	Tasmota (HTTP-API)
Webserver	nginx:stable-alpine (Docker)
Reverse Proxy	Nginx Proxy Manager

Architektur

Browser (Angular SPA)
    │
    │  GET /api/items/landingpage    (kein Token im Frontend)
    │  GET /api/assets/<bild>
    │  GET http://stecker1.neugasse.lan/cm?cmnd=Power
    │  GET http://stecker2.neugasse.lan/cm?cmnd=Power
    ▼
Nginx Proxy Manager
    │  injiziert: Authorization: Bearer <token>  →  Directus
    │  Tasmota-Geräte werden direkt vom Browser angesprochen (LAN)
    ▼
Nginx-Container (Port 9999)
    └── dist/  (Angular Production Build)

Der Directus API-Token verlässt niemals den Browser — er wird ausschließlich im Nginx Proxy Manager als proxy_set_header konfiguriert.

Nginx Proxy Manager — Konfiguration

Im Proxy Host der Landing Page unter Advanced → Custom Nginx Configuration:

location /api/items/landingpage {
    proxy_pass http://directus.neugasse.lan/items/landingpage;
    proxy_set_header Authorization "Bearer <DIRECTUS_TOKEN>";
    proxy_set_header Host directus.neugasse.lan;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /api/assets/ {
    proxy_pass http://directus.neugasse.lan/assets/;
    proxy_set_header Authorization "Bearer <DIRECTUS_TOKEN>";
    proxy_set_header Host directus.neugasse.lan;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Deployment

Voraussetzungen

Node.js 20 LTS
Angular CLI 17.x (npm install -g @angular/cli)
Docker + Docker Compose auf dem Zielhost (Synology NAS)

Production Build

# 1. Dependencies installieren (einmalig nach Clone)
npm install

# 2. Production Build
ng build

# Output: dist/ang-university-httpclient/browser/

Deploy auf NAS

rsync -av --delete dist/ang-university-httpclient/browser/ \
  hans@nas.neugasse.lan:/volume1/docker/landingpage/dist/

Docker-Container starten

cd webserver-docker
docker compose up -d

Der Container lauscht auf Port 9999 und wird vom Nginx Proxy Manager nach außen exponiert.

Lokale Entwicklung

Dev-Proxy einrichten

proxy.conf.json wird nicht ins Repository committed (siehe .gitignore).
Vorlage kopieren und Token eintragen:

cp proxy.conf.example.json proxy.conf.json
# Token eintragen

Dev-Server starten

ng serve

Der Proxy ist in angular.json unter serve.options.proxyConfig eingetragen und wird automatisch verwendet.

Tasmota-Steckdosen

Die Steckdosen werden direkt vom Browser über ihre lokalen DNS-Namen angesprochen.
Konfiguration in src/app/tasmota.service.ts:

ID	Name	Adresse
1	Aktiv Kohle Lüfter	`http://stecker1.neugasse.lan`
2	Bambu P1P	`http://stecker2.neugasse.lan`

Weitere Steckdosen können im sockets-Array in tasmota.service.ts ergänzt werden.

Projektstruktur

├── src/
│   ├── app/
│   │   ├── links/                  # Service-Karten-Komponente
│   │   ├── tasmota-control/        # Steckdosen-Toggle-Komponente
│   │   ├── links.service.ts        # Directus API-Anbindung
│   │   ├── tasmota.service.ts      # Tasmota HTTP-API
│   │   ├── links.ts                # Interfaces: Links, LinksResponse
│   │   └── socket.interface.ts     # Interface: TasmotaSocket
│   └── environments/
│       ├── environment.ts          # Dev
│       └── environment.prod.ts     # Prod
├── webserver-docker/
│   ├── docker-compose.yml          # nginx:stable-alpine, Port 9999
│   └── nginx.conf                  # SPA-Routing, Gzip, Cache-Header
├── proxy.conf.example.json         # Dev-Proxy Vorlage (ohne Token)
└── apacheconfs/                    # Veraltet — nicht mehr verwendet

apacheconfs/ ist historisch und wird nicht mehr aktiv genutzt. Der Reverse Proxy wird vollständig über den Nginx Proxy Manager abgebildet.

Sicherheitshinweise

Der Directus API-Token gehört ausschließlich in die NPM-Konfiguration — nie in den Quellcode oder ins Repository
proxy.conf.json ist in .gitignore eingetragen und wird nicht committed
Tasmota-Geräte sind nur im LAN erreichbar (*.neugasse.lan)