Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Content Deployment (T3CMD24)

Avatar for Konrad Konrad
March 15, 2024

Content Deployment (T3CMD24)

Wie wir für das Deutsche Museum München die Inhalte von über 200 Medienstationen mit TYPO3 ausliefern

Avatar for Konrad

Konrad

March 15, 2024

More Decks by Konrad

Other Decks in Technology

Transcript

  1. © Copyright XIMA MEDIA 2024 „Wie wir für das Deutsche

    Museum München die Inhalte von über 200 Medienstationen mit TYPO3 ausliefern“
  2. 01 Projektüberblick 02 Anforderungen 03 04 Midlevel Agenda Lowlevel 05

    Highlevel 06 Weitere Bestandteile © Copyright XIMA MEDIA 2024
  3. © Copyright XIMA MEDIA 2024 Überblick • Komplettsanierung des Museums

    (2006-2028) • Erster Bauabschnitt mit 19 Ausstellungsbereichen • Neukonzeption der Ausstellungen & Medienstationen • TYPO3 als Redaktionssystem der Medienstationen gesetzt • Umsetzungszeitraum „Content Deployment“ 2020-2021 • Erste Teileröffnung des Umbaus Mitte 2022
  4. © Copyright XIMA MEDIA 2024 Überblick • Komplettsanierung des Museums

    (2006-2028) • Erster Bauabschnitt mit 19 Ausstellungsbereichen • Neukonzeption der Ausstellungen & Medienstationen • TYPO3 als Redaktionssystem der Medienstationen gesetzt • Umsetzungszeitraum „Content Deployment“ 2020-2021 • Erste Teileröffnung des Umbaus Mitte 2022 ein etwas anderes „Webprojekt“
  5. © Copyright XIMA MEDIA 2024 Medienstationen • Übersicht der Stationstypen

    • Infostation • Videostation • Audiostation • Spielstation • TOS (Taktiles Orientierungssystem)
  6. © Copyright XIMA MEDIA 2024 Medienstationen • Übersicht der Stationstypen

    • Infostation (168) • Videostation (83) • Audiostation • Spielstation • TOS (Taktiles Orientierungssystem)
  7. © Copyright XIMA MEDIA 2024 Grundlagen • Umsetzung des Redaktionssystems

    mit TYPO3 v10 • „Content Deployment“ • automatisierte Auslieferung der Inhalte auf die interaktiven Medienstationen in den Ausstellungsbereichen
  8. © Copyright XIMA MEDIA 2024 Grundlagen • Umsetzung des Redaktionssystems

    mit TYPO3 v10 • „Content Deployment“ • automatisierte Auslieferung der Inhalte auf die interaktiven Medienstationen in den Ausstellungsbereichen • Ausstellungen & Medienstationen als Seiten strukturiert
  9. © Copyright XIMA MEDIA 2024 Anforderungen • Webseiten OnePager •

    Mehrsprachigkeit • Offlinefähigkeit • Zielserver: • Raspberry Pi • Arduino • Shuttle PCs • Chromebrowser im Kioskmodus auf den Zielsystemen • tägliche Wartungsfenster (1h vor Museumsöffnung) • Automatisierte Auslieferung der Inhalte • „Keine Prüfung der ausgelieferten Webseite“
  10. © Copyright XIMA MEDIA 2024 Anforderungen • Webseiten OnePager •

    Mehrsprachigkeit • Offlinefähigkeit • Zielserver: • Raspberry Pi • Arduino • Shuttle PCs • Chromebrowser im Kioskmodus auf den Zielsystemen • tägliche Wartungsfenster (1h vor Museumsöffnung) • Automatisierte Auslieferung der Inhalte • „Keine Prüfung der ausgelieferten Webseite“
  11. © Copyright XIMA MEDIA 2024 Anforderungen • Webseiten OnePager •

    Mehrsprachigkeit • Offlinefähigkeit • Zielserver: • Raspberry Pi • Arduino • Shuttle PCs • Chromebrowser im Kioskmodus auf den Zielsystemen • tägliche Wartungsfenster (1h vor Museumsöffnung) • Automatisierte Auslieferung der Inhalte • „Keine Prüfung der ausgelieferten Webseite“ „Build“ „Deployment“
  12. © Copyright XIMA MEDIA 2024 Anforderungen • Webseiten OnePager •

    Mehrsprachigkeit • Offlinefähigkeit • Zielserver: • Raspberry Pi • Arduino • Shuttle PCs • Chromebrowser im Kioskmodus auf den Zielsystemen • tägliche Wartungsfenster (1h vor Museumsöffnung) • Automatisierte Auslieferung der Inhalte • „Keine Prüfung der ausgelieferten Webseite“ kein Webserver, statische Webseite „Build“ „Deployment“
  13. © Copyright XIMA MEDIA 2024 Infrastruktur … Internes Netz Ausstellung

    A Ausstellung B Ausstellung C Redaktionssystem
  14. © Copyright XIMA MEDIA 2024 Build „Wie generiere ich eine

    statische Kopie einer TYPO3 Seite?“
  15. © Copyright XIMA MEDIA 2024 Build „Wie generiere ich eine

    statische Kopie einer TYPO3 Seite?“ • Statische Kopie inklusive aller notwendigen Inhalte & Assets • HTML • CSS • JavaScript • Bilder • Videos • Erste Ideen + Recherche • Extension: Static File Cache • Extension: TYPO3-Static-Pub-Page-Export
  16. © Copyright XIMA MEDIA 2024 GNU Wget is a free

    utility for non-interactive download of files from the Web.
  17. © Copyright XIMA MEDIA 2024 Wget can follow links in

    HTML, XHTML, and CSS pages, to create local versions of remote web sites, fully recreating the directory structure of the original site. This is sometimes referred to as "recursive downloading." While doing that, Wget respects the Robot Exclusion Standard (/ robots.txt). Wget can be instructed to convert the links in downloaded files to point at the local files, for offline viewing.Quelle
  18. © Copyright XIMA MEDIA 2024 Wget can follow links in

    HTML, XHTML, and CSS pages, to create local versions of remote web sites, fully recreating the directory structure of the original site. This is sometimes referred to as "recursive downloading." While doing that, Wget respects the Robot Exclusion Standard (/ robots.txt). Wget can be instructed to convert the links in downloaded files to point at the local files, for offline viewing.Quelle
  19. © Copyright XIMA MEDIA 2024 Build • Kompromiss: CLI Tool

    außerhalb PHP Kontext • Konfiguration für die Nutzung: 'mirror', // Rekursion, unendliche Rekursionstiefe, behält Verzeichnisse, Zeitstempel 'force-html', // speichert Seiten als html 'convert-links', // konvertiert Links für lokale Anzeige 'adjust-extension', // speichert Dateiendung entsprechend des Content Types 'no-host-directories', // Domain nicht als Host Verzeichnis speichern 'no-check-certificate', // Zertifikate ignorieren 'execute robots=off', // robots.txt ignorieren 'force-directories', // behält Verzeichnisstruktur der Webseite bei 'page-requisites', // lädt Inline Assets mit herunter, zB Medien & Styles
  20. © Copyright XIMA MEDIA 2024 Build • Stolpersteine • für

    das rekursive Laden von Assets müssen die relativen Links in bestimmten html Tags (zB <script> oder <img>) bzw. in bestimmten Attributen (zB src oder href) zu finden sein, damit der Crawler die Dateien einsammelt • dynamisches Nachladen von Dateien nicht möglich (zB über eine data-src Attribut) • wget unterstützt kein JavaScript
  21. © Copyright XIMA MEDIA 2024 Build • Stolpersteine • für

    das rekursive Laden von Assets müssen die relativen Links in bestimmten html Tags (zB <script> oder <img>) bzw. in bestimmten Attributen (zB src oder href) zu finden sein, damit der Crawler die Dateien einsammelt • dynamisches Nachladen von Dateien nicht möglich (zB über eine data-src Attribut) • wget unterstützt kein JavaScript • Update: wget2 • modernere Alternative, die sich durch verbesserte Leistung und Unterstützung für neuere Webtechnologien auszeichnet, zB durch verbesserte Linkerkennung • allerdings zum damaligen Zeitpunkt noch pre-release • eigenständiges Kompilieren notwendig
  22. © Copyright XIMA MEDIA 2024 Deployment • rsync = beste

    Wahl im CLI Kontext • Vorteile: • Performance, Effizienz • Delta Kodierung • Flexibilität Konzept • Auslieferung des vorbereiteten Builds mit rsync auf das Zielsystem
  23. © Copyright XIMA MEDIA 2024 Überblick • strukturierte Ausführung der

    CLI Commands im PHP • Hintergrund: Verwaltung des Workflows im TYPO3
  24. © Copyright XIMA MEDIA 2024 Überblick • strukturierte Ausführung der

    CLI Commands im PHP • Hintergrund: Verwaltung des Workflows im TYPO3 Recherche • Evaluation von PHP Deploymenttool deployer • allerdings keine direkte Ausführung im PHP Kontext möglich
  25. © Copyright XIMA MEDIA 2024 Überblick • strukturierte Ausführung der

    CLI Commands im PHP • Hintergrund: Verwaltung des Workflows im TYPO3 Recherche • Evaluation von PHP Deploymenttool deployer • allerdings keine direkte Ausführung im PHP Kontext möglich Umsetzung • Umsetzung einer eigenen Logik für die Ausführung von Prozessen • Grundlage ist die Ausführung im Kontext der Medienstationen • -> Prozesse werden für die Seite ausgeführt
  26. © Copyright XIMA MEDIA 2024 Prozesse Konzept • ein Prozess

    umfasst beliebig viele Prozessschritte, welche sequentiell ausgeführt werden • bricht ein Prozess aufgrund eines Fehlers ab, wird ein Prozessschritt- spezifischer StatusCode + Fehlermeldung ausgegeben Step Step Step Process
  27. © Copyright XIMA MEDIA 2024 Prozesse Konfiguration • spezieller Prozess

    (zB PageBuildProcess) erbt vom AbstractProcess • Prozessschritte werden in initSteps() Funktion definiert public function initSteps() { /* * Build Static Site */ $buildPageStep = new ProcessStep( Configuration::MESSAGE_BUILD_FAILURE, DeploymentStatus::BUILD_FAILURE, new Wget($this->page) ); $this->addStep($buildPageStep); ... }
  28. © Copyright XIMA MEDIA 2024 Prozesse Ausführung • Instanziierung des

    Prozesses • Initialisierung mit konkreter Medienstation • Ausführung mittels Funktion run() $pageBuildProcess = GeneralUtility::makeInstance(PageBuildProcess::class); /** * @var $pageBuildProcess PageBuildProcess */ $pageBuildProcess->init($page); $result = $pageBuildProcess->run();
  29. © Copyright XIMA MEDIA 2024 Prozesse Weiteres • Sammeln der

    Prozessinformationen in gesondertem Log • Medienstationen werden mit Status geflaggt • je nach erfolgreicher/fehlgeschlagener Ausführung des letzten Prozesses • Prozessschritt nutzt • vorgefertigte Console Command Klassen (zB Wget, Rsync, Ssh) • Custom Callback als PHP Funktion
  30. © Copyright XIMA MEDIA 2024 Prozesse Weiteres • Sammeln der

    Prozessinformationen in gesondertem Log • Medienstationen werden mit Status geflaggt • je nach erfolgreicher/fehlgeschlagener Ausführung des letzten Prozesses • Prozessschritt nutzt • vorgefertigte Console Command Klassen (zB Wget, Rsync, Ssh) • Custom Callback als PHP Funktion Beispiel PageDeploymentProcess • ping: Erreichbarkeit der Station • rsync: Übertragung des Builds • ssh: Neustart des Browsers • …
  31. © Copyright XIMA MEDIA 2024 Verwaltung • Umsetzung im TYPO3

    Backend • eigenes Backendmodul für die Verwaltung der Medienstationen und des Workflows für die Auslieferung
  32. © Copyright XIMA MEDIA 2024 Verwaltung • Umsetzung im TYPO3

    Backend • eigenes Backendmodul für die Verwaltung der Medienstationen und des Workflows für die Auslieferung Überblick • aktuelle Meldungen, Überblick über Medienstation, Status der Stationen Medienstationen • Liste aller Medienstationen + diversen Informationen u.a. Status, letzter Build/ Deployment, • Actions für manuelle Ausführung von Prozessen • Anzeige der Stationen in Preview Modus Queue • Workflow für die automatisierte Auslieferung Log • Übersicht über Logeinträge der Prozesse
  33. © Copyright XIMA MEDIA 2024 Verwaltung • Umsetzung im TYPO3

    Backend • eigenes Backendmodul für die Verwaltung der Medienstationen und des Workflows für die Auslieferung Überblick • aktuelle Meldungen, Überblick über Medienstation, Status der Stationen Medienstationen • Liste aller Medienstationen + diversen Informationen u.a. Status, letzter Build/ Deployment, • Actions für manuelle Ausführung von Prozessen • Anzeige der Stationen in Preview Modus Queue • Workflow für die automatisierte Auslieferung Log • Übersicht über Logeinträge der Prozesse
  34. © Copyright XIMA MEDIA 2024 Verwaltung • Umsetzung im TYPO3

    Backend • eigenes Backendmodul für die Verwaltung der Medienstationen und des Workflows für die Auslieferung Überblick • aktuelle Meldungen, Überblick über Medienstation, Status der Stationen Medienstationen • Liste aller Medienstationen + diversen Informationen u.a. Status, letzter Build/ Deployment, • Actions für manuelle Ausführung von Prozessen • Anzeige der Stationen in Preview Modus Queue • Workflow für die automatisierte Auslieferung Log • Übersicht über Logeinträge der Prozesse
  35. © Copyright XIMA MEDIA 2024 Verwaltung • Umsetzung & Verwaltung

    im TYPO3 Backend • eigenes Backendmodul für die Verwaltung der Medienstationen und des Workflows für die Auslieferung Überblick • aktuelle Meldungen, Überblick über Medienstation, Status der Stationen Medienstationen • Liste aller Medienstationen + diversen Informationen u.a. Status, letzter Build/ Deployment, • Actions für manuelle Ausführung von Prozessen • Anzeige der Stationen in Preview Modus Queue • Workflow für die automatisierte Auslieferung Log • Übersicht über Logeinträge der Prozesse
  36. © Copyright XIMA MEDIA 2024 Workflow • Aktualisierungsworkflow der Medienstationen

    1. Bearbeitung der Medienstation durch die Redaktion 2. “Freigeben” der Station für die Auslieferung durch die Redaktion
  37. © Copyright XIMA MEDIA 2024 Workflow • Aktualisierungsworkflow der Medienstationen

    1. Bearbeitung der Medienstation durch die Redaktion 2. “Freigeben” der Station für die Auslieferung durch die Redaktion 3. Medienstation wird der „Build Queue“ hinzugefügt
  38. © Copyright XIMA MEDIA 2024 Workflow • Aktualisierungsworkflow der Medienstationen

    1. Bearbeitung der Medienstation durch die Redaktion 2. “Freigeben” der Station für die Auslieferung durch die Redaktion 3. Medienstation wird der „Build Queue“ hinzugefügt 4. Zeitfenster 1: Abarbeiten aller Build Prozesse innerhalb der Build Queue
  39. © Copyright XIMA MEDIA 2024 Workflow • Aktualisierungsworkflow der Medienstationen

    1. Bearbeitung der Medienstation durch die Redaktion 2. “Freigeben” der Station für die Auslieferung durch die Redaktion 3. Medienstation wird der „Build Queue“ hinzugefügt 4. Zeitfenster 1: Abarbeiten aller Build Prozesse innerhalb der Build Queue 5. Medienstation wird der „Deployment Queue“ hinzugefügt
  40. © Copyright XIMA MEDIA 2024 Workflow • Aktualisierungsworkflow der Medienstationen

    1. Bearbeitung der Medienstation durch die Redaktion 2. “Freigeben” der Station für die Auslieferung durch die Redaktion 3. Medienstation wird der „Build Queue“ hinzugefügt 4. Zeitfenster 1: Abarbeiten aller Build Prozesse innerhalb der Build Queue 5. Medienstation wird der „Deployment Queue“ hinzugefügt 6. Zeitfenster 2: Abarbeiten aller Deployment Prozesse innerhalb der Deployment Queue
  41. © Copyright XIMA MEDIA 2024 Workflow • Zeitfenstersteuerung über Scheduler

    • Automatische Retries für Prozessabarbeitung von fehlgeschlagenen Prozessen • Benachrichtigung über dauerhaft fehlgeschlagene Prozesse
  42. © Copyright XIMA MEDIA 2024 Content Deployment Lowlevel • Build

    -> wget • Deployment -> rsync Midlevel • PHP Prozesse mit sequentiellen Prozessschritten Highlevel • TYPO3 Backendmodul • Automatisierter Workflow mit Queues
  43. © Copyright XIMA MEDIA 2024 Weitere Bestandteile • andere Medienstationstypen,

    andere Prozesse • Audiostationen • TOS (Taktile Orientierungssystem) • Spielstationen • Ausblick: Content Deployment Extension -> Open Source
  44. © Copyright XIMA MEDIA 2024 Bildnachweise • Icon-Pack: Web design

    & development | Lineal (flaticon) • https:/ /unsplash.com/de/fotos/frau-in-weisser-kleidermalerei-84R6ipsqaxo • Abbildung: Architekten Schmidt-Schicketanz und Partner GmbH/3F Studio, Visualisierung: nuur.nu • https:/ /unsplash.com/de/fotos/braun-weisses-segelschiff-auf-seelackierung-TjegK_z-0j8 • https:/ /unsplash.com/de/fotos/mann-in-weissem-langarmhemd-fahrt-auf-schwarzem-motorrad-QCZH49w3TRs • https:/ /unsplash.com/de/fotos/braune-und-graue-baume-und-felsformationen-wKlHsooRVbg • https:/ /unsplash.com/de/fotos/frau-im-roten-kleid-sitzt-neben-frau-im-blauen-bikini-n8bts8tWfe4 • https:/ /unsplash.com/de/fotos/gruppe-von-leuten-sitzt-auf-brauner-holzbank-CfeRsl6jVGQ • https:/ /unsplash.com/de/fotos/menschen-am-strand-wahrend-des-tages-0GuL_hVwQHA • https:/ /unsplash.com/de/fotos/ein-gemalde-einer-stadtlandschaft-mit-vielen-farben-Iq11eskt5AQ