Dokumentation AEM Tutorials zu AEM as a Cloud Service

Einrichten von AEM Edge-Funktionen in AEM as a Cloud Service

Letzte Aktualisierung: 25. Juni 2026

Gilt für:
Experience Manager as a Cloud Service

Themen:
Developing

Erstellt für:

Intermediate
Admin
Developer

IMPORTANT

AEM Edge Functions befindet sich derzeit in der Beta-Phase. Funktionen und Dokumentation können sich ändern. Wenden Sie sich für Feedback an aemcs-edgecompute-feedback@adobe.com.

Erfahren Sie, wie Sie AEM Edge-Funktionen in der AEM as a Cloud Service-Umgebung einrichten.

Dieses Tutorial behandelt die CLI-Installation, die AEM-Site-Bereitstellung, die Projekteinrichtung über die Textvorlage, die CDN-Konfiguration und die Bereitstellung eines funktionierenden Endpunkts auf AEM as a Cloud Service.

In diesem Tutorial wird das WKND Sites-Projekt als Demo-Site verwendet. Sie können die gleichen Schritte mit Ihrer eigenen Site und Umgebung durchführen.

Was Sie bauen werden

AEM Edge-Funktionen sind JavaScript-Module, die am Edge im Adobe CDN ausgeführt werden und nicht in Ihrer AEM-Quelle. Sie stellen eine AEM Edge-Funktion mit dem Namen my-edge-function mit zwei Routen bereit:

/hello-world gibt eine Grußformel vom Edge zurück
/weather erkennt den Standort des Besuchers am Edge, ruft die Open-Meteo-API auf und gibt die aktuelle Temperatur für seine Stadt zurück

Während der Entwicklung testen Sie Ihre AEM Edge-Funktion lokal mit dem Dev-Server. Kopieren Sie dann die CDN-Konfiguration in Ihr AEM-Site-Projekt, stellen Sie sie über Cloud Manager oder eine RDE bereit, übertragen Sie die AEM Edge-Funktion (JavaScript-Modul) in das Adobe-CDN und überprüfen Sie beide Endpunkte in einem Browser oder mit curl.

Die allgemeinen Schritte:

Installieren von Adobe CLI und AEM Edge Functions-Plug-in
Bereitstellen der AEM-Site in einer RDE- oder Entwicklungsumgebung
Einrichten von AEM Edge-Funktionen in Ihrer AEM as a Cloud Service-Umgebung
Erstellen Sie das Projekt AEM Edge Functions aus der Textvorlage
Lokales Klonen, Überprüfen und Ausführen des AEM Edge Functions -Projekts
Überprüfen, Verwalten und Bereitstellen der CDN-Konfiguration
Erstellen und Bereitstellen von AEM Edge-Funktionen in Adobe CDN
Überprüfen, ob der Endpunkt funktioniert

Voraussetzungen

Stellen Sie vor dem Start sicher, dass Folgendes vorhanden ist.

Node.js und npm lokal installiert
Ein GitHub-Konto zum Erstellen eines Projekts aus der Textbausteinvorlage
Zugriff auf eine AEM as a Cloud Service-Umgebung mit der Rolle Cloud Manager Bereitstellungs-Manager oder dem Produktprofil AEM Administrator“ auf der Autoreninstanz
Das WKND Sites-Projekt oder Ihr eigenes AEM-Site-Projekt wurde lokal geklont

NOTE

Für AEM as a Cloud Service können Sie (AEM Edge-Funktion pro Umgebung).

Schritt 1: Installieren von CLI und Plug-ins

Installieren oder aktualisieren Sie die Adobe aio CLI, die AEM Edge-Funktionen und RDE-Plug-ins.

Neuinstallation

Führen Sie für eine Neuinstallation die folgenden Befehle aus:

code language-bash

code language-bash
`# Install the Adobe CLI $ npm install -g @adobe/aio-cli # Install the AEM Edge Functions plugin $ aio plugins install @adobe/aio-cli-plugin-aem-edge-functions # Install the RDE plugin if you are using an RDE environment $ aio plugins install @adobe/aio-cli-plugin-aem-rde`

# Install the Adobe CLI
$ npm install -g @adobe/aio-cli

# Install the AEM Edge Functions plugin
$ aio plugins install @adobe/aio-cli-plugin-aem-edge-functions

