Documentation AEM Tutoriels d’AEM as a Cloud Service

Configurer les fonctions AEM Edge sur AEM as a Cloud Service

Dernière mise à jour : 8 juillet 2026

S'applique à :
Experience Manager as a Cloud Service

Rubriques :
Developing

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 dans l’environnement AEM as a Cloud Service.

Ce tutoriel couvre l’installation de l’interface de ligne de commande, le déploiement du site AEM, 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 sur AEM as a Cloud Service.

Ce tutoriel utilise le projet Sites WKND comme site de démonstration. Vous pouvez suivre les mêmes étapes avec votre propre site et votre propre environnement.

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 AEM. 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 copiez la configuration du réseau CDN dans votre projet de site AEM, effectuez un déploiement via Cloud Manager ou un RDE, envoyez la fonction AEM Edge (module JavaScript) sur le réseau CDN Adobe et vérifiez les deux points d’entrée dans un navigateur ou avec curl.

Étapes de haut niveau :

Installation de l’interface de ligne de commande Adobe et du plug-in AEM Edge Functions
Déploiement de votre site AEM dans un environnement RDE ou de développement
Configurer des fonctions AEM Edge dans votre environnement AEM as a Cloud Service
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
Accès à un environnement AEM as a Cloud Service doté d’un rôle Cloud Manager Responsable de déploiement ou Administrateur AEM Profil de produit sur l’instance d’auteur
Le projet Sites WKND ou votre propre projet de site AEM cloné localement

NOTE

Pour AEM as a Cloud Service, vous pouvez déployer une fonction AEM Edge par environnement.

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

Installez ou mettez à jour l’aio Adobe CLI, les fonctions AEM Edge et les modules externes de RDE.

Nouvelle installation

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

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

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, la sortie doit ressembler à la capture d’écran suivante :

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

Étape 2 : déployer votre site AEM

Avant de configurer les fonctions AEM Edge, déployez votre site AEM vers un environnement cible. Si votre site est déjà déployé, vérifiez qu’il est accessible et passez à l’étape 3.

RDE

À partir de la racine du projet WKND ou de votre propre site, exécutez les commandes suivantes pour configurer et déployer le site sur le RDE :

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

Vérifiez que le site est accessible sur https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/.

Pour une présentation complète, voir Environnement de développement rapide.

Environnement de développement

Déployez WKND ou votre propre site dans l’environnement de développement à l’aide du pipeline de pile complète dans Cloud Manager.
Vérifiez que le site est accessible sur https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/.

Pour une présentation complète, voir Pipelines full stack.

Étape 3 : configurer les fonctions AEM Edge dans votre environnement

Les fonctions AEM Edge doivent être configurées dans l’environnement AEM as a Cloud Service. 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.

Exécutez la commande suivante à partir de la racine du projet AEM WKND (ou votre propre projet) :

$ 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 des détails sur le programme, l’environnement, le type de site et la configuration du projet ADC. 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

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, wknd-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 WKND (ou votre propre projet) 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, ouvrez le projet WKND Sites et le projet WKND AEM Edge Functions dans un seul espace de travail IDE :

Les projets WKND et WKND AEM fonctionnent tous deux comme un espace de travail dans l’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 dans votre environnement AEM as a Cloud Service à l’aide du pipeline de configuration 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 wknd-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 dans le répertoire config/. Examinez-les avant de les copier dans votre projet de site AEM.

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, le code suivant provient du projet Fonctions Edge de WKND AEM :

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, le code suivant provient du projet Fonctions Edge de WKND AEM :

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 . Notez que le fichier cdn.yaml prend également en charge les règles de filtrage du trafic, la transformation des requêtes et des réponses, ainsi que d’autres fonctionnalités CDN. Pour plus d’informations, voir Configuration du trafic sur le réseau CDN.

Gestion de la configuration du réseau CDN

Conservez toutes les configurations de réseau CDN dans le répertoire config/ de votre projet de site AEM, car votre site peut déjà inclure des règles WAF, des filtres de trafic et d’autres paramètres dans cdn.yaml. Cela permet de conserver toutes les configurations de réseau CDN au même endroit.

Copiez le edgeFunctions.yaml du projet AEM Edge Functions vers le répertoire config/ du projet de site AEM __.
Fusionnez la section originSelectors du cdn.yaml du projet Fonctions AEM Edge dans le cdn.yaml de votre projet de site AEM.

Par exemple, les fichiers de configuration du réseau CDN dans le projet WKND site ressemblent à ceci :

Fichiers de configuration CDN dans le projet WKND

Déployer la configuration du réseau CDN

Enfin, déployez la configuration du réseau CDN dans votre environnement AEM as a Cloud Service.

RDE

Pour les environnements RDE, exécutez la commande suivante à partir de la racine du projet AEM WKND (ou votre propre projet) :

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`

Environnement de développement

Pour les environnements de développement, validez les fichiers config et exécutez le pipeline de configuration dans Cloud Manager :

Validez et envoyez les fichiers de configuration au référentiel Git de Cloud Manager.
Accédez à Pipelines dans Cloud Manager et exécutez le pipeline de configuration pour votre environnement.

Exécution du pipeline de configuration

Vérifiez que la configuration a bien été déployée :

$ 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 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

Le nom transmis à deploy doit correspondre au name déclaré dans config/edgeFunctions.yaml. Vous devez également faire partie du profil de produit Administrateur AEM - auteur sur l’instance d’auteur.

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 Fonctions AEM Edge à partir de votre système CI/CD, vous avez besoin du projet Adobe Developer Console (ADC) pour les informations d’identification de l’API, qui inclut la carte d’API du réseau de diffusion de contenu (CDN) AEM. 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://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/hello-world
curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/weather

Remplacez pXXXXX et eYYYYY par vos ID de programme et d’environnement Cloud Manager.

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

Réponses des points d’entrée dynamiques

NOTE

Le domaine edgefunction-pXXXXX-eYYYYY-<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 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 de votre site par le biais des chemins d’accès routés définis dans cdn.yaml. Consultez la documentation du produit Fonctions AEM Edge pour une configuration avancée.

Résumé

Vous avez correctement configuré les fonctions AEM Edge dans votre environnement AEM as a Cloud Service, créé un projet à partir du modèle standard, cloné ce projet, révisé les fichiers du projet, exécuté le projet localement, révisé et déployé la configuration du réseau CDN, créé et déployé le projet et vérifié le point d’entrée.

Ressources supplémentaires

recommendation-more-help

experience-manager-learn-help-cloud-service