It’s #FrontendFriday – Dockerized Angular Application

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.

#stage 1
# Pull node
FROM node:fermium-buster as node
# Create working directory
WORKDIR /app
# Copy full application code into working directory
COPY . .
# Install all dependencies of angular application
RUN npm install
# Build Angular application
RUN npm run build
# stage 2
# Pull nginx for angular hosting
FROM nginx:alpine
# Copy angular target folder (dist) into the static hosting path of nginx
COPY --from=node /app/dist/my-dockerized-angular /usr/share/nginx/html

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

version: "3.8"
services:
  my-dockerized-angular:
    container_name: my-dockerized-angular-container
    image: 'my-dockerized-angular-image:latest'
    ports:
      - "4200:80"
    restart: always

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.