Documentation AEM Tutoriels d’AEM as a Cloud Service

Configurer les fonctions AEM Edge sur Edge Delivery Services

Dernière mise à jour : 24 juillet 2026

S'applique à :
Experience Manager as a Cloud Service

Créé pour :

Intermediate
Admin
Developer

IMPORTANT

AEM Edge Functions est actuellement en version bêta. Les fonctionnalités et la documentation peuvent changer. Pour tout commentaire, contactez 🔗.

Découvrez comment configurer les fonctions AEM Edge sur un site Edge Delivery Services.

Ce tutoriel aborde l’intégration au site Edge Delivery dans Cloud Manager, l’installation de l’interface de ligne de commande, la configuration de projet à partir du modèle standard, la configuration du réseau CDN et le déploiement d’un point d’entrée opérationnel.

Ce tutoriel utilise le projet de site Frescopa comme site de démonstration. Vous pouvez suivre les mêmes étapes avec votre propre site Edge Delivery Services.

Ce que vous allez créer

Les fonctions AEM Edge sont des modules JavaScript qui s’exécutent sur le réseau CDN Adobe en périphérie, et non sur votre origine Edge Delivery. Vous déployez une fonction AEM Edge nommée my-edge-function avec deux itinéraires :

/hello-world renvoie un message d’accueil du Edge
/weather détecte la position du visiteur à la périphérie, appelle l’API Open-Meteo et renvoie la température actuelle de sa ville

