Einleitung

In der dynamischen Welt der Cloud-Technologien sind Entwickler und IT-Experten kontinuierlich mit der Herausforderung konfrontiert, effiziente und skalierbare Lösungen zu entwerfen. Die Google Cloud Platform bietet eine robuste Plattform für derartige Lösungen, wobei der Deployment-Prozess jedoch komplex sein kann. An dieser Stelle setzt Pulumi an – ein modernes Infrastructure-as-Code-Tool, das eine Verbindung zwischen der Codebasis und der Cloud-Infrastruktur herstellt. In diesem Artikel erkunden wir das Deployment einer statischen Webseite in der Google Cloud mit einem Svelte-Frontend und demonstrieren, wie Pulumi diesen Prozess vereinfacht und optimiert.

Nachdem wir das Thema kurz eingeführt haben, widmen wir uns einer detaillierten Betrachtung der Schlüsseltechnologien dieses Artikels: Google Cloud und Pulumi. Diese Plattformen spielen eine zentrale Rolle in der Architektur und dem Management moderner Cloud-Infrastrukturen. Ein umfassendes Verständnis dieser Technologien ist essenziell, um die Komplexität und das Potenzial von Cloud-Deployments zu verstehen. Im nächsten Abschnitt beleuchten wir die Hauptmerkmale und die Bedeutung dieser Technologien im Kontext der Cloud-Infrastruktur-Deployments.

Google Cloud Platform

Die Google Cloud Platform (GCP) hat sich neben Amazon Web Services (AWS) und Microsoft Azure als zentraler Akteur im Bereich der Cloud-Dienstleistungen etabliert und ist damit einer der drei marktführenden Anbieter. GCP bietet ein breites Portfolio an Diensten und Lösungen, die speziell auf die Anforderungen von Unternehmen zugeschnitten sind, die nach skalierbaren und effizienten Cloud-basierten Infrastrukturen suchen. Neben den grundlegenden Angeboten für Hosting und Datenverarbeitung umfasst GCP auch innovative Technologien wie BigQuery für Big Data-Analysen, Google Kubernetes Engine (GKE) für die Container-Orchestrierung und fortschrittliche KI- sowie Machine-Learning-Dienste, die Entwicklern und Unternehmen die Entwicklung intelligenter Lösungen ermöglichen.

Ein weiteres herausragendes Merkmal der GCP ist ihre Fähigkeit zur Skalierung, die es Unternehmen ermöglicht, sich dynamisch an verändernde Nachfragen anzupassen, ohne in physische Hardware investieren zu müssen. GCP unterstützt Unternehmen nicht nur dabei, ihre Kosten durch flexible Preisoptionen zu optimieren, sondern bietet auch langfristige Verträge an, die Rabatte gewähren und zur Kosteneffizienz beitragen. Die globale Infrastruktur der GCP mit einem weitreichenden Netzwerk von Rechenzentren garantiert außerdem hohe Verfügbarkeit und Leistung.

Pulumi

Pulumi präsentiert sich als ein fortschrittliches und vielseitiges Werkzeug für Infrastructure as Code (IaC), welches ein außergewöhnliches Maß an Flexibilität in der Gestaltung von Cloud-Infrastrukturen bietet. Ein wesentliches Merkmal von Pulumi ist seine Fähigkeit, Infrastrukturkonfigurationen nicht nur über das klassische YAML-Format zu implementieren, sondern auch durch die Unterstützung einer Vielzahl moderner Programmiersprachen. Diese umfassen:

• TypeScript
• Python
• Go
• C#
• Java
• JavaScript

Diese sprachliche Vielfalt ermöglicht es Entwicklern, die Infrastruktur in einer ihnen vertrauten Programmierumgebung zu definieren und zu verwalten, was die Einstiegshürden enorm senkt und im Gegenzug die Produktivität steigert.

