Wie man Docker für die Produktion einsetzt und mit der Cloud zusammenarbeitet

In der modernen Softwareentwicklung gewinnt der Einsatz von Containern zunehmend an Bedeutung, vor allem im Hinblick auf die Bereitstellung und Skalierbarkeit von Anwendungen. Docker, als eines der führenden Werkzeuge zur Containerisierung, ermöglicht es Entwicklern, ihre Anwendungen in isolierten Umgebungen zu verpacken und auf verschiedenen Systemen ohne Anpassung auszuführen. Dies erleichtert nicht nur den Entwicklungsprozess, sondern auch die Bereitstellung und Wartung der Anwendung. In diesem Abschnitt wird erklärt, wie man Docker effektiv in einer Produktionsumgebung einsetzt und wie man Container in der Cloud orchestriert und verwaltet.

Ein entscheidender Schritt bei der Nutzung von Docker ist das Erstellen und Verwalten von Images, die die Konfiguration und den Code einer Anwendung enthalten. Der erste Schritt besteht darin, eine Dockerfile zu erstellen. Diese Datei enthält die Anweisungen, wie das Docker-Image gebaut wird, indem sie die Abhängigkeiten und Konfigurationen für das Projekt festlegt. Zum Beispiel könnte ein einfaches Dockerfile wie folgt aussehen:

dockerfile
Copy code
FROM duluca/minimal-node-web-server:lts-alpine

WORKDIR /usr/src/app
COPY dist/local-weather-app public

Hierbei ist es wichtig, dass das Verzeichnis dist genau überprüft wird, um sicherzustellen, dass die richtigen Dateien kopiert werden, insbesondere die index.html, die die Grundlage der Webanwendung darstellt. Nachdem das Dockerfile erstellt wurde, kann das Image mit den Befehlen npm run predocker:build und npm run docker:build gebaut werden. Diese Befehle sorgen dafür, dass die Anwendung korrekt in einem Docker-Container ausgeführt wird.

Ein weiteres nützliches Werkzeug, um den Prozess zu automatisieren, ist der Befehl npm run docker:debug. Mit diesem Befehl wird die Anwendung getestet, gebaut, getaggt und in einem neuen Browserfenster gestartet, um sicherzustellen, dass der Container korrekt läuft. Auch der Befehl npm run docker:publish ermöglicht es, das erstellte Image in ein öffentliches Repository wie Docker Hub zu pushen, um es für die Produktion bereitzustellen.

Neben diesen manuellen Befehlen bietet Visual Studio Code (VS Code) eine hervorragende Unterstützung für Docker-Entwickler. Durch das Hinzufügen der Docker-Erweiterung ms-azuretools.vscode-docker können Entwickler ihre Docker-Container direkt aus der Entwicklungsumgebung heraus verwalten. Diese Erweiterung ermöglicht es, alle Container und Images auf einem System zu überwachen, zu starten und zu stoppen sowie mit Registries wie Docker Hub zu interagieren. Der Einsatz solcher Tools vereinfacht die Arbeit erheblich und reduziert den manuellen Aufwand.

Die größte Herausforderung bei der Arbeit mit Docker in einer Produktionsumgebung ist jedoch die Bereitstellung der Container in der Cloud. Docker-Container bieten eine hohe Flexibilität und Portabilität, was bedeutet, dass sie problemlos auf verschiedenen Cloud-Diensten wie AWS, Azure oder Google Cloud ausgeführt werden können. Es gibt zwei Hauptmodelle für die Bereitstellung von Containern in der Cloud: das verwaltete und das nicht verwaltete Modell.

Im verwalteten Modell übernimmt der Cloud-Anbieter die Verwaltung der zugrunde liegenden Infrastruktur, einschließlich der Container-Orchestrierung und -Sicherheit. Dies bietet den Vorteil, dass die Komplexität der Verwaltung reduziert wird und Entwickler sich auf die Anwendung selbst konzentrieren können. In diesem Fall übernimmt der Anbieter eine größere Verantwortung, was zu einer höheren Sicherheit und in vielen Fällen auch zu niedrigeren Kosten führt.

Im Gegensatz dazu gibt das nicht verwaltete Modell den Entwicklern mehr Kontrolle über die Infrastruktur. In diesem Fall stellt der Cloud-Anbieter lediglich virtuelle Maschinen (VMs) zur Verfügung, auf denen Entwickler den Betrieb der Container selbst einrichten und verwalten müssen. Dies erfordert tiefere Kenntnisse in der Systemadministration und erfordert eine sorgfältige Planung der Sicherheitsvorkehrungen und der Skalierung der Infrastruktur.

Ein wichtiger Aspekt bei der Verwendung von Docker in der Cloud ist die Container-Orchestrierung. Hierbei kommen Tools wie Kubernetes zum Einsatz, die eine effiziente Verwaltung und Skalierung von Containern ermöglichen. Mit Kubernetes können Entwickler Container über ein Cluster von Maschinen hinweg verwalten und automatisch an den aktuellen Bedarf anpassen. Dies stellt sicher, dass die Anwendung bei steigender Nachfrage effizient skaliert werden kann, ohne dass manuelle Eingriffe erforderlich sind.

Ein weiteres Konzept, das für die Produktion von Bedeutung ist, ist das Continuous Deployment (CD). CD ermöglicht es, Anwendungen kontinuierlich in die Produktion zu bringen, sobald Änderungen im Code vorgenommen werden. Dies wird durch eine CI/CD-Pipeline erreicht, die den gesamten Prozess von der Code-Änderung bis zur Bereitstellung automatisiert. Dabei wird jede Änderung automatisch getestet und auf verschiedenen Umgebungen bereitgestellt, um sicherzustellen, dass die Anwendung stabil bleibt.

Es ist jedoch wichtig zu beachten, dass die Verwendung von Docker und Container-Orchestrierung in der Cloud nicht ohne Herausforderungen ist. Die Sicherheit von Container-Umgebungen muss besonders sorgfältig betrachtet werden, da Container potenzielle Angriffspunkte darstellen können. Die Implementierung eines sicheren Container-Managements und die ständige Überwachung der Anwendung sind entscheidend, um Schwachstellen zu minimieren. Zudem muss die Infrastruktur regelmäßig gewartet und aktualisiert werden, um den reibungslosen Betrieb zu gewährleisten.

Zusammenfassend lässt sich sagen, dass Docker eine leistungsstarke Lösung für die Entwicklung und Bereitstellung von Anwendungen ist, insbesondere wenn es um die Containerisierung und Cloud-Integration geht. Die Kombination aus Docker und Kubernetes bietet eine robuste Infrastruktur, die eine skalierbare und effiziente Bereitstellung von Anwendungen ermöglicht. Entwickler sollten jedoch die nötige Aufmerksamkeit auf die Sicherheitsaspekte und die Verwaltung der Infrastruktur richten, um die Vorteile von Docker in einer Produktionsumgebung voll ausschöpfen zu können.

Wie man eine minimalistische, zustandslose, datengesteuerte Architektur in einer Angular-Anwendung umsetzt

Die Architektur einer Angular-Anwendung sollte sich nicht um die Übertechnisierung drehen. Häufig wird versucht, eine Anwendung mit zu vielen abstrakten Patterns zu entwerfen, die in der Praxis nur zu unnötiger Komplexität führen. Stattdessen ist es oft sinnvoller, sich auf wesentliche Datenentitäten wie Rechnungen oder Personen zu konzentrieren, mit denen die Benutzer interagieren. Dies ermöglicht eine schlanke und effiziente API-Gestaltung und stellt sicher, dass die Anwendung eine klare Struktur behält, ohne sich in zu vielen Details zu verlieren. Durch das Fokussieren auf die relevanten Datenentitäten und das konsequente Implementieren eines reaktiven Datenmodells, das auf den Prinzipien von RxJS basiert, können wir eine minimalistische, zustandslose Architektur erreichen.

Ein weiterer entscheidender Aspekt für eine saubere Architektur ist die Trennung von Benutzersteuerungen und Komponenten. Während Benutzersteuerungen wie benutzerdefinierte Datums- oder Bewertungssteuerungen oft hochgradig interaktiv und dynamisch sind, sollten sie nicht in der gleichen Weise behandelt werden wie die Geschäftslogik einer Anwendung. Benutzersteuerungen tendieren dazu, stark gekoppelt und spezifisch zu sein, während Komponenten eher als Container für Geschäftslogik und CRUD-Operationen fungieren. Ein gut strukturiertes Design, das diese Unterscheidung beachtet, wird nicht nur die Lesbarkeit des Codes fördern, sondern auch sicherstellen, dass die Geschäftslogik von der Benutzerinteraktion getrennt bleibt.