Pendant le développement, vous testez localement la fonction AEM Edge avec le serveur de développement. Ensuite, vous déployez edgeFunctions.yaml et cdn.yaml via le pipeline de configuration d’Edge Delivery, poussez la fonction AEM Edge (module JavaScript) vers le réseau CDN Adobe et vérifiez les deux points d’entrée sur le domaine de votre site (par exemple, https://myfrescopa.enablementadobe.com/hello-world).

Étapes de haut niveau :

Intégration de votre site Edge Delivery à Cloud Manager
Installation de l’interface de ligne de commande Adobe et du plug-in AEM Edge Functions
Configurer les fonctions AEM Edge sur Edge Delivery Services
Créez le projet Fonctions AEM Edge à partir du modèle standard
Clonez, vérifiez et exécutez le projet Fonctions AEM Edge localement
Examiner, gérer et déployer la configuration du réseau CDN
Créer et déployer des fonctions AEM Edge sur le réseau CDN Adobe
Vérifiez que le point d’entrée fonctionne

Prérequis

Assurez-vous que les éléments suivants sont en place avant de commencer.

Node.js et npm installés localement
Un compte GitHub pour créer un projet à partir du modèle standard
Module complémentaire Edge Delivery Services pour votre programme Cloud Manager
Rôle de responsable de déploiement dans Cloud Manager
Le Projet de site Frescopa ou votre propre projet de site Edge Delivery

NOTE

Edge Delivery Services prend en charge jusqu’à trois fonctions AEM Edge par programme, destinées à prendre en charge les branches de développement, d’évaluation et de production de votre ou vos sites.

Étape 1 : intégration de votre site Edge Delivery à Cloud Manager

Avant de configurer les fonctions AEM Edge, intégrez votre site Edge Delivery dans Cloud Manager. Cette étape utilise Cloud Manager uniquement et ne nécessite pas l’interface de ligne de commande Adobe.

Si votre site a déjà été intégré, vérifiez qu’il apparaît dans Cloud Manager et passez à l’étape 2.

Les étapes suivantes utilisent le projet de site Frescopa comme site de démonstration.

Connectez-vous à 🔗 et ouvrez votre programme à l’aide d’un module complémentaire Edge Delivery Services. Dans la présentation du programme, vérifiez que l’onglet est visible.
Dans l’onglet , complétez la liste de tâches Edge Delivery. Les étapes clés sont les suivantes :
1. Ajouter un site Edge Delivery :
  - Nom du site : Frescopa
  - origine Edge Delivery : https://main--frescopa--sachinmali.aem.live/
  Le format est https://<branch>--<site-name>--<organization-name>.aem.live/ où <branch>, <site-name> et <organization-name> sont respectivement la branche, le nom du site et le nom de l’organisation du projet de site Edge Delivery Services.
  
  Idéalement, vous devez essayer de configurer la branche dev du projet de site Edge Delivery Services. Cependant, reportez-vous à la capture d’écran ci-dessous pour notre site de démonstration.
2. Ajouter un domaine :
  - Nom de domaine : myfrescopa.enablementadobe.com
  Vous devez disposer d’un nom de domaine personnalisé configuré pour déployer le projet Fonctions AEM Edge même si vous essayez sur un site de développement mappé à la branche de développement du projet de site Edge Delivery Services.
3. Ajouter un certificat SSL :
  - Type de certificat : géré par le client (OV/EV)
  - Nom du certificat : enablementadobe.com
  - Certificat : contenu du fichier de certificat signé entre -----BEGIN CERTIFICATE----- et -----END CERTIFICATE-----
  - Clé privée : contenu du fichier de clé privée entre -----BEGIN PRIVATE KEY----- et -----END PRIVATE KEY-----
  - Chaîne de certificats : contenu du fichier de la chaîne de certificats entre -----BEGIN CERTIFICATE----- et -----END CERTIFICATE-----
  Vous pouvez également utiliser un certificat géré par Adobe (DV). Pour les besoins du tutoriel, nous utilisons un certificat géré par le client (OV/EV) à titre d’exemple.
4. Ajoutez un enregistrement DNS dans votre service d’hébergement DNS pour myfrescopa.enablementadobe.com.
5. Mappez le domaine myfrescopa.enablementadobe.com au réseau CDN géré par Adobe.
Vérifiez que le site apparaît dans le tableau Edge Delivery Sites . Le site Frescopa de démonstration est accessible à l’adresse 🔗.

Pour une présentation complète, voir Ajout d’un site Edge Delivery à Cloud Manager.

Étape 2 : installation de l’interface de ligne de commande et des modules externes

Installez ou mettez à jour l’aio Adobe CLI et le plug-in AEM Edge Functions .

Nouvelle installation

Pour une nouvelle installation, exécutez les commandes suivantes :

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`

Mettre à jour existant

Mettez à jour l’interface de ligne de commande Adobe et les modules externes installés :

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`

Par exemple, l’installation réussie de l’interface de ligne de commande et du plug-in des fonctions AEM Edge doit se présenter comme suit :

sortie de la version de l’interface de ligne de commande

Étape 3 : Configurer les fonctions AEM Edge

Les fonctions AEM Edge doivent être configurées sur le domaine du site Edge Delivery Services. Il vous permet de déployer le code et les fichiers de configuration sur le réseau CDN Adobe afin que vous puissiez appeler les itinéraires pris en charge par les fonctions AEM Edge à partir du code JavaScript de votre site.

Pour configurer les fonctions AEM Edge, exécutez la commande suivante :

$ aio aem edge-functions setup

Si vous n’êtes pas déjà connecté à Adobe IMS, la commande déclenche le flux de connexion. Le processus de configuration demande les détails du programme, du type de site, du site Edge Delivery et de la configuration du projet ADC. Sélectionnez comme type de site. Les détails de configuration sont stockés dans le fichier .aio. Il fournit le contexte des commandes de l’interface de ligne de commande des fonctions d’AEM Edge ci-après.

Invites de configuration des fonctions AEM Edge

Notez que la configuration associe le site Frescopa Edge Delivery au myfrescopa.enablementadobe.com de domaine.

IMPORTANT

La configuration du projet Adobe Developer Console (ADC) pour les informations d’identification d’API, qui inclut la carte d’API du réseau de diffusion de contenu (CDN) AEM, n’est pas effectuée dans le cadre de ce tutoriel. Cependant, cela doit être effectué lorsque vous souhaitez déployer les projets Fonctions AEM Edge à partir de votre système CI/CD. Voir Intégration de et Configuration de CI/CD pour plus d’informations.

Utilisez la commande suivante pour consulter les détails de configuration des fonctions AEM Edge :

$ aio aem edge-functions info

La sortie doit se présenter comme suit :

Sortie d'informations sur les fonctions AEM Edge

Étape 4 : créer un projet de fonctions AEM Edge

Créez le projet Fonctions AEM Edge à partir du modèle GitHub aem-edge-functions-boilerplate . Le modèle comprend les fichiers et la configuration dont vous avez besoin pour commencer.

Accédez à aem-edge-functions-boilerplate sur GitHub.
Dans le coin supérieur droit, sélectionnez Utiliser ce modèle > Créer un référentiel.
Indiquez le nom du référentiel (par exemple, frescopa-edge-functions), ajoutez une description, définissez la visibilité sur Privé, puis sélectionnez Créer un référentiel.

Étape 5 : cloner, réviser et exécuter le projet Fonctions AEM Edge

Clonez le projet AEM Edge Functions

Clonez le référentiel que vous avez créé à l’étape 4, puis ouvrez-le avec le projet de site Frescopa (ou le vôtre) Edge Delivery dans votre IDE. La plupart des éditeurs prennent en charge les espaces de travail ou les vues à plusieurs racines qui vous permettent de travailler sur les deux projets en même temps.

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

Par exemple, consultez le projet de site Frescopa Edge Delivery et le projet Frescopa AEM Edge Functions en tant qu’espace de travail dans l’IDE :

Projet de site Frescopa Edge Delivery et projet Frescopa AEM Edge Fonctions en tant qu’espace de travail dans IDE

Examiner le projet Fonctions AEM Edge

Avant d’apporter des modifications ou de déployer le projet AEM Edge Functions, passez en revue les fichiers essentiels qui définissent le contrat AEM Edge Functions.

package.json contient les dépendances du projet. Notez la dépendance @fastly/js-compute. Pour plus d’informations, voir JavaScript sur la plateforme Compute.

src/index.js est le point d’entrée de la fonction et contient la logique principale du projet. Il utilise le modèle de addEventListener("fetch", ...) de Fastly Compute. Toutes les requêtes entrantes transitent par la fonction handleRequest, où vous ajoutez une logique de correspondance d’itinéraire. Par exemple, le code suivant provient de la norme standard :

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;
}

