Wie man Angular dockerisiert und deployed

Lukas Mauser

5 min

Dieses Dockerfile baut deine Angular App mit Node und liefert die kompilierten statischen Dateien über nginx aus. Durch den Multi-Stage Build bleibt das finale Image winzig.

Falls du nur zum Kopieren und Einfügen hier bist, hier ist das fertige Dockerfile, das ein Image für deine Angular App erstellt:

Dockerfile

FROM node:22-alpine AS build
WORKDIR /app

# Erst die Dependencies kopieren, damit dieser Layer gecacht bleibt, wenn sich nur der Quellcode ändert
COPY package.json package-lock.json ./
RUN npm ci

# Das Production-Bundle bauen
COPY . .
RUN npm run build

FROM nginx:1.27-alpine AS runtime

# Die Standard-nginx-Config durch eine ersetzen, die Client-Side Routing unterstützt
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Angular 17+ schreibt den Output nach dist/<dein-app-name>/browser
# Ersetz angular-app durch den Namen aus deiner angular.json
COPY --from=build /app/dist/angular-app/browser /usr/share/nginx/html

EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

Du brauchst außerdem eine kleine nginx.conf neben deinem Dockerfile, damit Deep Links und Reloads auf index.html zurückfallen:

server {
    listen 8080;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Und hier ist die .dockerignore Datei:

node_modules
dist
.angular
.git

Um das Image zu bauen und auszuführen, nutze diese Befehle:

docker build -t angular-app .
docker run -p 8080:8080 angular-app

Nicht nur zum Kopieren und Einfügen hier? Dann lass uns durchgehen, was im Dockerfile passiert!

Das Setup

Für dieses Tutorial gehe ich davon aus, dass du ein normales Angular Projekt hast, das mit der Angular CLI erstellt wurde. Lokal würdest du ng serve ausführen, aber das startet einen Development-Server, der nicht für Production gedacht ist.

Für das Deployment machen wir stattdessen zwei Dinge. Zuerst führen wir ng build aus, was deine App zu einem Ordner voller reiner statischer HTML-, CSS- und JavaScript-Dateien kompiliert. Danach geben wir diese Dateien an nginx weiter, einen schnellen Webserver, der statische Assets sehr gut ausliefert. Deshalb hat das Dockerfile zwei Stages: eine zum Bauen, eine zum Ausliefern.

Das Dockerfile

Die erste Stage nutzt Node, um die Dependencies zu installieren und die App zu bauen:

Basis-Image:

Nutzt Node.js 22 auf Alpine für ein kleines Build-Image.
npm ci installiert exakt die Versionen aus deinem Lockfile, was schneller und reproduzierbarer ist als npm install.

Build-Schritt:

npm run build führt ng build aus und schreibt die kompilierte App nach dist/<dein-app-name>/browser. Seit Angular 17 liegt der Browser-Output in diesem browser Unterordner, also prüf den Pfad gegen deinen eigenen dist Ordner.

Die zweite Stage wirft Node komplett weg und behält nur die kompilierten Dateien:

Runtime-Image:

Nutzt nginx:1.27-alpine, das ein paar Megabyte statt der hunderte groß ist, die Node hinzufügen würde.
Kopiert unsere eigene nginx.conf. Die try_files Zeile ist der wichtige Teil. Angular ist eine Single-Page-App, also muss jede Route auf index.html zurückfallen. Ohne die Zeile würde ein Reload auf einer Route wie /dashboard einen 404 zurückgeben.
Kopiert die gebauten Dateien aus der ersten Stage in den Web-Root von nginx.
Lauscht auf Port 8080 und startet nginx im Vordergrund, damit der Container am Leben bleibt.

Achte drauf, die .dockerignore Datei hinzuzufügen, damit node_modules und vorherige Builds nicht an den Docker Daemon geschickt werden. Das beschleunigt den Build und hält das Image sauber.

Deployment

Du kannst diesen Docker Container bei jedem Cloud-Anbieter deployen, der Docker unterstützt. Du könntest zum Beispiel Plattformen wie Heroku, DigitalOcean oder AWS ECS nutzen. Da ich Mitgründer von Sliplane bin, zeig ich dir, wie du es dort deployst.

Nach der Anmeldung kannst du einen neuen Service erstellen, indem du dein GitHub Repository auswählst. Behalt dann einfach die Standardeinstellungen bei und klick auf Deploy.

Sliplane Dashboard

Nach dem Deployment ist deine Angular App unter einer Subdomain von sliplane.app verfügbar, normalerweise ist das einfach dein Service-Name.

Du kannst auch die Logs deiner App sehen, Metriken wie CPU- und Speichernutzung einsehen, persistenten Speicher hinzufügen und vieles mehr. Wann immer du in dein Repository pushst, deployed Sliplane deine App automatisch.

Wenn du Sliplane ausprobieren möchtest, sind die ersten 2 Tage kostenlos! Probier es aus und lass mich wissen, was du davon hältst :)

Deploy Angular in 2 Minuten 🚀

Push dein Repo zu GitHub und lass Sliplane deine Angular App für dich bauen und deployen. Die ersten 2 Tage sind kostenlos.

Nächste Schritte

Gibt es noch etwas, das du wissen möchtest? Brauchst du Hilfe beim Dockerisieren deiner Angular App oder beim Deployen auf einer bestimmten Plattform? Melde dich gerne!

Bis dann,

Lukas