Darüber hinaus erleichtert Pulumi nahtlose Multi-Cloud Deployments, was es zu einem äußerst flexiblen Werkzeug für den Einsatz über verschiedene Cloud-Plattformen und Technologien hinweg macht. Ganz gleich, ob es sich um Google Cloud Platform, Amazon Web Services, Microsoft Azure, Kubernetes oder andere Cloud-Dienste handelt, Pulumi bietet eine kohärente und effiziente Methode zur Verwaltung von Infrastrukturen über diverse Ökosysteme hinweg. Diese Fähigkeit zur Multi-Cloud-Verwaltung ist besonders wertvoll in heterogenen Cloud-Umgebungen, in denen Unternehmen auf mehrere Cloud-Provider setzen.

Svelte

Nachdem wir uns einen Überblick über die Technologien Google Cloud und Pulumi verschafft haben, widmen wir uns nun einer kurzen Einführung in das JavaScript-Framework Svelte. Für Einsteiger in die Webentwicklung oder solche, die bereits Erfahrungen mit verschiedenen JavaScript-Frameworks gesammelt haben, bietet Svelte eine erfrischende Perspektive zu den gängigen Alternativen.

Im Vergleich zu anderen Frameworks wie React oder Angular zeichnet sich Svelte durch einen signifikanten Unterschied aus: Während Frameworks wie React und Angular eine zusätzliche Abstraktionsebene über das Web legen und intensive Berechnungen im Browser erfordern, verlagert Svelte diese Last in den Build-Schritt. Dieser Ansatz sorgt dafür, dass Svelte-Anwendungen schneller laufen, da der Code bereits zur Build-Zeit in effizientes Vanilla-JavaScript umgewandelt wird. Das Ergebnis sind direkte DOM-Aktualisierungen, die zu schnelleren und effizienteren Webanwendungen führen.

Ein besonders ansprechender Aspekt von Svelte, insbesondere für Webentwicklungsneulinge, ist die steile Lernkurve und die benutzerfreundliche Gestaltung. Sveltes Syntax ist klar und minimalistisch, was das Lernen und Verstehen erleichtert. Diese Einfachheit beeinträchtigt jedoch nicht die Leistungsfähigkeit oder Flexibilität des Frameworks, sodass auch komplexe Anwendungen ohne große Mühe entwickelt werden können. In der weiteren Auseinandersetzung mit Svelte werden wir herausfinden, warum es sowohl für Einsteiger als auch für erfahrene Entwickler eine hervorragende Alternative darstellt. Ein detaillierterer Beitrag zu Svelte folgt in Kürze, um tiefer in das Thema einzutauchen.

Insgesamt bietet Svelte eine effiziente und leicht verständliche Plattform für den Einstieg in die Webentwicklung. Durch die Kombination aus einfacher Syntax, effizienter Kompilierung und reduziertem Boilerplate-Aufwand eignet es sich hervorragend sowohl zum schnellen Lernen als auch zur Entwicklung leistungsstarker Webanwendungen.

Vorbereitung erforderlicher Technologien

Für ein reibungsloses Setup unserer Entwicklungsumgebung benötigen wir eine bestimmte Reihe an Software. Folgend findest du eine Liste mit der erforderlichen Software, welche installiert und eingerichtet sein muss, damit wir mit der Entwicklung beginnen können. Für diesen Artikel wurde das Betriebssystem MacOS verwendet. Die Quellen zu alternativen Betriebssystemen sind bei jeder Software verlinkt, sodass die Einrichtung problemlos nachgeschlagen und durchgeführt werden kann.

• Node.js
• Pulumi CLI
• Google Cloud SDK
• Svelte oder eine andere Frontend Technologie

Beginnen wir nun mit der Installation der aufgelisteten Technologien. Als erstes installieren wir Node.js, was im weiteren Verlauf auch für die Einrichtung des Svelte Frontends verwendet wird.

brew install node

