Angular auf Amazon Web Services

Bei interfacewerk deployen wir Angular-Anwendungen für verschiedene Umgebungen auf HMI-Displays wie z.B. Kassenautomaten oder für gängigere Web-Entwicklungs-Infrastrukturumgebungen. Angesichts der zunehmenden Bedeutung von Cloud Computing wollen wir uns ansehen, wie eine Angular-Anwendung bei Amazon Web Services deployt werden kann. Wir werden eine grundlegende Architektur zeigen für die Backend-Anwendung und das Setup einer Domain über https für unsere Angular-Anwendung. Daher werden wir keine Details der eigentlichen Angular-Anwendung und auch keine Details des Backends untersuchen, aber wir werden einige Befehle und einige Tipps und Tricks geben - kein vollständiges Schritt-für-Schritt-Verfahren. Implementieren Sie als auch Ihr erstes Angular-Projekt auf AWS! Die geschätzten Kosten für dieses Setup ohne weitere Nutzung liegen bei ca. 10USD/Monat. Wir werden die folgenden Dienste für unser Setup nutzen: EC2, S3, CloudFront, Route 53 und AWS Zertifikatsmanager.

‍

EC2 ist die Grundlage der AWS Dienste und bietet skalierbare Rechenkapazität. Zu Beginn erstellen Sie eine neue Instanz des Typs Amazon Linux 2 AMI. Für den Testzweck wird empfohlen, t2.micro zu verwenden, da sie eine kostenfreie Version für mehrere Stunden pro Monat bietet. Fahren Sie mit den Standardeinstellungen fort und wählen Sie die Standard-VPC-Sicherheitsgruppe. Beachten Sie, dass dies für die Produktion nicht empfohlen wird, da dadurch alle Protokolle und Ports geöffnet werden. Fügen Sie SSH in Ihre Instanz ein und installieren Sie Docker:

Ziehen Sie Ihr Docker-Image aus Ihrer Registrierung, die Ihren Webserver enthält. Wenn es ausgeführt wird, mappen Sie seinen lokalen Port auf 80. S3 ist ein Objektspeicher, der mit vielen Funktionen wie Versionierung und hoher Verfügbarkeit ausgestattet ist. Erstellen Sie Ihre Angular-Anwendung wie gewohnt. Erstellen Sie einen Bucket in S3 mit dem folgenden Befehl:

Fügen Sie anschließend eine Bucket-Richtlinie hinzu, die öffentlichen Lesezugriff für Ihren Bucket ermöglicht:

Die $policy_json sieht folgendermaßen aus:

In unserem Stup verwenden wir Amazons CDN mit dem Namen CloudFront, um unsere Inhalte an verschiedene Randstandorte zu verteilen. Das verringert die Latenzzeiten auf der ganzen Welt. Erstellen Sie eine Verteilung mit dem folgenden Befehl:

Tipp: Erstellen Sie jedes Mal eine Ungültigkeitserklärung, wenn Sie neue Inhalte auf S3 hochladen. Dadurch wird Ihr alter Inhalt ungültig, und CloudFront holt Ihren neuen Inhalt sofort in die Randbereiche.

Als Nächstes registrieren Sie Zertifikate bei AWS Certificate Manager. Dies kann auch extern durchgeführt werden, aber es ist oft bequemer, die AWS Dienste zu nutzen. Außerdem kann der AWS Certificate Manager kostenlos genutzt werden.

Als nächstes verwenden wir einen Elastic Load Balancer, der Teil des EC2 Dienstes ist. Dieser ist in der Regel geeignet, wenn Sie mehrere EC2-Instanzen zur Verteilung Ihres Datenverkehrs verwenden möchten. In diesem Setup zwingt Amazon Web Services Sie dazu, einen Elastic Load Balancer zu verwenden, da dieser es erlaubt, die https-Anfragen auf Port 80 (http) Ihrer Instanz abzubilden. Erstellen Sie einen Application Load Balancer, der auf Protokoll-https lauscht. Wählen Sie Ihr Zertifikat aus Ihrer Domain (z.B. api.YOURDOMAIN.com) und zeigen Sie in der Zielgruppe auf Ihre Instanz auf Port 80. Wenn Sie Ihr Ziel registrieren, können Sie die von uns oben erstellte Instanz auswählen. Wenn Sie mehrere EC2-Instanzen mit demselben Docker-Container laufen haben, wählen Sie zur besseren Lastverteilung so viele aus, wie Sie möchten. Schließlich verwenden wir Route53, um unsere Domains zu routen. Wir wollen zwei Domains:

1. eine, die der Benutzer aufrufen kann (z.B. YOURDOMAIN.com) und 2. eine für die eckige Anwendung zum Aufruf unseres Backends (z.B. api.YOURDOMAIN.com).

Tipp: Dieser Ansatz funktioniert auch über AWS-Konten hinweg, wenn die Domain auf einem anderen AWS-Konto registriert ist.

1. für die YOURDOMAIN.com: fügen Sie als Alias-Ziel den 'Domänennamen' aus der CloudFront-Distribution hinzu

2. für die api.YOURDOMAIN.com: Erstellen Sie einen A-Eintrag mit Alias und kopieren Sie in Alias target den DNS-Namen Ihres Elastic Load Balancers. Beachten Sie, dass der Begriff Dualstack vor dem Alias-Ziel hinzugefügt wird, um ip6 zu unterstützen.

Diese Einrichtung kann als eine Einführung in die AWS Services angesehen werden. Im Vergleich zu fortgeschritteneren Setups, wie z.B. der Verwendung von AWS ECS oder Kubernetes für die Zusammenstellung von Backend-Containern, ist es sehr einfach einzurichten. Allerdings würde der Großteil des auf Angular bezogenen Setups in jedem anderen Szenario gleich bleiben. Bei diesem Setup müssten Sie bei jeder Aktualisierung Ihrer Backend-Infrastruktur jedes Mal in Ihre Instanz(en) ssh, um Ihre Docker-Container zu ziehen und neu zu starten. Dies würde durch die Verwendung eines der erwähnten Docker-Kompositionswerkzeuge vereinfacht.