Neuigkeiten von trion.
Immer gut informiert.

Docker Build Container für Angular CLI

Docker

Docker als Containerlösung wird vor allem eingesetzt, um damit Anwendungen leicht und reproduzierbar deployen zu können. Dank der Isolation von Abhängigkeiten stellt ein Container sicher, dass eine Anwendung genauso, wie sie auf einem Entwicklungs- oder Testsystem abgenommen wurde, auch später in Produktion läuft.

Docker und Angular

Mit einem Docker Container ist auch die gegenseitige Beeinflussung von Anwendungen minimiert: Benötigt eine Anwendung eine bestimmte Laufzeitumgebung, kann diese im Container isoliert bereitgestellt werden. So kann man zum Beispiel unterschiedliche node.js oder npm Versionen komfortabel parallel nutzen, ohne auf dem Rechner selbst Konfigurationen vornehmen zu müssen.

Ähnliche Vorteile gibt es auch während der Entwicklung:

Hier hat man es mit Build-Werkzeugen wie maven oder npm zu tun und muss Bibliotheken als Abhängigkeiten bereitstellt. Das lässt sich auch auf Angular übertragen: Docker erlaubt exakt reproduzierbare Umgebungen, unabhängig von Betriebssystem und installierten Werkzeugen auf dem Entwicklungsrechner. Zudem lassen sich auch komplexere Umgebungen damit einfacher auf einem Entwicklerrechner - und natürlich ebenso in einer Test-Umgebung - herstellen. Bei Angular lassen sich so unterschiedliche Versionen von Angular CLI in Containern kapseln und so zwischen den Versionen wechseln.

Praktischerweise gibt es auch bereits fertige Docker-Container, die sich für Angular Entwicklung anbieten, z.B. trion/ng-cli.

Der Docker Container verfügt direkt über npm und Angular CLI, so dass es direkt losgehen kann. Als erstes wird das fertige Docker Image heruntergeladen:

docker pull trion/ng-cli

Theoretisch kann die Angular Anwendung dann mittels ng new innerhalb des Docker Contaners erzeugt werden. Als Name für die Angular Anwendung wird in den folgenden Beispielen MyDemo verwedent. Damit nicht nach jedem Befehl eine Container Instanz herumliegt, wird der Parameter --rm gesetzt, damit wird der Container nach der Ausführung gelöscht.

Die Ausgabe von Angular CLI kann dann zum Beipiel so aussehen:

  installing ng2
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.json
  create angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
...

Nun befinden sich die gesamten erzeugten Sourcen und heruntergeladenen NPM Pakete im Container. Und der wird nach der Ausführung gelöscht. Damit die erzeugten Angular Sourcen auch außerhalb des Containers verfügbar sind, wird das aktuelle lokale Arbeitsverzeichnis in das Verzeichnis /app innerhalb des Containers gemounted. Dies ist das Verzeichnis, in dem innerhalb des Containers gearbeitet wird:

docker run --rm
  -v "$PWD":/app trion/ng-cli ng new MyDemo

Unter Linux besitzen Dateien, die im Container angelegt werden den selben Besitzer, wie der User im Container, mit dem die Dateien angelegt werden. Der trion/ng-cli Container setzt als Nutzer zur Laufzeit ID 1000 - bei den meisten Linux Distributionen entspricht dies dem ersten angelegten Nutzer und dürfte bei Installationen mit nur einem Nutzer somit richtig sein.
Um auf Nummer sicher zu gehen, dass alle Dateien wirklich richtigen Besitzer - dem aktuellen User außerhalb des Containers - gehören, setzt man zur Ausführung innerhalb des Containers am besten die User-ID:

docker run -u $(id -u) --rm
  -v "$PWD":/app trion/ng-cli ng new MyDemo

Der erste Schritt zu einem Build-Container für Angular ist damit erledigt.

Im nächsten Artikel werfen wir einen Blick auf das zugehörige Dockerfile: Dockerfile für Angular CLI




Zu den Themen Angular, Docker und Jenkins als Buildserver bieten wir sowohl Unterstützung als auch passende Schulungen an:

Sprechen Sie uns gerne an.

Feedback oder Fragen zu einem Artikel - per Twitter @triondevelop oder E-Mail freuen wir uns auf eine Kontaktaufnahme!

Los geht's!

Bitte teilen Sie uns mit, wie wir Sie am besten erreichen können.