Nachdem node.js nun auf unserem System vorhanden ist, müssen wir unser Infrastructure-as-Code-Tool Pulumi installieren:

brew install pulumi/tap/pulumi

Im Anschluss an die Installation müssen wir uns entweder bei der Pulumi Cloud registrieren und später in der CLI anmelden. Dadurch haben wir auch gewisse Vorteile gegenüber selbst verwalteten Deployments wie z.B. eine Deployment-Historie oder den Schutz vor Konflikten bei Pulumi-Deployments, sofern mit mehreren Personen an einem Projekt entwickelt wird. Im folgenden Code-Snippet sind die jeweiligen Loginmethoden für die lokale Variante und die der Cloud-basierten Lösung aufgelistet:

# Lokal verwaltete Deployments
pulumi login --local

# Cloud-verwaltete Deployments
pulumi login

Abschließend muss noch die Einrichtung für die Google Cloud abgeschlossen werden. Dafür kann man sich hier für das gewünschte Setup entscheiden. Alternativ kann man das GCP-Setup unter MacOS wie folgt durchführen:

brew install --cask google-cloud-sdk

Nachdem die oben genannten Technologien eingerichtet sind schauen, wir uns im nächsten Abschnitt an, wie man ein beispielhaftes Svelte-Projekt anlegen kann, das für unsere statische Website im GCP-Bucket genutzt werden soll.

Erstellen eines Svelte-Basisprojekts

Für die Entwicklung einer statischen Website mit Svelte, die über die Google Cloud bereitgestellt wird, ist nun der nächste Schritt, das Frontend zu erstellen, das für das Deployment genutzt wird. Hierfür ist zunächst die Einrichtung eines Verzeichnisses notwendig, in dem unser Svelte-Projekt abgelegt wird. Dazu öffnen wir die Kommandozeile und navigieren zum gewünschten Verzeichnis, in dem das Svelte-Projekt aufgesetzt werden soll. Im ausgewählten Verzeichnis wird dann der folgende Befehl ausgeführt:

npm init svelte@latest my-new-application

Nachdem man die kommenden Schritte im Anschluss der Kommandoausführung durchgeführt hat sollte man ein Verzeichnis mit dem Namen my-new-application innerhalb des aktuellen Verzeichnisses sehen können. Der Screenshot unten zeigt die Ausführung des oben gelisteten Befehls zum Erstellen des Svelte Projekts:

Schauen wir uns nun das bereitgestellte Frontend einmal an, indem wir die folgenden Befehle ausführen:


cd my-new-application<br>npm install<br>npm run dev -- --open


Nachdem die genannten Befehle ausgeführt wurden, müssen wir unser Svelte Projekt noch dahingehend konfigurieren, dass wir eine statische Website erzeugen können. Als erstes fügen wir mithilfe von npm noch eine Dependency hinzu, die dazu benötigt wird.‍

npm i -D @sveltejs/adapter-static@latest

Nun müssen wir die Inhalte aus dem Inhalt aus der svelte.config (linkes Code Snippet) mit dem Code aus dem rechten Code Snippet austauschen. Diese Änderungen sind erforderlich, da wir den adapter-auto durch den adapter-static ersetzen müssen, um die Generierung der statischen Webseite zu ermöglichen. Zusätzlich haben wir die Konfiguration des statischen Adapters präzisiert, um spezifische Anpassungen vorzunehmen, wie etwa die Festlegung des Speicherorts für unsere generierten Dateien.

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter()
  }
};
export default config;									
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: [vitePreprocess({})],
  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: undefined,
      precompress: false,
      strict: true
    })
  }
};

export default config;

