Erstellen eines dynamischen Edge Delivery Services-Bausteins mit einer AEM Edge-Funktion
Erfahren Sie, wie Sie eine AEM Edge-Funktion aus einem Edge Delivery Services Block aufrufen, damit der Block dynamische Daten einer Drittanbieter-API abrufen kann.
Edge Delivery Services wurde für hohe Geschwindigkeit entwickelt. Es generiert semantische HTML-Dokumente als Teil der Veröffentlichung, ohne Server-seitige Logik auf der Seite selbst, sodass ein Block keine dynamischen Daten wie Inventar oder Preise von einem Drittanbietersystem selbst abrufen kann. Das direkte Abrufen aus dem Browser ist eine Alternative, aber der Browser hat möglicherweise keine Benutzersitzung, mit der er sich authentifizieren kann, und jedes API-Token, das im Client-seitigen Code platziert wird, ist öffentlich.
Eine AEM Edge-Funktion löst dieses Problem. Sie wird im Adobe CDN ausgeführt, enthält die Anmeldeinformationen, ruft die Drittanbieter-API im Namen des Blocks auf und gibt nur die Daten zurück, die der Block benötigt.
Der logische Fluss sieht wie folgt aus:
Browser (block) → AEM Edge Function (holds credentials) → Third-party API
Was Sie bauen werden
In diesem Tutorial erstellen Sie einen durchgängigen Fluss, der einen Edge Delivery Services-Block mit einem AEM Edge Function-Endpunkt verbindet. Dieser ruft eine Drittanbieter-API auf und gibt dynamische Daten an den Block zurück.
Zu Demozwecken wird das Frescopa Site Project als Edge Delivery Services-Site verwendet. Sie entwickeln einen Estimated Delivery Checker-Block, der eine AEM Edge-Funktion aufruft, um die Produktverfügbarkeit und den Versandzeitpunkt zu überprüfen. Der -Block wird im universellen Editor erstellt und der Endpunkt "AEM Edge Function“ wird in einem separaten Projekt entwickelt. Der Block ruft den Endpunkt auf, der zwei Upstream-APIs aufruft (in diesem Tutorial simuliert) und eine kombinierte Antwort an den Block zurückgibt.
Sie können die gleichen Schritte für dynamische Daten auf Ihrer eigenen Edge Delivery Services-Site ausführen und dabei Ihren eigenen Block und den Funktionscode von AEM Edge austauschen.
Die allgemeinen Schritte lauten wie folgt:
- Entwickeln der AEM Edge-Funktion: Implementieren Sie einen Handler, der zwei Upstream-Aufrufe zu einer Antwort kombiniert, CORS für die lokale Entwicklung aktiviert und den Endpunkt lokal testet.
- Entwickeln des Edge Delivery Services-Blocks: Strukturieren Sie das JSON-Modell, JavaScript und CSS des Blocks aus und erstellen Sie es im universellen Editor.
- Verbinden des Blocks mit der AEM Edge-Funktion: Aufrufen des lokalen Endpunkts der AEM Edge-Funktion aus dem Block, Wechseln zu einem relativen Pfad nach der Bereitstellung und Behandeln des Lade- und Fehlerstatus.
- Bereitstellen und Überprüfen: Zusammenführungscode, Bereitstellen der AEM Edge-Funktion und Veröffentlichen der Edge Delivery Services-Siteseite und Bestätigen, dass der Block Live-Daten vom bereitgestellten Endpunkt in Ihrer Sitedomäne rendert.
Voraussetzungen
Um dieses Tutorial abzuschließen, stellen Sie sicher, dass Sie Folgendes abgeschlossen haben:
- Einrichten von AEM Edge-Funktionen auf Edge Delivery Services: Ein AEM Edge-Funktionen-Projekt wird lokal geklont, wobei die Adobe-CLI installiert ist und der lokale Dev-Server für die Entwicklung Ihrer AEM Edge-Funktionen ausgeführt wird.
- Entwickler-Tutorial für Edge Delivery Services und den universellen Editor: Vertrautheit mit Erstellen eines Blocks und Erstellen eines Blocks Konzepten und einem lokalen Dev-Server, der für die Blockentwicklung Ihrer Edge Delivery Services-Site ausgeführt wird.
Lokale Entwickler bereitgestellt
Vor der Entwicklung müssen Sie die Unterschiede zwischen der lokalen Entwicklung und einer bereitgestellten Umgebung verstehen. In der folgenden Tabelle sind die Unterschiede aufgeführt:
http://127.0.0.1:7676/api/frescopa/estimated-delivery/api/frescopa/estimated-deliverycdn.yaml) leitet den Pfad an die AEM Edge-Funktionsinstanz weiter.aio aem edge-functions serveCORS-Handhabung
Sehen wir uns die Unterschiede bei der CORS-Behandlung zwischen lokaler Entwicklung und einer bereitgestellten Umgebung an.
- Lokales Gerät: Der lokale Edge Delivery Services-Dev-Server wird auf Port 3000 ausgeführt, der lokale Dev-Server der AEM-Edge-Funktion wird auf Port 7676 ausgeführt. Zwei verschiedene Ursprünge und Ports, sodass die AEM Edge-Funktion CORS-Header zurückgeben muss oder der Browser die Antwort blockiert.
- Bereitgestellt: Nach der Bereitstellung leitet das CDN den relativen Pfad zur AEM Edge-Funktion auf derselben Domain wie die Site weiter, sodass dort keine CORS-Handhabung erforderlich ist.
Sie implementieren die CORS-Header im AEM Edge Function Handler. Der JavaScript des Blocks wählt dann je nach Umgebung den relativen oder absoluten Pfad aus.
Referenzimplementierung
Ein vollständiges, funktionierendes Beispiel stützt jeden Schritt in diesem Tutorial. Verwenden Sie die unten stehenden Unterschiede, um Ihre eigene Implementierung damit zu vergleichen, oder um direkt zum Code zu springen, ohne jeden Schritt zu befolgen.
- Änderungen der AEM Edge-Funktion: Die vollständige Differenz für die Route, den Handler, die Upstream-Aufrufmocks und den CORS-Helper relativ zur
maindes Textbausteins. - Änderungen am Edge Delivery Services-Block: Die vollständige Differenz für das JSON-Modell, JavaScript und CSS des Blocks relativ zur
mainder Frescopa-Site. - Live-Vorschau: Der Checker-Block „Geschätzter Versand“, der durchgehend auf der Demo-Site von Frescopa ausgeführt wird, wobei die AEM Edge-Funktion bereitgestellt wird und Live-Anfragen beantwortet.
Nächste Schritte
Beginnen Sie mit Entwickeln der AEM Edge-Funktion, da der Edge Delivery Services-Block einen Endpunkt benötigt, der aufgerufen werden kann, bevor er eine Verbindung herstellen kann.