# Install the RDE plugin if you are using an RDE environment
$ aio plugins install @adobe/aio-cli-plugin-aem-rde

Vorhandenes aktualisieren

Aktualisieren Sie die Adobe-CLI und die installierten Plug-ins:

code language-bash
`# Update the Adobe CLI $ aio update # List installed plugins (confirm the AEM Edge Functions plugin is listed) $ aio plugins # Update the installed plugins $ aio plugins update`

Beispielsweise sollte die Ausgabe wie im folgenden Screenshot aussehen:

CLI-Versionsausgabe

Schritt 2: AEM-Site bereitstellen

Stellen Sie vor dem Einrichten von AEM Edge-Funktionen Ihre AEM-Site in einer Zielumgebung bereit. Wenn Ihre Site bereits bereitgestellt ist, überprüfen Sie, ob sie verfügbar ist, und fahren Sie mit Schritt 3 fort.

RDE

Führen Sie im Stammverzeichnis von WKND oder Ihrem eigenen Site-Projekt die folgenden Befehle aus, um die Site einzurichten und in der RDE bereitzustellen:

code language-bash

code language-bash
`# Set up the RDE $ aio aem:rde:setup # Build the site $ mvn clean install $ aio aem:rde:install all/target/aem-guides-wknd.all-X.Y.Z-SNAPSHOT.zip $ aio aem:rde:install dispatcher/target/aem-guides-wknd.dispatcher.cloud-X.Y.Z-SNAPSHOT.zip # Verify the RDE and site are deployed $ aio aem:rde:status`

# Set up the RDE
$ aio aem:rde:setup

# Build the site
$ mvn clean install
$ aio aem:rde:install all/target/aem-guides-wknd.all-X.Y.Z-SNAPSHOT.zip
$ aio aem:rde:install dispatcher/target/aem-guides-wknd.dispatcher.cloud-X.Y.Z-SNAPSHOT.zip

# Verify the RDE and site are deployed
$ aio aem:rde:status

Stellen Sie sicher, dass die Website unter https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/ zugänglich ist.

Eine vollständige Anleitung finden Sie unter Schnelle Entwicklungsumgebung.

Entwicklungsumgebung

Stellen Sie WKND oder Ihre eigene Site mithilfe der Full-Stack-Pipeline in Cloud Manager in der Entwicklungsumgebung bereit.
Stellen Sie sicher, dass die Website unter https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/ zugänglich ist.

Eine vollständige Anleitung finden Sie unter Full-Stack-Pipelines.

Schritt 3: Einrichten der AEM Edge-Funktionen in Ihrer Umgebung

Die AEM Edge-Funktionen müssen in der AEM as a Cloud Service-Umgebung eingerichtet werden. Damit können Sie Code- und Konfigurationsdateien in Adobe CDN bereitstellen, sodass Sie die von AEM Edge-Funktionen unterstützten Routen über JavaScript-Code in Ihrer Site aufrufen können.

Führen Sie den folgenden Befehl aus dem Stammverzeichnis des WKND-Projekts (oder Ihres eigenen AEM-Projekts) aus:

$ aio aem edge-functions setup

Wenn Sie noch nicht bei Adobe IMS angemeldet sind, verwenden Sie den Anmeldefluss für Trigger des Befehls . Der Einrichtungsprozess fordert Sie auf, Details zu Programm, Umgebung, Site-Typ und ADC-Projektkonfiguration anzugeben. Die Setup-Details werden in der .aio-Datei gespeichert. Sie liefert im Folgenden den Kontext für die AEM Edge Functions-CLI-Befehle.

Eingabeaufforderungen bei der Einrichtung von AEM Edge-Funktionen

IMPORTANT

Die Konfiguration des Adobe Developer Console (ADC)-Projekts für API-Anmeldeinformationen - das die API-Karte des AEM Content Delivery Network (CDN) enthält - wird nicht im Rahmen dieses Tutorials durchgeführt. Sie muss jedoch ausgeführt werden, wenn Sie die AEM Edge Functions -Projekte über Ihr CI/CD-System bereitstellen möchten. Weitere Informationen finden Sie unter {🔗}Adobe Developer ConsoleIntegration und /CD-Setup.

Verwenden Sie den folgenden Befehl, um die Setup-Details der AEM Edge-Funktionen zu überprüfen:

$ aio aem edge-functions info

Die Ausgabe sollte wie folgt aussehen:

