1- Voraussetzungen:
Docker sollte auf deinem System installiert und konfiguriert sein.
2- Docker-Container für Angular einrichten:
Erstelle ein Verzeichnis für dein Angular-Projekt und erstelle darin eine „dockerfile“, die als Konfigurationsdatei für den Container dient.
# Verwende das Node-Image als Grundlage
FROM node:18
# Erstelle ein Verzeichnis für die Anwendung im Container
WORKDIR /app
# Installiere Angular CLI global
RUN npm install -g @angular/cli
# Kopiere dein Projekt in den Container (optional, wenn du bereits ein Projekt hast)
COPY . .
# Installiere Abhängigkeiten (optional, falls sie bereits vorhanden sind)
RUN npm install
# Startbefehl für den Entwicklungsserver
CMD ["ng", "serve", "--host", "0.0.0.0"]
3- docker-compose.yaml-Datei erstellen
Du kannst Docker Compose verwenden, um das setup zu vereinfachen. Erstelle eine docker-compose.yaml Datei im Projektverzeichnis:
version: '3'
services:
angular-app:
build: .
ports:
- "4200:4200"
volumes:
- .:/app
- /app/node_modules
command: ng serve --host 0.0.0.0
4- Angular-Projekt erstellen und starten
Falls du noch kein Angular-Projekt hast, kannst du es wie folgt erstellen und anschliessend den Container starten:
I- Erstelle ein neues Angular-Projekt in deinem Verzeichnis(ausserhalb von Docker, falls „ng new“ nicht direkt im Container laeuft!):
ng new my-angular-app
cd my-angular-app
II- Starte Docker Compose um den Container zu erstellen und Angular zu starten:
docker-compose up
Angular sollte jetzt im Docker Container laufen und du kannst auf der Anwendung unter http://localhost:4200 zugreifen.
Vorteile dieser Methode:
- Isolierte Umgebung: Deine Systemkonfiguration bleibt unberührt.
- Einfache Bereitstellung: Mit Docker kannst du dieselbe Umgebung auf anderen Rechnern replizieren.
- Schnelle Wiederherstellung: Bei Fehlern und Änderungen lässt sich die Umgebung leicht zu erstellen.