Ein weiteres Prinzip, das in modernen Softwarearchitekturen nicht übersehen werden sollte, ist das DRY-Prinzip (Don't Repeat Yourself). Es ist entscheidend, Redundanzen im Code zu vermeiden. Anstatt denselben Code an verschiedenen Stellen zu wiederholen, sollten Entwickler dafür sorgen, dass Verhalten zentralisiert und in wiederverwendbare Funktionen ausgelagert wird. Ein gut strukturiertes OOP-Design (Objektorientierte Programmierung) kann hierbei eine wertvolle Hilfe sein, um wiederverwendbare und wartbare Codebausteine zu erstellen. Auch wenn in reaktiven Architekturen und funktionalen Ansätzen viel Wert auf das Vermeiden von Zustandsänderungen gelegt wird, bleibt es dennoch wichtig, dass das zugrunde liegende Design eine klare Trennung von Daten und Logik ermöglicht.

Der Einsatz von TypeScript-Features wie Enums, Interfaces und Generics sorgt dafür, dass der Code nicht nur funktional, sondern auch robust und wartbar bleibt. Enums ermöglichen es, logische Vergleiche auf eine fehlerresistente Weise zu schreiben, wodurch unerwünschte Probleme durch Rechtschreibfehler oder geänderte Geschäftsanforderungen vermieden werden. Interfaces hingegen ermöglichen es, Datenstrukturen klar zu definieren und deren Transformation zwischen externen und internen Formaten sicherzustellen.

Schließlich ist es wichtig, dass bei der Entscheidung über die Struktur der Anwendung und die Architektur kein starrer Plan verfolgt wird. Stattdessen sollte der Fokus auf einer flexiblen und adaptiven Architektur liegen, die es ermöglicht, Änderungen schnell und einfach umzusetzen. Die Anwendung sollte von vornherein so konzipiert sein, dass sie leicht erweiterbar ist und die verschiedenen Komponenten und Funktionen sich nicht gegenseitig behindern.

Wie man eine Router-First-Anwendung mit Angular erstellt

Im modernen Web-Entwicklungsprozess hat sich die modulare Architektur als eine der effektivsten Methoden zur Erstellung komplexer Anwendungen herausgestellt. Eine Schlüsseltechnik, um diese Modularität zu gewährleisten, ist der Router-First-Ansatz. In diesem Kapitel werden wir eine Angular-Anwendung aufbauen, die diesen Ansatz verfolgt. Wir werden die Struktur einer Standalone-Anwendung entwickeln und dabei Angulars Router und Lazy-Loading-Techniken nutzen.

Ein Router-First-Ansatz bedeutet, dass Routing von Beginn an in der Anwendung eingerichtet wird, wodurch das Navigieren zwischen verschiedenen Ansichten und Modulen sofort möglich ist. Die Idee besteht darin, die Navigation schon früh zu ermöglichen und dann weitere Funktionen modular hinzuzufügen.

Zunächst erstellen wir eine Anwendung mit bereits konfiguriertem Routing. Dies gelingt durch einen einfachen Befehl:

bash
Copy code
$ npm create @angular (Projektname) (SCSS auswählen) (Antwort auf SSR mit „nein“)

Daraufhin wird eine neue Datei app.routes.ts in unserem Projekt erstellt, die wie folgt aussieht:

typescript
Copy code
import { Routes } from '@angular/router';
export const routes: Routes = [];

In dieser Datei werden die Routen definiert. Eine weitere wichtige Datei ist app.config.ts, die die Konfiguration des Routers übernimmt:

typescript
Copy code
import { ApplicationConfig } from '@angular/core';

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
   providers: [provideRouter(routes)]
};

Die appConfig wird dann in der main.ts-Datei verwendet, um die Anwendung zu starten:

typescript
Copy code
import { bootstrapApplication } from '@angular/platform-browser';

import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

Nachdem diese Konfigurationen vorgenommen wurden, können Sie die Anwendung durch den folgenden Befehl ausführen:

bash
Copy code
npm start

Konfiguration von Angular und VS Code

Der nächste Schritt besteht darin, sicherzustellen, dass alle Entwicklungswerkzeuge korrekt eingerichtet sind. Dazu verwenden wir mrm, ein Kommandozeilen-Tool, das dabei hilft, Konfigurationsdateien in Projekten zu synchronisieren.

Obwohl VS Code hier als Beispiel dient, können die Skripte auch in anderen IDEs wie WebStorm verwendet werden. Die folgenden Schritte werden auf das Projekt angewendet:

1. Anwendung der VS Code-Konfiguration für Angular:

bash
Copy code
npx mrm angular-vscode

2. Anwendung der npm-Skripte für die Docker-Konfiguration:

bash
Copy code
npx mrm npm-docker

3. Implementierung eines npm-Skripts zum Erstellen der Anwendung im Produktionsmodus:

json
Copy code
"scripts": {
   "build:prod": "ng build --configuration production"
}

