Headless CMS mit WordPress und NuxtJS – Die Anyline Story – Part I

Sie wollen wissen, wie ein größeres Projekt mit WordPress in Kombination mit NuxtJS als Headless CMS umgesetzt werden kann? Wir zeigen Ihnen unsere Learnings, welche Benefits es gibt und was vielleicht verbesserungsbedürftig ist.

In diesem Beitrag möchte ich kurz über die Architektur von einem unserer aktuellen Projekte berichten, welches gemeinsam mit Anyline und IBM abgestimmt und umgesetzt wurde.

Beim Anyline Projekt haben wir uns für eine Headless CMS Variante entschieden, da wir eine statisch generierte Website zur Verfügung zu stellen wollten.

Die Infrastruktur

Für die Infrastruktur verwenden wir die IBM Cloud. WordPress läuft auf einer VM, die auf Basis von best-practices konfiguriert wurde. Für das Frontend kommt ein Cloud Storage Bucket zum Einsatz, weil die gesamte Website auf statischen HTML-Seiten basiert und somit die einfachste Form des Hosting legitimiert. Diese Herangehensweise bringt deutliche Vorteile hinsichtlich Pagespeed und Skalierung mit sich.

Diese Architektur verleiht uns dazu auch die Möglichkeit, einfach und schnell zu skalieren:

Mit dieser Architektur haben wir nun auch die Möglichkeit, einfach und schnell zu skalieren: Buckets dazuschalten, Load-Balancer, CDNs aktivieren, Caching optimal ausnutzen und Co. sind allesamt effiziente Hebel für eine weitere Optimierungen.

Frontend - NuxtJS

Für die Umsetzung des Frontends fiel die Entscheidung auf NuxtJS, da dieses Framework die statische Ausspielung von Webseiten samt Unterseiten unterstützt. Für uns eine logische wie einfache Wahl, da wir uns seit einiger Zeit auf VueJS fokussieren.

Daten von WP zu NuxtJS

Die Verknüpfung von WordPress & NuxtJS erfolgt über die Rest-API, die regelmäßig mit Standard-Endpoint erweitert und angepasst wird. Mit dieser Herangehensweise können wir alle Seiten der Website schon im Vorhinein statisch generieren, indem wir eine Liste an URLS an NuxtJS übergeben. Genau für diesen Zweck haben wir einen eigenen API Endpunkt angelegt.

Neue Inhalte veröffentlichen

In der Produktivumgebung arbeiten wir mit Webhooks und unserer CI/CD Pipeline, um aktualisierte und neue Inhalte als statische HTML Seiten wieder auszuspielen. Sobald also die Redaktion Inhalte ändert, wird unser automatisierter Workflow gestartet, der wiederum die neuen, statisch generierten Seiten in die IBM Cloud deployed und somit die aktuellsten Inhalte zur Verfügung stehen.

Die untenstehende Grafik zeigt den Workflow in einer vereinfachten Form.

Fazit

Soweit so gut. Das Thema Headless ist aktueller denn je. Und auch mit Anyline steht bei uns ein Projekt in der Pipeline, welches in Sachen Umfang und Komplexität zeigt, dass noch vieles möglich ist.

In den nächsten Blogposts gehen wir auf die einzelnen Bereiche und Themen ein, die bei einem Headless Setup, v.a. in Kombination mit WordPress und NuxtJS, zu beachten sind.