Unsere kleinen Helferlein: TYPO3 und CDN mit cdn_assets

In unserem Entwickleralltag haben wir es jeden Tag mit Webseiten zu tun, die jede Menge Besuche und damit auch jede Menge Traffic haben. Wie jeder andere Betreiber hochvolumiger Sites nutzen wir Content Delivery Networks (CDN), um statische Inhalte weltweit schnell verfügbar zu halten. Das entlastet unsere Webserver, denn diese müssen nur noch das CDN bedienen und nicht mehr die vielen Nutzer individuell.

Nutzung eines CDN durch TYPO3

Technisch funktioniert das, indem wir die von TYPO3 erzeugten URLs, die auf Bildinhalte, Medien, CSS oder JavaScript verweisen, so umbauen, dass sie nicht mehr auf unsere Server zeigen, sondern auf das CDN. Weder Redakteur noch Nutzer bekommen das im Idealfall mit. Die Redakteure müssen nur im Hinterkopf haben, dass ein CDN im Einsatz ist. Sie dürfen Bilddateien nicht mehr ändern, sondern nur noch unter neuem Namen veröffentlichen. Denn das CDN lädt diese nur ein einziges Mal vom Webserver und danach gewöhnlich nie wieder.

Dass alle diese sog. Assets pro Datei-URL nur ein einziges Mal geladen und dann gepuffert werden, ist aber nicht nur für die Redakteure ein Problem. Auch die Frontendentwickler müssen das beachten. Denn wenn der Entwickler z.B. eine CSS-Datei ändern möchte, würde das CDN immer noch die alte Version ausliefern.

Aktualisierung durch Versionierung

Die gängige Lösung lautet: Versionierung. Das lässt sich z.B. realisieren, indem man alle Assets, die der Entwickler liefert, beim Deployment unterhalb eines Versionspfades ausliefert. Anstatt /assets/css/layout.css  kann man so z.B. das CSS unterhalb von /assets/42/css/layout.css  ausliefern. Ändert der Entwickler jetzt z.B. ein CSS, zählt man die 42 einfach zur 43 hoch, usw. Nun hat sich die URL zum CSS geändert und repräsentiert somit eine neue Ressource. Da das CDN die neue URL noch nicht kennt, wird es die Datei daher wieder neu laden.

Wer mit CI-Systemen arbeitet, kann diesen Prozess sogar soweit automatisieren, dass das hinterher ohne Zusatzaufwand passiert. Dann wird im TypoScript durch das Deployment z.B. eine Konstante mit der erzeugten Version gesetzt und diese im Setup genutzt.

Die Versionierung von oben hat jedoch einen entscheidenden Nachteil, der sich bei umfangreichen Sites deutlich auswirkt: Jede Änderung an einer einzelnen Datei führt im Release zu einer neuen Version. Das gilt auch dann, wenn nur eine einzige Datei angepasst wurde. Es führt dazu, dass jeder Besucher alle Assets beim ersten Besuch erneut laden muss, weil sich die URLs ja alle geändert haben. Wer also oft released, ärgert damit insbesondere mobile Nutzer.

Versionierung im Frontend-Buildprozess

Wer (wie wir) Frontend-Build-Tools wie Webpack einsetzt, um CSS und JavaScript aus SCSS-Sourcen zu bauen und zu minifizieren, kennt auch hierfür eine gute Lösung: Statt einer Version für das gesamte Projekt, bekommt jetzt jede einzelne Datei ihre eigene. Am einfachsten geht das mit einem Hash über den Dateiinhalt. Das klingt plausibel, denn der ändert sich ja nur, wenn sich auch die Datei geändert hat. Anstelle der o.g. /assets/42/css/layout.css heißt die URL jetzt z.B. /assets/css/layout.566167d.css.

Damit ist das TYPO3-Frontend aktuell jedoch überfordert, denn man müsste jetzt im TypoScript des Seitentemplates beim Deployment an allen Ecken und Enden ständig die richtigen Dateinamen tauschen. TYPO3 selbst weiß nichts von Webpack und erwartet die fertigen Pfade zum CSS, um diese ausliefern zu können.

An dieser Stelle setzt die Extension cdn_assets an. Sie nutzt aus, dass Webpack auf Wunsch eine JSON-Datei, genannt Asset-Manifest, erzeugt, in der die Originaldateinamen den versionierten gegenüber gestellt werden. Der Integrator bzw. Entwickler braucht nur noch die Originaldateinamen im TypoScript zu benennen, anhand des Manifests kann cdn_assets die versionierten Pfade bestimmen und ausliefern. Außerdem ändert cdn_assets auf Wunsch die URL so, dass sie nicht mehr auf den TYPO3-Webserver, sondert auf das CDN zeigt. Damit liefert TYPO3 von vornherein die korrekten URLs aus.

Wie kann ich cdn_assets nutzen?

Die Extension ist primär über GitHub verfügbar und muss via Composer in eine bestehende TYPO3-Installation eingebunden werden. Voraussetzung ist TYPO3 8 – die aktuelle LTS-Version (Stand April 2018). Ohne Composer funktioniert es allerdings nicht.

Die Extension benötigt ein wenig TypoScript, um die URLs des verwendeten CDN zu kennen. Ein vollständiges Beispiel findet sich im Git-Repository:

Die Listen für die einzelnen Ressourcentypen (css/js/jsFooter) entsprechen denen aus dem PAGE-Objekt von TYPO3 und ersetzen diese. Genauso wie dort kann der Integrator über TypoScript-Conditions z.B. abhängig vom Teilbaum (Stichwort pidInRootline) zusätzliche Ressourcen laden, die er nicht auf der gesamten Seite benötigt.

Über enableCDN = 0 lässt sich die Extension auch auf das reine Ausliefern der versionierten Assets beschränken. Das ist insbesondere für denjenigen relevant, der zwar Webpack nutzen will, aber kein CDN verwendet.

Ausblick

Die aktuelle Version von cdn_assets unterstützt bislang nur die Integration von JS/CSS, also nur Header- und Footer-Ressourcen, die bislang z.B. über page.includeJS referenziert wurden. Geplant ist die Bereitstellung eines Sets von ViewHelpern, die das Mapping auf CDN-URLs auch in Fluid-Templates verfügbar machen. Damit kann man dann auch jedwede andere FAL-Ressource aus dem CDN ausliefern.

Bildquellen

Über Christian Spoo

Zwingt Soft- und Hardware gerne seinen Willen auf. Spricht fließend Meme und Picdump. Bei der Marketing Factory für die Bereiche Entwicklung und technische Konzeption zuständig.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.