42 VIEWS

It’s #FrontendFriday – Dockerized Angular Application

23.09.2022

Hallo Zusammen, es ist einmal wieder soweit für einen spannenden Blogpost am Frontend Friday.

Heute geht es darum, wie Angular Anwendungen via Docker installiert und gestartet werden können.

Voraussetzungen

  • Lauffähige Installation von:
    • Docker
    • Docker-Compose
    • Angular
  • Basis Know How in
    • Docker
    • Docker-Compose
    • Angular

Zu Beginn muss eine Anwendung über die Angular CLI erstellt werden. Wir erstellen eine Angular Anwendung mit den Standardparametern und dem Namen “my-dockerized-angular“.

 

ng new my-dockerized-angular

Nun benötigen wir noch ein Dockerfile zur Erzeugung des Docker-Images. Dazu im Root-Verzeichnis der Anwendung eine Datei namens “Dockerfile” ohne Endung erstellen.

Die unten stehenden Informationen müssen in dem Dockerfile eingetragen werden.

 

Mit dem nachfolgenden Befehl (Ausführung im Verzeichnis des Dockerfile) wird das eigentliche Docker-Image aus dem obigem Dockerfile, mit dem Namen my-dockerized-angular-image erstellt.

docker build -t my-dockerized-angular-image .

docker images

Nach der Erstellung des Docker-Images, müssen wir noch eine docker-compose Datei anlegen, welche dass im vorigen Schritt gebaute Image tatsächlich auch startet.

docker-compose.yml erstellen & Inhalt einfügen

Anschließend können wir den Container auf Basis unserer Konfiguration starten.

docker-compose up -d

Mit nachfolgendem Befehl können wir anzeigen lassen, welche Docker-Container aktiv sind

docker ps

Browser öffnen

http://localhost:4200/

 

Fazit

Docker in Kombination mit Docker-Compose bietet gute Möglichkeiten eine Frontend Angular Anwendung installierbar und vor allem übertragbar bereitzustellen.

Der Konfigurationsaufwand ist überschaubar und verständlich und kann für weitere Angular Frontendanwendungen fast komplett übernommen werden, wodurch die Wiederverwendbarkeit steigt.

Da gängige Cloudanbieter Docker unterstützen, lässt sich auch hier recht einfach die Anwendung installieren.

 

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

*Pflichtfelder

*