‍Außerdem benötigen wir im Verzeichnis src/routes/ eine +layout.js Datei mit den folgenden Inhalten, damit wir unsere statische Website erzeugen können:
// if you want to generate a static html file<br>// for your page.<br>// Documentation: https://kit.svelte.dev/docs/page-options#prerender<br>export const prerender = true;<br>// if you want to Generate a SPA<br>// you have to set ssr to false.<br>// This is not the case (so set as true or comment the line)<br>// Documentation: https://kit.svelte.dev/docs/page-options#ssr<br>export const ssr = true;<br>// How to manage the trailing slashes in the URLs<br>// the URL for about page will be /about with 'ignore' (default)<br>// the URL for about page will be /about/ with 'always'<br>// https://kit.svelte.dev/docs/page-options#trailingslash<br>export const trailingSlash = 'ignore';


Im Anschluss an die vorherigen Schritte können wir nun unsere statische Website mithilfe von npm bauen und für das kommende Pulumi-Deployment in die Google Cloud verwenden. Hierfür muss abschließend der folgende Befehl ausgeführt werden:‍

npm run build

‍Sofern der Build-Befehl erfolgreich war, befinden sich die erzeugten Ressourcen nun unter dem Verzeichnis /build.

Erstellen eines Google Cloud Projekts

Jetzt werfen wir einen Blick auf die Google Cloud Plattform und schauen uns an, wie man hier ein Projekt anlegt, damit ein anschließendes Deployment unserer statischen Webseite über Pulumi möglich ist. Hierfür rufen wir nun zuallererst die Google Cloud Console auf. Sofern man nicht bereits registriert ist, muss man die Registrierung hier vorerst einmal durchführen.

Im Anschluss kann man wie folgt ein Projekt erstellen.

1. Klicke auf Projekt auswählen

2. Klicke auf NEUES PROJEKT

3. Gib "gcp-deployment-mit-pulumi" ein

4. Klicke auf ERSTELLEN

Wähle nun über den obigen Weg (Menüpunkt "Projekt auswählen") das eben erstellte Projekt aus.

Pulumi Deployment

Nach der Erstellung des GCP-Projekts folgt nun eine detaillierte Anleitung für die Konfiguration von Pulumi und das damit verbundene Deployment in die Google Cloud. Als erstes stellen wir die Authentifizierung zur Google Cloud sicher, indem wir in der Kommandozeile folgendes ausführen:

gcloud auth application-default login

Nachdem der Befehl ausgeführt wurde, öffnet sich der Browser mit der Aufforderung, die Google-Authentifizierung abzuschließen. Bestätige alle Nachfragen und vertraue der Google Auth Library.

Nach einer erfolgreichen Authentifizierung kann mit der Entwicklung des Pulumi-Codes begonnen werden. Pulumi bietet eine sehr gute Auswahl an vorgefertigten Templates, die sich flexibel an persönliche Bedürfnisse und Anforderungen anpassen lassen. Speziell für den Anwendungsfall einer statischen Webseite in der Google Cloud gibt es bereits ein Deployment-Template, welches frei verwendet werden kann. Hier muss man lediglich spezifische Anpassungen für das eigene Frontend vornehmen. Indem wir den Anleitungen des verlinkten Deployment-Templates für eine statische Website folgen, gelangen wir zum gewünschten Ergebnis: Unser Svelte-Frontend wird über eine generierte URL im Browser zugänglich. Im kommenden Abschnitt werden die einzelnen Schritte aus dem Template detailliert erläutert.

Der folgende Screenshot zeigt das Setup über das Pulumi Template Schritt für Schritt. Wichtig ist hierbei, dass das Verzeichnis in dem das Kommando ausgeführt wird, leer ist. In dieser Konfiguration wurden ausschließlich die vorgeschlagenen Default-Werte verwendet. Lediglich “gcp:project” wird mit der GCP-Projekt-ID belegt, welche wir aus dem erstellten GCP-Projekt entnehmen können. Wichtig ist, dass wirklich die ID des Projekts verwendet wird und nicht der Name, da diese beiden Werte voneinander abweichen können. Zur Veranschaulichung kann man im nächsten Screenshot einmal sehen, wo der Wert zu sehen ist, welcher verwendet werden soll.