Informationsausgabe zu AEM Edge-Funktionen

Schritt 4: Erstellen eines AEM Edge Functions-Projekts

Erstellen Sie das Projekt AEM Edge Functions aus der aem-edge-features-boilerplate GitHub-Vorlage. Das Textbaustein enthält die Dateien und Konfigurationen, die Sie für den Einstieg benötigen.

Navigieren Sie zu aem-edge-features-boilerplate auf GitHub.
Klicken Sie oben rechts auf Diese Vorlage verwenden > Neues Repository erstellen.
Geben Sie den Repository-Namen an (z. B. wknd-edge-functions), fügen Sie eine Beschreibung hinzu, legen Sie die Sichtbarkeit auf Privat fest und wählen Sie Repository erstellen.

Schritt 5: AEM Edge Functions-Projekt klonen, überprüfen und ausführen

Klonen Sie das Projekt AEM Edge Functions .

Klonen Sie das in Schritt 4 erstellte Repository und öffnen Sie es dann zusammen mit dem WKND-Projekt (oder Ihrem eigenen Projekt) in Ihrer IDE. Die meisten Editoren unterstützen Arbeitsbereiche oder Ansichten mit mehreren Stammansichten, sodass Sie in beiden Projekten gleichzeitig arbeiten können.

# Clone the repository
$ git clone https://github.com/<your-org>/<your-project-name>.git

Öffnen Sie beispielsweise das WKND Sites-Projekt und das WKND AEM Edge Functions-Projekt in einem einzigen IDE-Arbeitsbereich:

Sowohl WKND als auch WKND AEM Edge fungieren Projekte als Arbeitsbereich in der IDE

Überprüfen des Projekts AEM Edge-Funktionen

Bevor Sie Änderungen vornehmen oder das AEM Edge Functions -Projekt bereitstellen, überprüfen Sie die Schlüsseldateien, die den AEM Edge Functions -Vertrag definieren.

package.json enthält die Projektabhängigkeiten. Beachten Sie die @fastly/js-compute Abhängigkeit. Weitere Informationen finden Sie unter JavaScript auf der Compute-Plattform.

src/index.js ist der Einstiegspunkt für die Funktion und enthält die Hauptlogik für das Projekt. Es verwendet das addEventListener("fetch", ...) von Fastly Compute. Alle eingehenden Anfragen fließen durch die handleRequest-Funktion, bei der Sie eine Logik zum Routenabgleich hinzufügen. Beispielsweise stammt der folgende Code aus dem Textbaustein:

code language-js

code language-js
// src/index.js addEventListener("fetch", (event) => event.respondWith(handleRequest(event))); async function handleRequest(event) { const req = event.request; const url = new URL(req.url); let finalResponse; try { // Route matching logic if (url.pathname === "/" && req.method === "GET") { finalResponse = new Response("Hello World from the edge!", { status: 200 }); } else if (url.pathname === "/hello-world" && req.method === "GET") { finalResponse = new Response("Hello World from the edge!", { status: 200 }); } else if (url.pathname === "/weather" && req.method === "GET") { finalResponse = await weatherHandler(req, event.client); } else { finalResponse = response.notFound(); } } catch (err) { finalResponse = new Response("Internal Server Error", { status: 500 }); } return finalResponse; }

// src/index.js
addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));

async function handleRequest(event) {
    const req = event.request;
    const url = new URL(req.url);

    let finalResponse;

    try {
        // Route matching logic
        if (url.pathname === "/" && req.method === "GET") {
            finalResponse = new Response("Hello World from the edge!", { status: 200 });
        } else if (url.pathname === "/hello-world" && req.method === "GET") {
            finalResponse = new Response("Hello World from the edge!", { status: 200 });
        } else if (url.pathname === "/weather" && req.method === "GET") {
            finalResponse = await weatherHandler(req, event.client);
        } else {
            finalResponse = response.notFound();
        }
    } catch (err) {
        finalResponse = new Response("Internal Server Error", { status: 500 });
    }

    return finalResponse;
}

Eine einzige AEM Edge-Funktion kann mehrere Routen über die if in handleRequest verarbeiten.

fastly.toml konfiguriert den lokalen Entwicklungsserver. Weitere Informationen finden Sie in der Fastly.toml-Referenz.
config/ enthält die Konfigurationsdateien für den AEM Edge Function-Service und die CDN-Routing-Regeln. Stellen Sie diese Dateien mithilfe der Cloud Manager-Konfigurations-Pipeline in Ihrer AEM as a Cloud Service-Umgebung bereit. Schritt 6 deckt diesen Prozess ab.

Überprüfen Sie die verbleibenden Projektdateien wie test/, src/lib/ und README.md, um das vollständige Setup zu verstehen.

Lokales Ausführen des AEM Edge Functions-Projekts

Um schnell zu iterieren, können Sie das Projekt AEM Edge Functions lokal ausführen. Installieren Sie im Projektverzeichnis der AEM Edge-Funktionen die Abhängigkeiten und starten Sie den lokalen Entwicklungsserver:

# Navigate to the project directory (replace with your project name)
$ cd wknd-edge-functions

# Install dependencies
$ npm install

# Start the local development server
$ aio aem edge-functions serve

Der Server startet um http://127.0.0.1:7676.

Beispielsweise sollte die Ausgabe wie im folgenden Screenshot aussehen:

Serverausgabe für lokale Entwicklung

Schritt 6: Überprüfen und Bereitstellen der CDN-Konfiguration

Das Projekt AEM Edge Functions enthält CDN-Konfigurationsdateien im config/. Überprüfen Sie sie, bevor Sie sie in Ihr AEM-Site-Projekt kopieren.

Überprüfen der CDN-Konfiguration

Überprüfen Sie die CDN-Konfigurationsdateien im config/ des Projekts AEM Edge Functions .

config/edgeFunctions.yaml deklariert den AEM Edge Function-Dienst. Der folgende Code stammt beispielsweise aus dem WKND AEM Edge Functions -Projekt:

kind: "EdgeFunctions"
version: "1"
data:
  functions:
    - name: my-edge-function

Weitere Informationen zu unterstützten Eigenschaften finden Sie unter edgeFunctions.yaml-Referenz.

config/cdn.yaml deklariert die CDN-Routing-Regeln, die Traffic an den AEM Edge Function-Service leiten. Der folgende Code stammt beispielsweise aus dem WKND AEM Edge Functions -Projekt:

kind: 'CDN'
version: '1'
data:
  originSelectors:
    rules:
      - name: route-weather-to-edge-function
        when: { reqProperty: path, equals: "/weather" }
        action:
          type: selectAemOrigin
          originName: edgefunction-my-edge-function
          skipCache: true
      - name: route-hello-world-to-edge-function
        when: { reqProperty: path, equals: "/hello-world" }
        action:
          type: selectAemOrigin
          originName: edgefunction-my-edge-function
          skipCache: true

Wichtige -Aufrufe:

Der originName muss dem Muster edgefunction-<edge-function-name> folgen, wobei <edge-function-name> der Name der in edgeFunctions.yaml deklarierten AEM Edge-Funktion ist.
Die type muss selectAemOrigin sein.
Der skipCache ist auf true gesetzt, um den CDN-Cache für die Anfrage zu umgehen.

Weitere Informationen finden Sie unter Herkunftsselektoren. Beachten Sie, dass die cdn.yaml-Datei auch Traffic-Filterregeln, Anfrage- und Antworttransformationen und andere CDN-Funktionen unterstützt. Weitere Informationen finden Sie unter Konfigurieren von Traffic im CDN.

Verwalten der CDN-Konfiguration

Belassen Sie die gesamte CDN-Konfiguration im config/ Ihres AEM-Site-Projekts, da Ihre Site möglicherweise bereits WAF-Regeln, Traffic-Filter und andere Einstellungen in cdn.yaml enthält. Dadurch werden alle CDN-Konfigurationen an einem Ort gespeichert.

Kopieren Sie edgeFunctions.yaml aus dem AEM Edge Functions -Projekt in das config/ Verzeichnis AEM Site Project.
Zusammenführen des originSelectors Abschnitts aus dem cdn.yaml des AEM Edge-Funktionsprojekts mit dem cdn.yaml Ihres AEM Site-Projekts.

Beispielsweise sehen die CDN-Konfigurationsdateien im WKND-Site-Projekt wie folgt aus:

CDN-Konfigurationsdateien im WKND-Projekt

Bereitstellen der CDN-Konfiguration

Stellen Sie schließlich die CDN-Konfiguration in Ihrer AEM as a Cloud Service-Umgebung bereit.

RDE

Führen Sie für RDE-Umgebungen den folgenden Befehl aus dem Stammverzeichnis des WKND-Projekts (oder Ihres eigenen AEM-Projekts) aus:

code language-bash
`# Navigate to the AEM project directory (replace with your project name) $ cd aem-guides-wknd # Deploy the CDN configuration $ aio aem:rde:install -t env-config ./config`

Entwicklungsumgebung

Für Entwicklungsumgebungen übertragen Sie die Konfigurationsdateien und führen Sie die Konfigurations-Pipeline in Cloud Manager aus:

Übertragen Sie die Konfigurationsdateien in das Cloud Manager-Git-Repository und übertragen Sie sie.
Navigieren Sie Cloud Manager zu Pipelines“ und führen Sie die Konfigurations-Pipeline für Ihre Umgebung aus.

Ausführung der Cloud Manager-Konfigurations-Pipeline

Überprüfen Sie, ob die Konfiguration erfolgreich bereitgestellt wurde:

$ aio aem edge-functions list

In der Ausgabe sollte my-edge-function (oder der von Ihnen in edgeFunctions.yaml deklarierte Name) aufgeführt werden.

Ausgabe der Liste der AEM Edge-Funktionen

Schritt 7: Erstellen und Bereitstellen des AEM Edge Functions-Projekts

Erstellen Sie das AEM Edge Functions -Projekt und stellen Sie es mithilfe der folgenden Befehle bereit. Die Befehle verwenden den in der .aio gespeicherten Kontext.

# Navigate to the AEM Edge Functions project directory (replace with your project name)
$ cd wknd-edge-functions

# Review to make sure you are deploying to the correct AEM as a Cloud Service environment
$ aio aem edge-functions info

# Build the project
$ aio aem edge-functions build

# Deploy to Adobe CDN
$ aio aem edge-functions deploy my-edge-function

Der an deploy übergebene Name muss mit dem in config/edgeFunctions.yaml deklarierten name übereinstimmen. Außerdem müssen Sie in der Autoreninstanz Teil des Produktprofils AEM Administrator - Autor“ sein.

Beispielsweise sollte die Ausgabe wie im folgenden Screenshot aussehen:

AEM Edge-Funktionen erstellen und bereitstellen die Ausgabe

IMPORTANT

Um das AEM Edge Functions-Projekt über Ihr CI/CD-System bereitzustellen, benötigen Sie das Adobe Developer Console (ADC)-Projekt für API-Anmeldeinformationen, das die API-Karte des AEM Content Delivery Network (CDN) enthält. Weitere Informationen finden Sie unter {🔗}Adobe Developer ConsoleIntegration und /CD-Setup.

Schritt 8: Überprüfen des Endpunkts

Überprüfen der bereitgestellten Endpunkte in einem Browser oder mit cURL:

curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/hello-world
curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/weather

Ersetzen Sie pXXXXX und eYYYYY durch Ihre Cloud Manager-Programm- und Umgebungs-IDs.

Die Antworten sehen beispielsweise wie der folgende Screenshot aus:

Live-Endpunktantworten

NOTE

Die edgefunction-pXXXXX-eYYYYY-<edge-function-name>.adobeaemcloud.com Domain steht nur zum Debugging zur Verfügung und ist garantiert nicht stabil. In der Produktionsumgebung erreichen Anfragen über die CDN-Routing-Regeln in cdn.yaml die AEM Edge-Funktion der Domain Ihrer Site.

Verwenden Sie in realen Szenarien die AEM Edge-Funktionen für die Server-seitige Logik im CDN und rufen Sie sie von Ihrer Site über die in cdn.yaml definierten Routing-Pfade auf. Weitere Informationen zur Konfiguration finden Sie in der Produktdokumentation 🔗 AEM Edge-Funktionen .

Zusammenfassung

Sie haben AEM Edge-Funktionen in Ihrer AEM as a Cloud Service-Umgebung erfolgreich eingerichtet, ein Projekt aus der Textbausteinvorlage erstellt, geklont, die Projektdateien überprüft, lokal ausgeführt, die CDN-Konfiguration überprüft und bereitgestellt, das Projekt erstellt und bereitgestellt und den Endpunkt überprüft.

Zusätzliche Ressourcen

recommendation-more-help

experience-manager-learn-help-cloud-service