Es ist äusserst einfach, eine Angular Web-Applikation auf der Google Cloud Platform (GCP) bereit zu stellen. Dazu müssen Sie im Root-Verzeichnis der Angular-Applikation ein app.yaml-File mit folgendem Inhalt erstellen (Pfade gemäss Ihrem Projekt/Applikation - allenfalls müssen Sie die Applikation zuerst mit ng build erstellen, um die Pfade der Distribution zu erhalten):
 |
| app.yaml-File Beispiel |
Wechseln Sie nun in der Konsole Ihrer Wahl ins Root-Verzeichnis der Angular-Applikation. Jetzt kann die Angular-Applikation mit folgendem Befehl in der GCP bereitgestellt werden:
 |
| gcloud CLI Befehl um eine Angular-Applikation in der GCP bereit zu stellen. |
Fertig. gcloud liefert die URL zurück mit welcher die Applikation aufgerufen werden kann.
Wenn Sie die Applikation das erste Mal bereitstellen, müssen Sie noch die gewünschte Region auswählen:
 |
| Printscreen einer erstmaligen Bereitstellung mit der Auswahl der Region (14) und der erhaltenen URL der Applikaton. |
Fallstrick base href
Internationalisierung ist wichtig und die meisten Angular-Applikationen sind mehrsprachig. Angular erstellt in der jeweiligen index.html pro Sprache beim base href einen Eintrag, bspw. "de". Dies führt dazu, dass die Applikation mit der Bereitstellung wie oben beschrieben nicht funktioniert, da die JavaScript-Dateien nicht gefunden werden. Stellen Sie sicher, dass bei der base href nur der Slash steht "/":
 |
| Beispiel eines index.html-Files mit base href="/" |
ESC-Explanation Web-Applikation
Im letzten Cloud Serie-Artikel habe ich vorgestellt, wie man mit ESC und GCP Cloud Function einfach einen Name-Matching Rest-API-Endpoint erstellen kann. Ich habe für die beiden dort erstellen Rest-API-Endpoints, Personennamen- und Organisationsnamen-Vergleich, eine einfache Beispiel-Angular Applikation erstellt und wie oben beschrieben auf der GCP bereitgestellt. Sie können diese Applikation hier live ausprobieren: https://webdevice.asderix.com/
 |
| Printscreen der Beispiel Angular 17 Web-Applikation |
Sie funktionierte jedoch erwartungsgemäss nicht direkt. Denn Cloud Functions und Apps haben in der GCP unterschiedliche Domains. Das führt dazu, dass der Browser die Aufrufe auf die Rest-API blockiert. Dies auf Grund der CORS (Cross-Origin Resource Sharing) Default-Einstellung der modernen Browser.
CORS-Problematik
Die von der GCP verwendete URL für die Applikation ist nicht geeignet für den produktiven Gebrauch, da sie nicht endkundenfreundlich ist. Zum Glück bietet der GCP Load Balancer gleich für beide Probleme die Lösung. Zum einen können Sie via Load Balancer eine eigene Domain für das Frontend verwenden, zum anderen können Sie auch gleich die Cloud Functions als Backend für den Load Balancer konfigurieren. Damit kann die Angular-Applikation für das Backend auf dieselbe Domain zugreifen und die CORS-Problematik besteht nicht mehr. Die Routing-Regeln sehen für meine Beispiel-Applikation wie folgt aus:
 |
| Load Balancer Routing-Regeln mit den ESC Cloud Functions. |
Eine detaillierte Anleitung von Google, wie Sie den Load Balancer mit einem Serverless Backend wie Cloud Function einrichten können, finden Sie hier: cloud.google.com/load-balancing.
Ein weiterer Vorteil des GCP Load Balancers ist der Caching-Mechanismus. Eine Angular Web-Applikation ist statisch und eignet sich daher gut für das Caching, was die Auslieferung zusätzlich beschleunigt.
Beachten Sie, dass wenn Sie ein TLS-Zertifikat von Google verwenden, dies in der Regel 10-15 Minuten dauert, aber auch mal mehrere Stunden dauern kann, bis es signiert vorhanden ist.
Tipps & Tools zur Angular-Applikation
Verwenden Sie für die Internationalisierung in Angular i18n von Beginn an. Das initiale einrichten dauert 10-15 Minuten. Wenn Sie eine Applikation später internationalisieren müssen, steigt der Aufwand, da alle Texte nachträglich für i18n vorbereitet werden müssen.
CSS kann für einen Entwickler mühsam sein. Ich kann für das Design einer Web-Applikation tailwindcss empfehlen. Die Integration/Nutzung mit Angular ist einfach: Dokumentation.
Für meine beiden Rest-APIs mittels Cloud Function gibt es keine OpenAPI-Spezifikation. Für solche Fälle kann quicktype sehr nützlich sein. Mit diesem Tool können Sie einfach anhand konkreter JSON ein TypeScript Interface für Angular erstellen lassen um einfach eine typisierte Abfrage des Backends zu machen. Das Tool kann auch mit JSON-Schema oder Postman als Ausgangspunkt umgehen.
Ordentlich formatierter Code verschafft Übersicht und hilft beim Lesen von "fremden" Code im Team. Prettier hilft Ihnen den eigenen Code und jenem im Team oder Unternehmen einheitlich zu formatieren. Prettier kann einfach in allen gängigen Code-Editoren integriert werden. Ich empfehle bei jedem Projekt gleich zu Beginn Prettier aufzusetzen.
Landingzone, Security & Co.
Die gemachten Aussagen zur Landingzone, automatisiertes Bereitstellen, Sicherheit etc. im letzten Cloud Serie-Artikel gelten auch für die Bereitstellung einer Angular-Applikation wie hier beschrieben. Falls noch nicht gelesen, lohnt es sich aus meiner Sicht, sich diese Aspekte einmal anzusehen.