4. Ausführen des Stils- und Linting-Checks:

bash
Copy code
npm run style:fix

npm run lint:fix

5. Starten der Anwendung:

bash
Copy code
npm start

Konfiguration von Angular Material und Stilen

Zunächst installieren wir Angular Material und das FlexLayout-Modul:

bash
Copy code
npx ng add @angular/material (Custom auswählen, No zu globaler Typografie, Ja zu Browser-Animationen)
npm i @ngbracket/ngx-layout

Da wir eine Standalone-Anwendung erstellen, müssen wir die erforderlichen Material-Module und FlexModule in jedem einzelnen Modul importieren, das diese benötigt.

Die grundlegenden CSS-Stile werden in der Datei styles.scss definiert:

scss
Copy code
html, body {

   height: 100%;
}
body {
   margin: 0;
   font-family: Roboto, 'Helvetica Neue', sans-serif;
}
.top-pad { margin-top: 16px; }
.h-pad { margin: 0 16px; }
.v-pad { margin: 16px 0; }
.left-pad { margin-left: 8px; }
.flex-spacer { flex: 1 1 auto; }

Zusätzlich wird der Anwendungstitel in der index.html aktualisiert.

Design von LemonMart

Der nächste Schritt im Entwicklungsprozess besteht darin, ein einfaches Design für unsere Anwendung zu entwickeln. Es ist entscheidend, zu Beginn eine klare Vorstellung davon zu haben, wie das System insgesamt aufgebaut sein soll, von der Datenbank bis zum Frontend. Dies wird durch eine enge Zusammenarbeit zwischen den Teams erreicht, die technische Vision und die Benutzeranforderungen gemeinsam definieren.

Identifizierung von Benutzerrollen

Ein wichtiger Bestandteil des Designs ist die Definition der Benutzerrollen und deren spezifische Funktionen innerhalb der Anwendung. Für LemonMart sehen wir vier Hauptrollen vor:

• Authentifizierte Benutzer: Jeder authentifizierte Benutzer hat Zugriff auf sein Profil.

• Kassierer: Diese Rolle ist ausschließlich für den Kassiervorgang verantwortlich.

• Lagerarbeiter: Der Lagerarbeiter ist für die Durchführung von Bestandsfunktionen zuständig.

• Manager: Der Manager hat Zugriff auf alle Funktionen eines Kassierers und Lagerarbeiters sowie zusätzliche administrative Funktionen.

Diese Rollen bilden die Grundlage für die Gestaltung der Benutzeroberfläche und die Struktur der Anwendung.

Erstellung einer Site Map

Um eine klare Vision für die Anwendung zu entwickeln, müssen wir eine Site Map erstellen. Diese Map dient als Grundlage für die Definition der Hauptfunktionen und deren Interaktion miteinander. Auf dieser Map werden die verschiedenen Benutzerrollen und ihre entsprechenden Seiten und Funktionen dargestellt. Tools wie MockFlow helfen dabei, eine detaillierte Site Map zu erstellen, die als Grundlage für die Implementierung der Anwendung dient.

Diese frühen Entwürfe sind entscheidend, um sicherzustellen, dass alle Teammitglieder dieselbe Vision teilen und dass die Anwendung langfristig skalierbar bleibt.

Wie man User-Daten verwaltet und ein mehrstufiges responsives Formular in Angular erstellt

Die Entwicklung von Anwendungen, die eine benutzerfreundliche Verwaltung von Benutzerdaten erfordern, ist eine zentrale Aufgabe in vielen modernen Webanwendungen. Besonders in Angular-Projekten ist es von entscheidender Bedeutung, die Benutzerprofile effektiv zu verwalten und gleichzeitig die Benutzererfahrung auf verschiedenen Geräten zu optimieren. In dieser Kapitelbeschreibung wird gezeigt, wie man grundlegende Benutzerverwaltungsfunktionen wie das Abrufen und Aktualisieren von Benutzerdaten implementiert und wie man ein mehrstufiges, responsives Formular für die Benutzereingabe erstellt.

Ein UserService, der grundlegende CRUD-Operationen unterstützt, ist unerlässlich, um Benutzerinformationen auf einem Server zu aktualisieren und abzurufen. In Angular wird dies am besten durch die Verwendung von Observable-Datenströmen und der Integration von Authentifizierungs- und Caching-Diensten erreicht.

Implementierung von getUser und updateUser

typescript
Copy code
getUser(id: string | null): Observable<IUser> {
  if (id === null) {
    return throwError('User id is not set');
  }
  return this.httpClient.get<IUser>(`${environment.baseUrl}/v2/user/${id}`);
}

typescript
Copy code
updateUser(id: string, user: IUser): Observable<IUser> {
  if (id === '') {
    return throwError('User id is not set');
  }
  this.cache.setItem('draft-user', Object.assign(user, { _id: id }));

  const updateResponse$ = this.httpClient.put<IUser>(

    `${environment.baseUrl}/v2/user/${id}`, user
  ).pipe(map(User.Build), catchError(transformError));
  updateResponse$.subscribe(
    (res) => {

      this.authService.currentUser$.next(res);

      this.cache.removeItem('draft-user');
    },
    (err) => throwError(err)
  );
  return updateResponse$;
}

Diese Implementierung gewährleistet eine robuste Fehlerbehandlung und eine effiziente Nutzung von Caching, was die Benutzererfahrung auch bei Netzwerkproblemen verbessert.

Der richtige Umgang mit Interfaces und Dependency Injection

Ein weiterer zentraler Aspekt der Architektur in Angular-Projekten ist die korrekte Nutzung von Interfaces und Dependency Injection (DI). Die Verwendung von Interfaces wie IUser statt konkreten Implementierungen wie User stellt sicher, dass die Anwendung flexibel bleibt und weniger anfällig für Änderungen in den konkreten Klassen wird. Diese Praxis folgt dem Prinzip der Dependency Inversion aus dem SOLID-Prinzip, das besagt, dass Abhängigkeiten abstrahiert und nicht konkret referenziert werden sollten. So wird der Code stabiler und leichter wartbar.

typescript
Copy code
export interface IUserService {

  getUser(id: string): Observable<IUser>;
  updateUser(id: string, user: IUser): Observable<IUser>;
}

Implementierung eines mehrstufigen responsiven Formulars

Ein Beispiel ist die Implementierung eines Formulars zur Erfassung von Benutzerprofilinformationen. In Angular kann dies durch die Verwendung von FormBuilder und einer Vielzahl von Validierungsregeln erreicht werden. Ein zentraler Bestandteil des Formulars ist die Verwendung von Media Queries, um sicherzustellen, dass das Formular auch auf mobilen Geräten korrekt dargestellt wird.

Zunächst definieren wir die Daten, die für die Auswahl von US-Bundesstaaten notwendig sind:

typescript
Copy code
export interface IUSState {

  code: string;
  name: string;
}
export function USStateFilter(value: string): IUSState[] {

  return USStates.filter((state) => {

    return (
      (state.code.length === 2 && state.code.toLowerCase() === value.toLowerCase()) ||
      state.name.toLowerCase().indexOf(value.toLowerCase()) === 0
    );
  });
}
const USStates = [
  { code: 'AK', name: 'Alaska' },
  { code: 'AL', name: 'Alabama' },
  // ... weitere Staaten
];

Es ist auch wichtig, valide Eingabefelder zu definieren, um sicherzustellen, dass die Daten korrekt und im richtigen Format eingegeben werden. Hier werden Validierungsregeln wie Mindestlängen und reguläre Ausdrücke verwendet, um Eingabefehler zu vermeiden:

typescript
Copy code
export const OptionalTextValidation = [

  Validators.minLength(2),
  Validators.maxLength(50),
];
export const RequiredTextValidation = OptionalTextValidation.concat([Validators.required]);
export const USAZipCodeValidation = [
  Validators.required,
  Validators.pattern(/^\d{5}(?:[-\s]\d{4})?$/),
];
export const USAPhoneNumberValidation = [
  Validators.required,
  Validators.pattern(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})$/),
];

Mit diesen Validierungen stellt man sicher, dass die Benutzereingaben sowohl korrekt als auch vollständig sind.

Schließlich wird das Formular durch den FormBuilder in Angular erstellt. Dies ermöglicht es, ein reaktionsfähiges, mehrstufiges Formular zu implementieren, das sich dynamisch an verschiedene Bildschirmgrößen anpasst. Besonders auf mobilen Geräten ist es wichtig, dass das Formular gut strukturiert und einfach zu navigieren ist.

Weitere Aspekte der Formulararchitektur

Neben der technischen Umsetzung ist es wichtig, die Benutzererfahrung (User Experience, UX) bei der Gestaltung von Formularen zu berücksichtigen. Formulare sollten nicht nur funktional, sondern auch ansprechend und leicht verständlich sein. Die Verwendung von klaren Fehlermeldungen, progressiven Schrittnavigation und optisch ansprechenden Eingabeaufforderungen kann dazu beitragen, dass die Benutzer das Formular leichter ausfüllen und Fehler vermeiden.