Ein Headless Content-Management-System selber zeigt noch keine Website. Ein Kubernetes-Cluster an sich liefert noch nichts aus. Erst das Zusammenspiel von Architektur, Code, Tools, Prozessen und Menschen ermöglicht es, dass eine Inhaltsanpassung im CMS eine Aktualisierung der statisch generierten Website auslöst. Dieses Zusammenspiel zeigen wir hier am Beispiel von EnergieSchweiz auf.
Dezidierte Cloud-Strategie
EnergieSchweiz setzt im Zuge des Web-Relaunchs bewusst auf Cloud-zentrierte Lösungen: Dies prägte die Entscheidung für Contentful als Headless CMS, Algolia als Such-Dienst und auf das von Begasoft betriebene Kubernetes-Cluster für die Auslieferung der Website. Ziel war die Entkopplung der Systeme sowie eine stabile und ausfallsichere Infrastruktur. Für die Entkopplung von Headless CMS und Auslieferung bieten sich Static-Site-Generatoren (kurz SSG) an:
Beim "Backen" der Website wird validiert, ob im Content alles, was das Frontend erwartet, auch vorhanden ist. Fehler im Content Model oder am Frontend können so schnell und ohne Auswirkungen auf die zuletzt "gebackene" Version erkannt und behoben werden.
Unterbrüche und Ausfälle von Systemen - ausser der Website selber - können minimiert werden, da der Content Teil der "Rezeptur" ist.
Die komplexe Logik für das Frontend kann auf allen Systemen (Lokal, DEV, UAT, PROD) getestet werden. Datenpakete für Testzwecke können problemlos zusammengestellt und versioniert werden und das Resultat kann zeitnah validiert werden.
Vernetzte Systemlandschaft
Der neue Webauftritt von EnergieSchweiz konnte zwar technologisch auf der "grünen" Wiese skizziert werden. Aber es mussten gewisse externe Systeme angebunden werden.
Algolia ist eine SaaS-Lösung für die intelligente Suche. Sie ermöglicht, den Inhalt spezifisch für die Suche zu strukturieren und durchsuchbar zu machen, wie es für den Webauftritt optimal ist.
Contentful dient als zentraler Content Hub für den Webauftritt von EnergieSchweiz. Die Autor:innen arbeiten ausschliesslich mit dem CMS. Externe Inhalte werden automatisch in Contentful importiert.
Die Publikationsdatenbank (Kurzform: Pub DB) ist die Schnittstelle für Publikationen des Bundesamtes für Energie. Ausgewählte Publikationen sind für EnergieSchweiz relevant und müssen sowohl automatisch als auch redaktionell verlinkt werden können.
Inhalte aus allen diesen Bausteinen werden zentral zusammengezogen, aufbereitet und möglichst schnell an den verwendeten Browser gesendet. Die folgende Grafik zeigt vereinfacht die von Anfang an bekannten Schnittstellen, deren Inhalte für Besucher:innen ausgeliefert werden.
Das Herzstück der Architektur
Für die Autor:innen von EnergieSchweiz ist das Headless CMS Contentful der zentrale Arbeitsort: Hier schleifen sie an Texten, laden optimales Bildmaterial, verknüpfen Inhalte und füllen Metadaten für SEO ab.
Aber aus architektonischer Sicht spielt die Musik an einem bis dato unscheinbaren Bereich: Der Continuos Integration and Continuos Delivery Pipeline, kurz CI/CD-Pipeline. Sie ist der Dreh- und Angelpunkt von Sourcecode, Content, Konfiguration für die einzelnen Umgebungen, definierten Prozessen und Menschen. Vereinfacht gesagt wird bei jeder Änderung eine neue Version der Website generiert, automatisch getestet und ausgerollt. Das folgende Bild zeigt eine stark vereinfachte Sicht auf das Zusammenspiel von Content- und Source Changes.
Als zentrales Tool für die Verwaltung von Source Code und Pipelines setzten wir Gitlab ein. Durch die Möglichkeit von Webhooks bei Contentful sowie durch automatisierte Triggers bei einer Änderung am Source Code wird eine neue Version auf die entsprechende Umgebung gebaut, getestet und automatisch ausgerollt.
CI/CD Pipeline – Die Kunst der Integration
Jedes klassische CMS brüstet sich mit Integrationsmöglichkeiten. Ein ursprünglich schlankes System wird durch Plugins oder Module oft zügig sehr gross. Mit jedem zusätzlichen Plugin oder Modul nimmt auch die Wartbarkeit ab.
Mithilfe von CI/CD-Pipelines entkoppeln wir die Integration externer Systeme und stellen die Datenqualität im CMS sicher. Dank diesem Ansatz können die einzelnen Tools eigenständig gewartet werden. Am besten lässt sich das an den folgenden Szenarien bei EnergieSchweiz beschreiben.
Szenario 1: Aktualisierung einer Publikation aus der PubDB
Ein automatisierter Job auf Gitlab extrahiert täglich die Liste der Publikationen inklusive erweiterten Metadaten wie beispielsweise den Downloadzahlen aus der Publikationsdatenbank. Die jeweiligen Publikationen werden dann automatisch in Contentful hinzugefügt oder aktualisiert. Falls beim Import ein Fehler auftritt, werden die zuständigen Personen informiert. Sie können sich den jeweiligen Einzelfall dank verständlichen Fehlermeldungen genau anschauen, die Ursache an der Datenquelle beheben und den Import manuell anstossen.
Anpassungen an der Schnittstelle, am Intervall oder Erweiterungen der Daten können dank dezidierter Pipeline und dezidierten Tooling-Anpassungen gemacht werden, ohne andere Teile des Webauftrittes zu beeinträchtigen. Das Ganze ist jeweils eigenständig testbar.
Zudem muss das Aktualisieren der Website nicht zusätzlich angestossen werden, da ein publizierter Content Change automatisch ein Aktualisieren der Website auslöst.
Szenario 2: Konsistente Daten in Suche und Anzeige
Das Grundsatzproblem jeder Suche liegt in der Konsistenz der aktuellen Anzeige und einem aktuellen Suchindex. Dabei müssen folgende Bedingungen betrachtet werden:
Nicht publizierter Inhalt darf nicht auffindbar sein.
Was auffindbar ist, muss angezeigt werden können.
Was angezeigt wird, muss gefunden werden können.
Obwohl Contentful eine Integration zu Algolia bietet, haben wir diese bewusst nicht eingesetzt, da sie den Index zu früh aktualisieren kann oder – und das wäre der schlimmste Fall – den Index mit Inhalten befüllt, welche nicht gebaut werden können.
Wir aktualisieren den Index bei Algolia während des "Backens" des Frontends. Sobald alle Seiten gebaut und somit auch automatisch getestet sind, ist die Website grundsätzlich bereit für ein Rollout. Direkt anschliessend wird der Index auf Algolia mit den identisch aufbereiteten Inhalten für die Website aktualisiert.
Dieser Ansatz minimiert das zeitliche Delta zwischen der Aktualisierung des Index als auch der Website auf ein verantwortbares Minimum.
Szenario 3: Eigenständige Microsites für dezidierte Kampagnen
Das Grundsetup ermöglicht, dezidierte Microsites für Kampagnen zu gestalten. Die Autor:innen können dafür sowohl vorhandenen Content beziehen als auch neuen Content erfassen. Dies alles, ohne an den Grundsätzen von Entkopplung, Wiederverwendbarkeit und Stabilität zu rütteln.
Dank dem Headless CMS von Contentful können weitere eigenständige Microsites aufgebaut werden, ohne dass Daten unnötig in fremde Systeme dupliziert werden müssen. Durch das Verwenden von Gatsby und React und den damit entwickelten Komponenten können wir vorhandene Komponenten wiederverwenden und für die Kampagnen gezielt anpassen.
Und als grosser Vorteil: Die Microsites validieren unser Datenmodell zusätzlich und zeigen dem Projektteam wie und wo wir das Content Model noch anpassen wollen. Wir sind nicht in der Struktur gefangen.
Die Architektur auf einen Blick
Aufgrund der erwähnten Szenarien sowie der sich bietenden Möglichkeiten hat sich folgende Systemarchitektur für EnergieSchweiz herauskristallisiert. Die folgende Abbildung zeigt vereinfacht die drei verschiedenen Gruppen von Benutzer:innen und wie sie mit dem Gesamtsystem interagieren, aus welchen Bestandteilen das Gesamtsystem besteht und welche Teile miteinander gekoppelt sind.
Contentful ist das eingesetzte Headless CMS. Die Autor:innen bewegen sich primär auf diesem System. Contentful ist über einen Webhook lose mit Gitlab gekoppelt.
Gitlab wird als Tool für die Verwaltung des Source Code und Tool für die diversen Build Pipelines (BP) verwendet.
Die Frontend BP baut die Website. Durch einen Trigger wird diese Build Pipeline gestartet. Die Pipeline prä-generiert die Website von EnergieSchweiz mittels Gatsby (SSG). Nach dem Abschluss der Generierung wird sowohl der Suchindex von Algolia aktualisiert als auch der Nginx Container gebaut. Anschliessend wird ein automatisches Deployment in die jeweilige Umgebung angestossen.
Der PubDB Importer (Szenario 1) bezieht täglich die Liste der Publikationen und aktualisiert die geänderten Inhalte direkt in Contentful.
Das Kubernetes Cluster wird von Begasoft betrieben. Die jeweiligen Deployment-Konfigurationen werden automatisch aktualisiert und die fertigen Container werden ausgerollt.
HTTP Requests von aussen (Die Welt) werden durch den K8s Ingress auf die richtigen Pods geleitet.
Damit die Pods von aussen (Die Welt) gefunden werden können, pflegt Begasoft DNS-Einträge auf dem eigenen DNS-Server.
Der Erfolgsfaktor: Ein gemeinsames Zielbild
Ein gutes Headless CMS gibt keine Vorgaben im Voraus an die Datenstruktur und die einzusetzenden Technologien. Es bietet viel mehr eine Plattform, um Inhalte und deren Zusammenhänge und Wiederverwendbarkeit zu diskutieren und zu definieren.
Die bei EnergieSchweiz eingesetzten Tools und Technologien tragen alle der Wiederverwendbarkeit Rechnung, und das Publizieren von Inhalten sowie von Code Changes ist Teil eines einheitlichen Prozesses.
Am Schluss zeigt sich, dass Kommunikation der Schlüssel zum Erfolg ist. Wenn alle Beteiligten sich verstehen und dasselbe Zielbild haben, kommt ein solches Projekt zum Erfolg.
Kontakt für Ihre digitale Lösung mit Unic
Termin buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Jörg Nölke und Gerrit Taaks (von links nach rechts).
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Melanie Klühe, Stefanie Berger, Stephan Handschin und Philippe Surber (im Uhrzeigersinn).
