DokumentationAEMAEM-TutorialsAEM Sites WKND-Tutorials

Bereitstellen mithilfe der Frontend-Pipeline

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Fortgeschrittener
  • Entwickler
  • Admin

In diesem Kapitel erstellen wir eine Frontend-Pipeline in Adobe Cloud Manager und führen sie aus. Es werden nur die Dateien aus dem ui.frontend-Modul erstellt und dann in AEM as a Cloud Service im integrierten CDN bereitgestellt. Dies ist ein Schritt weg von der /etc.clientlibs-basierten Bereitstellung von Frontend-Ressourcen.

Ziele objectives

  • Erstellen Sie eine Frontend-Pipeline und führen Sie sie aus.
  • Stellen Sie sicher, dass Frontend-Ressourcen NICHT von /etc.clientlibs, sondern von einem neuen Host-Namen bereitgestellt werden, der mit https://static- beginnt.

Verwenden der Frontend-Pipeline

https://video.tv.adobe.com/v/3409420?quality=12&learn=on

Voraussetzungen prerequisites

Dies ist ein mehrteiliges Tutorial, und es wird davon ausgegangen, dass Sie die Schritte, die in Aktualisieren des Standard-AEM-Projekts beschrieben werden, abgeschlossen haben.

Stellen Sie sicher, dass Sie die Berechtigungen zum Erstellen und Bereitstellen von Pipelines in Cloud Manager und Zugriff auf eine AEM as a Cloud Service-Umgebung haben.

Umbenennen einer vorhandenen Pipeline

Benennen Sie die vorhandene Pipeline von Bereitstellen für Entwicklung in Full-Stack-WKND-Bereitstellung für Entwicklung um, indem Sie auf der Registerkarte Konfiguration zum Feld Name der produktionsfremden Pipeline gehen. Dadurch soll direkt am Namen erkennbar sein, ob eine Pipeline Full-Stack oder Frontend ist.

Pipeline umbenennen

Überprüfen Sie auch auf der Registerkarte Quell-Code, ob die Feldwerte für Repository und Git-Verzweigung korrekt sind und die Verzweigung über die Änderungen an Ihrem Frontend-Pipeline-Vertrag verfügt.

Quell-Code-Konfigurations-Pipeline

Erstellen einer Frontend-Pipeline

Um NUR die Frontend-Ressourcen aus dem ui.frontend-Modul zu erstellen und bereitzustellen, führen Sie die folgenden Schritte aus:

  1. Klicken Sie in der Cloud Manager-Benutzeroberfläche im Abschnitt Pipelines auf Hinzufügen und wählen Sie Produktionsfremde Pipeline hinzufügen (bzw. Produktions-Pipeline hinzufügen) aus, je nach der AEM as a Cloud Service-Umgebung, für die Sie bereitstellen möchten.

  2. Wählen Sie im Dialog Produktionsfremde Pipeline hinzufügen als Teil der Schritte zur Konfiguration die Option Implementierungs-Pipeline aus, nennen Sie sie Frontend-WKND-Bereitstellung für Entwicklung und klicken Sie auf Weiter.

Erstellen von Frontend-Pipeline-Konfigurationen

  1. Wählen Sie als Teil der Quell-Code-Schritte die Option Frontend-Code aus und wählen Sie die Umgebung aus Mögliche Bereitstellungsumgebungen aus. Stellen Sie im Abschnitt Quell-Code sicher, dass die Feldwerte für Repository und Git-Verzweigung korrekt sind und der Zweig über die Änderungen an Ihrem Frontend-Pipeline-Vertrag verfügt.
    Und am wichtigsten ist, dass für das Feld Code-Speicherort der Wert /ui.frontend ist. Klicken Sie schließlich auf Speichern.

Erstellen des Quell-Codes für die Frontend-Pipeline

Bereitstellungssequenz

  • Führen Sie zuerst die neu benannte Pipeline Full-Stack-WKND-Bereitstellung für Entwicklung aus, um die WKND-ClientLib-Dateien aus dem AEM-Repository zu entfernen. Und vor allem sollten Sie AEM für den Frontend-Pipeline-Vertrag vorbereiten, indem Sie Sling-Konfigurationsdateien (SiteConfig, HtmlPageItemsConfig) hinzufügen.

Unformatierte WKND-Site

WARNING
Nach der Fertigstellung der Pipeline Full-Stack-WKND-Bereitstellung für Entwicklung haben Sie eine unformatierte WKND-Site, die defekt erscheinen kann. Bitte planen Sie einen Ausfall ein oder führen Sie die Bereitstellung in Nicht-Spitzenzeiten durch. Dies ist eine einmalige Unterbrechung, die Sie während des erstmaligen Wechsels von der Verwendung einer einzelnen Full-Stack-Pipeline zur Frontend-Pipeline einplanen müssen.
  • Führen Sie abschließend die Pipeline Frontend-WKND-Bereitstellung für Entwicklung aus, um nur das ui.frontend-Modul zu erstellen und die Frontend-Ressourcen direkt im CDN bereitzustellen.
IMPORTANT
Sie werden feststellen, dass die unformatierte WKND-Site wieder normal ist und die Ausführung der Frontend-Pipeline diesmal viel schneller ging als die der Full-Stack-Pipeline.

Überprüfen von Stiländerungen und neuem Bereistellungsparadigma

  • Öffnen Sie eine Seite der WKND-Site, und Sie können die Textfarbe sehen, die wir verwenden, das Adobe-Rot. Die Frontend-Ressourcen-Dateien (CSS, JS) werden vom CDN bereitgestellt. Der Host-Name der Ressourcenanforderung beginnt mit https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css, ebenso wie site.js oder alle anderen statischen Ressourcen, auf die Sie in der HtmlPageItemsConfig-Datei verwiesen haben.

Neu formatierte WKND-Site

TIP
Der $HASH_VALUE$ hier ist der gleiche wie der, den Sie im Feld INHALTSHASH der Pipeline Frontend-WKND-Bereitstellung für Entwicklung sehen. AEM wird über die CND-URL der Frontend-Ressource benachrichtigt und der Wert in /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content unter der Eigenschaft prefixPath gespeichert.

Hash-Wert-Korrelation

Herzlichen Glückwunsch! congratulations

Herzlichen Glückwunsch! Sie haben die Frontend-Pipeline erstellt, ausgeführt und überprüft, die nur das Modul „ui.frontend“ des WKND-Sites-Projekts erstellt und bereitstellt. Jetzt kann Ihr Frontend-Team schnell das Design und das Frontend-Verhalten der Site durchlaufen, außerhalb des Lebenszyklus des gesamten AEM-Projekts.

Nächste Schritte next-steps

Im nächsten Kapitel Überlegungen werden die Auswirkungen auf den Frontend- und den Backend-Entwicklungsprozess behandelt.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9