Abschließend müssen wir den Build-Ordner, der im Abschnitt der Svelte-Einführung erzeugt wurde, in das Verzeichnis /www des Pulumi Projekts kopieren und das Deployment starten.

pulumi up

Nachdem man yes ausgewählt und mit Enter bestätigt hat, wird der Deployment-Prozess sehr wahrscheinlich fehlschlagen; es sei denn, man hat bereits eine erweiterte Konfiguration für die GCP abgeschlossen. In der Regel passiert bei einem neuen Account und Projekt folgendes:

Das Problem, das durch die Fehlermeldung aufgezeigt wird, kann einfach behoben werden, indem man in der Google Cloud Console zu Compute-Engine und dann zu VM-Instanzen navigiert. Dort lässt sich der Service, wie in der Fehlermeldung angegeben, aktivieren, woraufhin das Deployment erneut durchgeführt werden kann. Bevor wir diesen Schritt jedoch umsetzen, ist außerdem eine kleine Anpassung in unserem Pulumi-Projekt notwendig, die insbesondere die Pfadangaben der Dateien betrifft.

Unsere static Website wurde in einem frisch erzeugten Google Account getestet und zusätzlich in einem Google Account, der sich in einer Organisation befindet. Falls bei dem Deployment in einer Organisation beispielsweise der folgende Fehler auftritt, muss man lediglich unter "IAM & Admin" -> Organization Policies die Policy mit dem Namen "Domain restricted sharing" auf "Google-managed default" setzen. Folgend ist der entstandene Fehler zu sehen:

In der Datei index.ts unseres Pulumi-Projekts sind die Speicherorte der Dateien wie z.B. index.htmlund error.htmldefiniert. Die Standardkonfiguration verweist im Bucket auf das Verzeichnis ./www. Aufgrund der Struktur unseres Frontends muss dieser Pfad jedoch zu ./www/buildgeändert werden, da sich hier die relevanten Dateien unseres Svelte-Projekts befinden. Diese Anpassung sorgt dafür, dass Pulumi die korrekten Dateien für das Deployment findet und verwendet.

Zusätzlich müssen die Konfigurationsdateien pulumi.dev.yamlund pulumi.yamlaktualisiert werden, da die index.htmlund error.html im Verzeichnis /build zu finden sind. Nachdem diese Anpassungen vorgenommen wurden, führen wir pulumi up in der Konsole aus und bestätigen mit yes, um das Deployment zu starten.

Wenn alles erfolgreich verläuft, sollte das Deployment abgeschlossen sein und das Ergebnis ist ein über eine generierte URL erreichbares Svelte-Frontend. Die Anpassungen an den Dateipfaden und die Aktivierung des erforderlichen Services in der Google Cloud Console gewährleisten, dass das Deployment reibungslos durchgeführt wird und die statische Website wie erwartet verfügbar ist.

Zusammenfassung und Abschluss

Abschließend kann man sagen, dass mit Pulumi eine starke Technologie zur Verfügung steht, die es einem ermöglicht, die unterschiedlichsten Infrastrukturen aufzusetzen - und das in verschiedenen Programmiersprachen. Die Kombination mit der Google Cloud Platform ist im Fall einer statischen Webseite sehr angenehm, da es hier bereits ein gutes Template zur Anwendung gibt, welches nur ein paar wenige Anpassungen benötigt. Der einzige negative Aspekt bei Google Deployments mit Pulumi ist, dass man Services erst aktivieren muss, bevor diese deployed werden dürfen. Denkbar wäre ein Deployment ohne Aktivierung über ein Berechtigungskonzept, wie man es auch von anderen Anbietern kennt.

Zusammenfassend kann man sagen, dass ein Deployment in die Google Cloud via Pulumi eine erfrischende Alternative zu bekannten Lösungen wie z.B. AWS mit CDK ist.