Une seule fonction AEM Edge peut gérer plusieurs itinéraires par le biais des instructions if dans handleRequest.

fastly.toml configure le serveur de développement local. Pour plus d’informations, voir la référence Fastly.toml.
config/ contient les fichiers de configuration pour le service de fonction AEM Edge et les règles de routage du réseau CDN. Déployez ces fichiers via le pipeline de configuration Edge Delivery dans Cloud Manager. L’étape 6 couvre ce processus.

Passez en revue les fichiers de projet restants tels que test/, src/lib/ et README.md pour comprendre la configuration complète.

Exécutez localement le projet Fonctions AEM Edge .

Pour effectuer une itération rapide, vous pouvez exécuter localement le projet Fonctions AEM Edge . Dans le répertoire du projet Fonctions AEM Edge , installez les dépendances et démarrez le serveur de développement local :

# 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

Le serveur démarre à http://127.0.0.1:7676.

Par exemple, la sortie doit ressembler à la capture d’écran suivante :

Sortie du serveur de développement local

Étape 6 : vérifier et déployer la configuration du réseau CDN

Le projet Fonctions AEM Edge comprend des fichiers de configuration du réseau CDN. Examinez-les et déployez-les à l’aide du pipeline de configuration Edge Delivery dans Cloud Manager.

Vérifier la configuration du réseau CDN

Consultez les fichiers de configuration du réseau CDN dans le répertoire config/ du projet Fonctions AEM Edge .

config/edgeFunctions.yaml déclare le service de fonction AEM Edge. Par exemple :

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

Pour plus d’informations sur les propriétés prises en charge, voir référence edgeFunctions.yaml.

config/cdn.yaml déclare les règles de routage du réseau CDN qui dirigent le trafic vers le service de fonction AEM Edge. Par exemple :

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

Appels principaux :

Le originName doit suivre le modèle edgefunction-<edge-function-name>, où <edge-function-name> correspond au nom de la fonction AEM Edge déclarée en edgeFunctions.yaml.
Le type doit être selectAemOrigin.
Le skipCache est défini sur true pour contourner le cache du réseau CDN pour la requête.

Pour plus d’informations, voir Sélecteurs d’origine .

Gestion de la configuration du réseau CDN

Déployez la configuration du réseau CDN via le pipeline de configuration Cloud Manager. Tout d’abord, rendez les fichiers config/ de votre projet AEM Edge Functions disponibles pour Cloud Manager. Vous disposez de deux options :

