DokumentationAEM as a Cloud ServiceBenutzerhandbuch

Aktivieren der Frontend-Pipeline enable-front-end-pipeline

Last update: Mon Mar 03 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Admin

Erfahren Sie, wie Sie die Frontend-Pipeline für vorhandene Sites aktivieren können, um Site-Designs zu nutzen und Ihre Site schneller anzupassen.

Überblick overview

Die Frontend-Pipeline ist ein Mechanismus, der schnell nur den Frontend-Code Ihrer Websites bereitstellt, basierend auf Site-Designs und Site-Vorlagen.

Diese Pipeline verarbeitet nur Frontend-Code, wodurch der Bereitstellungsprozess schneller ist als Full-Stack-Bereitstellungen. Dadurch können Frontend-Entwickelnde Ihre Site einfach anpassen, ohne Kenntnisse über AEM zu benötigen.

Sites, die auf Site-Vorlagen basieren, können standardmäßig die Frontend-Pipeline nutzen. In diesem Dokument wird beschrieben, wie Sie Ihre vorhandenen Sites anpassen können, um die Frontend-Pipeline nutzen zu können.

TIP
Wenn Sie mit der Frontend-Pipeline und der schnellen Bereitstellung von Sites mithilfe dieser Pipeline und von Site-Vorlagen nicht vertraut sind, gehen Sie die Tour zur schnellen Site-Erstellung durch, die Ihnen eine Einführung bietet.

AEM kann Ihre Site so konfigurieren, dass mit der Frontend-Pipeline bereitgestellte Designs geladen werden, selbst wenn Ihre Site nicht mit Site-Vorlagen und Designs erstellt wurde, indem sie diese auf vorhandenen Client-Bibliotheken ablegen.

Technische Details technical-details

Wenn Sie die Frontend-Pipeline für eine Site aktivieren, nimmt AEM die folgenden Änderungen an Ihrer Site-Struktur vor.

  • Alle Seiten der Site enthalten eine zusätzliche CSS- und JS-Datei, die durch die Bereitstellung von Aktualisierungen über eine dedizierte Cloud Manager-Frontend-Pipeline geändert werden kann.
  • Die hinzugefügten CSS- und JS-Dateien sind anfangs leer. Sie können jedoch einen Ordner „theme sources“ (Design-Quellen) herunterladen, um die notwendige Ordnerstruktur einzurichten, damit CSS- und JS-Code-Aktualisierungen über diese Pipeline bereitgestellt werden können.
  • Nur Entwickelnde können die Änderung rückgängig machen, indem sie die Knoten SiteConfig und HtmlPageItemsConfig löschen, die dieser Vorgang unter /conf/<site-name>/sling:configs erstellt.
NOTE
Durch diese Aktion werden die vorhandenen Client-Bibliotheken der Site nicht automatisch für die Verwendung der Frontend-Pipeline konvertiert. Das Verschieben dieser Quellen aus dem Client-Bibliotheksordner in den Frontend-Pipeline-Ordner ist eine Aufgabe, die von einem Frontend-Entwickler manuell durchgeführt werden muss.

Voraussetzungen requirements

AEM kann Ihre vorhandene Site automatisch an die Frontend-Pipeline anpassen. Um diesen Workflow auszuführen, muss Ihre Site v2 oder neuer der Seitenkomponente der Kernkomponenten verwenden.

Aktivieren der Frontend-Pipeline enabling

IMPORTANT
Wenn Sie die Frontend-Pipeline zur Entwicklung von Sites verwenden bzw. verwenden möchten, muss zuvor die Cloud Manager-IP-Zulassungsliste hinzugefügt werden.
Siehe Verwenden der Cloud Manager-IP-Zulassungsliste mit der Frontend-Pipeline.

Die Aktivierung Ihrer Site erfolgt über die Sites-Konsole unter Verwendung der Site-Leiste.

  1. Melden Sie sich bei AEM an und gehen Sie über Globale Navigation > Sites zu Ihrer Site.

  2. Wählen Sie Ihre Site in der Konsole aus. Wählen Sie den Stamm der Site aus, keine untergeordneten Seiten.

  3. Wenn Ihre Site ausgewählt ist, öffnen Sie die Leistenauswahl auf der linken Seite und wählen Sie Site.

  4. Klicken Sie in der Leiste Site auf die Schaltfläche Frontend-Pipeline aktivieren.

    Frontend-Pipeline aktivieren

  5. AEM fordert Sie zur Bestätigung auf, wobei Sie einen Überblick über die vorzunehmenden Änderungen erhalten. Bestätigen Sie dies, und Ihre Site wird angepasst.

