Dokumentation AEM Tutorials zu AEM as a Cloud Service

Einrichten von AEM Edge-Funktionen in Edge Delivery Services

Letzte Aktualisierung: 25. Juni 2026

Gilt für:
Experience Manager as a Cloud Service

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 auf einer Edge Delivery Services-Site einrichten.

Dieses Tutorial behandelt das Onboarding von Edge Delivery-Sites in Cloud Manager, die CLI-Installation, die Projekteinrichtung mithilfe der Textvorlage, die CDN-Konfiguration und die Bereitstellung eines funktionierenden Endpunkts.

In diesem Tutorial wird das Frescopa Site Project als Demo-Site verwendet. Sie können die gleichen Schritte mit Ihrer eigenen Edge Delivery Services-Site 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 Edge Delivery-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. Anschließend stellen Sie edgeFunctions.yaml und cdn.yaml über die Edge Delivery-Konfigurations-Pipeline bereit, übertragen die AEM Edge-Funktion (JavaScript-Modul) an das Adobe CDN und überprüfen beide Endpunkte auf Ihrer Site-Domain (z. B. https://myfrescopa.enablementadobe.com/hello-world).

Die allgemeinen Schritte:

Integrieren Ihrer Edge Delivery-Site in Cloud Manager
Installieren von Adobe CLI und AEM Edge Functions-Plug-in
Einrichten von AEM Edge-Funktionen in Edge Delivery Services
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
Ein Edge Delivery Services-Add-on für Ihr Cloud Manager-Programm
Rolle des Bereitstellungs-Managers in Cloud Manager
Das Frescopa Site Project oder Ihr eigenes Edge Delivery Site-Projekt

NOTE

Edge Delivery Services unterstützt bis zu drei AEM Edge-Funktionen pro Programm die Entwicklungs-, Staging- und Produktions-Verzweigungen Ihrer Site(s) unterstützen sollen.

Schritt 1: Integrieren Sie Ihre Edge Delivery-Site in Cloud Manager

Bevor Sie AEM Edge-Funktionen einrichten, integrieren Sie Ihre Edge Delivery-Site in Cloud Manager. Dieser Schritt verwendet nur Cloud Manager und erfordert keine Adobe-CLI.

Wenn Ihre Site bereits integriert ist, überprüfen Sie, ob sie in Cloud Manager angezeigt wird, und fahren Sie mit Schritt 2 fort.

In den folgenden Schritten wird das Frescopa Site Project als Demostandort verwendet.

Melden Sie sich bei Cloud Manager an und öffnen Sie Ihr Programm mit einem Edge Delivery Services-Add-on. Bestätigen Sie in der Programmübersicht, dass die Registerkarte Edge Delivery angezeigt wird.
Vervollständigen Sie auf der Registerkarte 0}Edge Delivery die Aufgabenliste . Zu den wichtigsten Schritten gehören:
1. Edge Delivery-Site hinzufügen:
  - Site-Name: Frescopa
  - Edge Delivery-Herkunft: https://main--frescopa--sachinmali.aem.live/
  Das Format ist https://<branch>--<site-name>--<organization-name>.aem.live/, wobei <branch>, <site-name> und <organization-name> die Verzweigung, der Site-Name bzw. der Organisationsname des Edge Delivery Services-Site-Projekts sind.
  
  Idealerweise sollten Sie versuchen, die dev Verzweigung des Edge Delivery Services-Site-Projekts einzurichten. Unten finden Sie jedoch einen Screenshot für unsere Demo-Site.
2. Domain hinzufügen:
  - Domain-Name: myfrescopa.enablementadobe.com
  Sie müssen einen benutzerdefinierten Domain-Namen eingerichtet haben, um das AEM Edge Functions-Projekt bereitzustellen, selbst wenn Sie es auf einer Entwicklungs-Site versuchen, die der Entwicklungsverzweigung des Edge Delivery Services-Site-Projekts zugeordnet ist.
3. SSL-Zertifikat hinzufügen:
  - Zertifikatstyp: Kundenseitig verwaltet (OV/EV)
  - Zertifikatname: enablementadobe.com
  - Zertifikat: Der Inhalt der signierten Zertifikatdatei zwischen -----BEGIN CERTIFICATE----- und -----END CERTIFICATE-----
  - Privater Schlüssel: Der Inhalt der Datei mit dem privaten Schlüssel zwischen -----BEGIN PRIVATE KEY----- und -----END PRIVATE KEY-----
  - Zertifikatskette: Der Inhalt der Zertifikatkettendatei zwischen -----BEGIN CERTIFICATE----- und -----END CERTIFICATE-----
  Sie können auch ein in Adobe verwaltetes Zertifikat (DV) verwenden. Für das Tutorial verwenden wir ein kundenverwaltetes Zertifikat (OV/EV) als Beispiel.
4. DNS-Eintrag hinzufügen in Ihrem DNS-Hosting-Dienst für myfrescopa.enablementadobe.com.
5. Zuordnen der Domain myfrescopa.enablementadobe.com zum in Adobe verwalteten CDN.
Überprüfen Sie, ob die Site in der Edge Delivery Sites-Tabelle angezeigt wird. Die Demo-Frescopa-Website ist unter https://myfrescopa.enablementadobe.com/ erreichbar.

Eine vollständige Anleitung finden Sie unter Hinzufügen einer Edge Delivery-Site zu Cloud Manager.

Schritt 2: Installieren von CLI und Plug-ins

Installieren oder aktualisieren Sie die Adobe aio CLI und das AEM Edge Functions -Plug-in.

Neuinstallation

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

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`

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 erfolgreiche Installation des CLI und des AEM Edge-Funktions-Plug-ins wie folgt aussehen:

CLI-Versionsausgabe

Schritt 3: Einrichten der AEM Edge-Funktionen

Die AEM Edge-Funktionen müssen in der Edge Delivery Services-Site-Domain 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.

Um AEM Edge-Funktionen einzurichten, führen Sie den folgenden Befehl aus:

$ aio aem edge-functions setup

Wenn Sie noch nicht bei Adobe IMS angemeldet sind, verwenden Sie den Anmeldefluss für Trigger des Befehls . Im Setup-Prozess werden Sie aufgefordert, Details zum Programm, Site-Typ, zur Edge Delivery-Site und zur ADC-Projektkonfiguration anzugeben. Wählen Sie Edge Delivery Services als Website-Typ aus. 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

Beachten Sie, dass Setup die Frescopa Edge Delivery-Site mit der Domain-myfrescopa.enablementadobe.com verknüpft.

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. frescopa-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 Frescopa-Site-Projekt (oder Ihrem eigenen Site-Projekt) für Edge Delivery 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

Sehen Sie sich beispielsweise das Frescopa Edge Delivery-Site-Projekt und das Frescopa AEM Edge Functions-Projekt als Arbeitsbereich in der IDE an:

Frescopa Edge Delivery-Site-Projekt und Frescopa AEM Edge Functions-Projekt als Arbeitsbereich in 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 über die Edge Delivery-Konfigurations-Pipeline in Cloud Manager 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 frescopa-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. Überprüfen Sie sie und stellen Sie sie mithilfe der Edge Delivery-Konfigurations-Pipeline in Cloud Manager bereit.

Ü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. Beispiel:

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. Beispiel:

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.

Verwalten der CDN-Konfiguration

Stellen Sie die CDN-Konfiguration über die Cloud Manager-Konfigurations-Pipeline bereit. Stellen Sie zunächst die config/ Dateien aus Ihrem AEM Edge Functions-Projekt für Cloud Manager zur Verfügung. Es gibt zwei Optionen:

Adobe-Repository: Erstellen Sie ein neues Repository in Cloud Manager für Ihr Programm.
Privates Repository: Verknüpfen Sie Ihr bestehendes GitHub-Repository mit Cloud Manager.

In diesem Tutorial wird das Frescopa AEM Edge Functions -Projekt aus Schritt 4 als privates Repository verwendet.

Öffnen Sie in Cloud Manager Repositorys und wählen Sie Repository hinzufügen aus.
Wählen Dialogfeld „Repository hinzufügen die Option Privates Repository und geben Sie dann den Repository-Namen, die URL und den Typ an. Wählen Sie Speichern aus.
Führen Sie die Schritte im Dialogfeld Validierung des privaten Repository aus.
1. Cloud Manager Zugriff auf das Repository gewähren:
  
  Zugriff auf das
2. Speichern Sie das Validierungsgeheimnis in Ihrem AEM Edge Functions-Projekt-Repository:

Nach Abschluss der Validierung wird das private Repository in der Tabelle Repositorys angezeigt.

Bereitstellen der CDN-Konfiguration

Erstellen Sie eine Edge Delivery-Konfigurations-Pipeline in Cloud Manager und führen Sie sie aus.

Öffnen Sie auf der Seite Programmübersicht die Registerkarte Edge Delivery. Wählen unter "" die Option Edge Delivery-Pipeline hinzufügen aus.
Geben im Dialogfeld "Edge Delivery-Pipeline" einen Namen ein und wählen Sie Weiter.
Wählen Sie im Schritt Source das hinzugefügte private Repository, die main Verzweigung und /config als Code-Speicherort aus. Wählen Sie Speichern aus.
Führen Sie die Pipeline aus, indem Sie … neben dem Pipeline-Namen und dann Ausführen auswählen.

Bei erfolgreicher Ausführung werden die Dateien edgeFunctions.yaml und cdn.yaml in der Edge Delivery-Site-Domain bereitgestellt.

Überprüfen Sie, ob die CDN-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 frescopa-edge-functions

# Review to make sure you are deploying to the correct Edge Delivery Services site
$ 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 Teil des Produktprofils Cloud Manager Bereitstellungs-Manager} 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 Adobe Developer Console (ADC)-Projekt für API-Anmeldeinformationen. 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://myfrescopa.enablementadobe.com/hello-world
$ curl https://myfrescopa.enablementadobe.com/weather

Ersetzen Sie in Schritt 1 die Domain durch Ihre Edge Delivery-Site-Domain.

Die Antworten sehen beispielsweise wie der folgende Screenshot aus:

Live-Endpunktantworten

NOTE

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

Verwenden Sie in realen Szenarien AEM Edge-Funktionen für die Server-seitige Logik im CDN und rufen Sie sie über den JavaScript- Ihrer Site . Weitere Informationen zur Konfiguration finden Sie in der Produktdokumentation 🔗 AEM Edge-Funktionen .

Zusammenfassung

Sie haben die Frescopa Edge Delivery-Site zu Cloud Manager integriert, die CLI installiert, AEM Edge-Funktionen auf Edge Delivery Services eingerichtet, das Projekt lokal erstellt und ausgeführt, die CDN-Konfiguration bereitgestellt, die AEM Edge-Funktion erstellt und bereitgestellt und den Endpunkt überprüft.

Zusätzliche Ressourcen

recommendation-more-help

experience-manager-learn-help-cloud-service