Référentiel Adobe : créez un référentiel dans Cloud Manager pour votre programme.
Référentiel privé : liez votre référentiel GitHub existant à Cloud Manager.

Ce tutoriel utilise le projet Frescopa AEM Edge Functions de l’étape 4 comme référentiel privé.

Dans Cloud Manager, ouvrez Référentiels et sélectionnez Ajouter un référentiel.
Dans la boîte de dialogue Ajouter un référentiel, sélectionnez Référentiel privé, puis indiquez le nom, l’URL et le type du référentiel. Sélectionnez Enregistrer.
Suivez les étapes de la boîte de dialogue Validation de la propriété du référentiel privé.
1. Octroyez à Cloud Manager l’accès au référentiel :
2. Stockez le secret de validation dans votre référentiel de projet Fonctions AEM Edge :

Une fois la validation terminée, le référentiel privé apparaît dans le tableau Référentiels.

Déployer la configuration du réseau CDN

Création et exécution d’un pipeline de configuration Edge Delivery dans Cloud Manager.

Sur la page de présentation du programme, ouvrez l’onglet . Sous Pipelines, sélectionnez Ajouter un pipeline Edge Delivery.
Dans la boîte de dialogue Ajouter un pipeline Edge Delivery, indiquez un nom et sélectionnez Continuer.
À l’étape Code, sélectionnez le référentiel privé que vous avez ajouté, la branche main et /config comme emplacement du code. Sélectionnez Enregistrer.
Exécutez le pipeline en sélectionnant … en regard du nom du pipeline, puis Exécuter.

L’exécution réussie déploie les fichiers edgeFunctions.yaml et cdn.yaml sur le domaine de site Edge Delivery.

Vérifiez que la configuration du réseau CDN a été déployée avec succès :

$ aio aem edge-functions list

La sortie doit répertorier les my-edge-function (ou le nom que vous avez déclaré dans edgeFunctions.yaml).

Sortie de la liste des fonctions AEM Edge

Étape 7 : créer et déployer le projet Fonctions AEM Edge

Créez et déployez le projet Fonctions AEM Edge à l’aide des commandes suivantes, qui utilisent le contexte stocké dans le fichier .aio.

# 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

Le nom transmis à deploy doit correspondre au name déclaré dans config/edgeFunctions.yaml. Vous devez également faire partie du profil de produit Gestionnaire de déploiement.

Par exemple, la sortie doit ressembler à la capture d’écran suivante :

Les fonctions AEM Edge créent et déploient la sortie

IMPORTANT

Pour déployer le projet AEM Edge Functions à partir de votre système CI/CD, vous avez besoin d’un projet Adobe Developer Console (ADC) pour les informations d’identification d’API. Voir Intégration de et Configuration de CI/CD pour plus d’informations.

Étape 8 : vérifier le point d’entrée

Vérifiez les points d’entrée déployés dans un navigateur ou avec curl :

$ curl https://myfrescopa.enablementadobe.com/hello-world
$ curl https://myfrescopa.enablementadobe.com/weather

Remplacez le domaine par votre domaine de site Edge Delivery à l’étape 1.

Par exemple, les réponses ressemblent à la capture d’écran suivante :

Réponses des points d’entrée dynamiques

NOTE

Le domaine edgefunction-pXXXXX-dYYYYY-<edge-function-name>.adobeaemcloud.com est disponible uniquement à des fins de débogage et sa stabilité n’est pas garantie. En production, les requêtes atteignent la fonction AEM Edge par le biais du domaine personnalisé de votre site via les règles de routage du réseau CDN dans cdn.yaml.

Dans des scénarios réels, utilisez les fonctions AEM Edge pour la logique côté serveur sur le réseau CDN et appelez-les à partir du JavaScript bloc de votre site. Consultez la documentation du produit Fonctions AEM Edge pour une configuration avancée.

Résumé

Vous avez intégré le site Frescopa Edge Delivery à Cloud Manager, installé l’interface de ligne de commande, configuré les fonctions AEM Edge sur Edge Delivery Services, créé et exécuté le projet localement, déployé la configuration du réseau CDN, créé et déployé la fonction AEM Edge et vérifié le point d’entrée.

Ressources supplémentaires

recommendation-more-help

experience-manager-learn-help-cloud-service