Jetzt kann Ihre Site die Frontend-Pipeline verwenden. Weitere Informationen zur Frontend-Pipeline und zur Verwaltung Ihres Site-Designs finden Sie unter:

Frontend-Pipeline und benutzerdefinierte Domains custom-domains

Die Frontend-Pipeline kann mit der benutzerdefinierten Domain-Funktion von Cloud Manager verwendet werden. Beachten Sie jedoch die folgenden Anforderungen, wenn Sie beide Funktionen zusammen verwenden.

Statische Frontend-Dateien static-files

Statische Frontend-Assets, die über die Frontend-Pipeline bereitgestellt werden, werden standardmäßig über die vordefinierte statische Domain von Adobe bereitgestellt.

Wenn Sie eine benutzerdefinierte Domain für Frontend-Assets benötigen, können Sie eine benutzerdefinierte Domain auf der Veröffentlichungsebene installieren und den Dispatcher so konfigurieren, dass bestimmte Pfade (wie /static/) zum statischen Hosting-Speicherort von Adobe weitergeleitet werden. Für diese Methode müssen Ihre Dispatcher-Regeln aktualisiert werden, damit Anfragen für statische Assets ordnungsgemäß weitergeleitet und zwischengespeichert werden können.

Nachdem Sie Ihre benutzerdefinierte Domain und den Dispatcher konfiguriert haben, können Sie AEM so konfigurieren, dass Ihre Frontend-Assets von der statischen Domain bereitgestellt werden.

Konfiguration configuration

Wie im Abschnitt Technische Details beschrieben, werden beim Aktivieren der Funktion „Frontend-Pipeline“ für eine Site die Knoten SiteConfig und HtmlPageItemsConfig unter /conf/<site-name>/sling:configs erstellt.

Wenn Sie die Funktion „Benutzerdefinierte Domains“ von Cloud Manager zusammen mit der Frontend-Pipeline für Status-Assets für Ihre Site verwenden möchten, müssen zu diesen Knoten zusätzliche Eigenschaften hinzugefügt werden.

  1. Legen Sie die Eigenschaft customFrontendPrefix in SiteConfig für die Site fest.

    1. Navigieren Sie zu /conf/<site-name>/sling:configs/com.adobe.aem.wcm.site.manager.config.SiteConfig.
    2. Fügen Sie die Eigenschaft customFrontendPrefix = "https://your-custom-domain.com/static/" hinzu oder aktualisieren Sie sie.

  2. Dadurch wird der prefixPath-Wert der HtmlPageItemsConfig mit der benutzerdefinierten Domain aktualisiert.

    1. Navigieren Sie zu /conf/<site-name>/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig.

    2. Stellen Sie sicher, dass prefixPath Ihre benutzerdefinierte Domain wie etwa prefixPath = "https://your-custom-domain.com/static/<hash>/..." widerspiegelt.

    • Dieser Wert kann bei Bedarf auch manuell überschrieben werden.

  3. Überprüfen Sie Ihr Setup.

    1. Vergewissern Sie sich nach der Bereitstellung, dass die Seiten korrekt auf Design-Artefakte aus der benutzerdefinierten Domain verweisen.
    2. Öffnen Sie die Entwickler-Tools Ihres Browsers und überprüfen Sie die Dateipfade theme.css und theme.js, um sicherzustellen, dass sie von der richtigen Domain geladen werden.

Seiten für die Site verweisen dann auf Design-Artefakte aus dieser aktualisierten URL. Der Dispatcher leitet dann Anfragen für diese Ressourcen an die statische Domain weiter.

Best Practices für Frontend-Entwickelnde best-practices

Wenn Sie Frontend-Assets lokal entwickeln und testen müssen, bevor Sie sie über die Frontend-Pipeline bereitstellen, berücksichtigen Sie die folgenden Ansätze:

  • Verwenden Sie den Proxy-Modus des Site-Design-Builders, um Design-Artefakte lokal zum Testen zu überschreiben.
  • Stellen Sie Ihre Design-Dateien manuell über einen lokalen Entwicklungs-Server bereit und aktualisieren Sie prefixPath in HtmlPageItemsConfig in Übereinstimmung mit der lokalen Server-Adresse.
  • Stellen Sie sicher, dass das Browser-Caching während des Tests deaktiviert ist, um Live-Aktualisierungen anzuzeigen.

Weitere Informationen zur lokalen Frontend-Entwicklung finden Sie in der Dokumentation zum Site-Design-Builder.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab