Documentazione AEM Tutorial su AEM as a Cloud Service

Configurare le funzioni Edge di AEM su AEM as a Cloud Service

Ultimo aggiornamento: 25 giugno 2026

Si applica a:
Experience Manager as a Cloud Service

Argomenti:
Developing

Creato per:

Intermediate
Admin
Developer

IMPORTANT

AEM Edge Functions è attualmente in versione beta. Le funzioni e la documentazione potrebbero cambiare. Per ricevere commenti, contattare aemcs-edgecompute-feedback@adobe.com.

Scopri come configurare le funzioni Edge di AEM nell’ambiente AEM as a Cloud Service.

Questa esercitazione tratta l’installazione CLI, la distribuzione del sito AEM, la configurazione del progetto dal modello standard, la configurazione CDN e la distribuzione di un endpoint funzionante su AEM as a Cloud Service.

Questa esercitazione utilizza il progetto WKND Sites come sito demo. Puoi seguire gli stessi passaggi con il tuo sito e il tuo ambiente.

Cosa verrà creato

Le funzioni Edge di AEM sono moduli JavaScript che vengono eseguiti sulla rete CDN di Adobe al limite, non nell’origine AEM. Si distribuisce una funzione AEM Edge denominata my-edge-function con due route:

/hello-world restituisce un saluto dal server Edge di
/weather rileva la posizione del visitatore nel perimetro, chiama l’API Open-Meteo e restituisce la temperatura corrente per la città

Durante lo sviluppo, verifichi la funzione Edge di AEM localmente con il server di sviluppo. Quindi copi la configurazione CDN nel progetto del sito AEM, distribuisci tramite Cloud Manager o un RDE, invia la funzione Edge di AEM (modulo JavaScript) alla rete CDN di Adobe e verifica entrambi gli endpoint in un browser o con curl.

I passaggi di alto livello:

Installare Adobe CLI e il plug-in AEM Edge Functions
Distribuire il sito AEM in un ambiente RDE o Dev
Configurare le funzioni Edge di AEM nell’ambiente AEM as a Cloud Service
Creare il progetto AEM Edge Functions dal modello standard
Clonare, esaminare ed eseguire il progetto AEM Edge Functions localmente
Verifica, gestisci e distribuisci la configurazione CDN
Creare e distribuire funzioni Edge di AEM in Adobe CDN
Verifica che l’endpoint funzioni

Prerequisiti

Prima di iniziare, assicurati che siano presenti i seguenti elementi.

Node.js e npm installati localmente
Un account GitHub per creare un progetto dal modello standard
Accesso a un ambiente AEM as a Cloud Service con il ruolo Responsabile della distribuzione di Cloud Manager o Profilo prodotto amministratore AEM nell’istanza di authoring
Il progetto WKND Sites o il progetto del tuo sito AEM clonato localmente

NOTE

Per AEM as a Cloud Service, puoi distribuire una funzione Edge di AEM per ogni ambiente.

Passaggio 1: installare CLI e i plug-in

Installa o aggiorna Adobe aio CLI, le funzioni AEM Edge e i plug-in RDE.

Nuova installazione

Per una nuova installazione, eseguire i comandi seguenti:

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

Aggiorna esistente

Aggiorna Adobe CLI e i plug-in installati:

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`

Ad esempio, l’output dovrebbe essere simile alla seguente schermata:

Output versione CLI

Passaggio 2: distribuire il sito AEM

Prima di configurare le funzioni Edge di AEM, distribuisci il sito AEM in un ambiente di destinazione. Se il sito è già stato distribuito, verificane l’accessibilità e passa al passaggio 3.

RDE

Dalla directory principale del WKND o del progetto del sito, esegui i seguenti comandi per impostare e distribuire il sito nell’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

Verificare che il sito sia accessibile in https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/.

Per informazioni dettagliate, vedere Ambiente di sviluppo rapido.

Ambiente di sviluppo

Implementa il WKND o il tuo sito nell’ambiente di sviluppo utilizzando la pipeline full stack in Cloud Manager.
Verificare che il sito sia accessibile in https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/.

Per informazioni dettagliate, vedere Pipeline full stack.

Passaggio 3: configurare le funzioni Edge di AEM nell’ambiente

Le funzioni Edge di AEM devono essere configurate nell’ambiente AEM as a Cloud Service. Consente di distribuire il codice e i file di configurazione nella rete CDN di Adobe in modo da poter richiamare le route supportate dalle funzioni Edge di AEM dal codice JavaScript nel sito.

Esegui il comando seguente dalla directory principale del progetto AEM WKND (o del tuo):

$ aio aem edge-functions setup

Se non hai già effettuato l’accesso ad Adobe IMS, il comando attiva il flusso di accesso. Il processo di installazione richiede i dettagli di programma, ambiente, tipo di sito e configurazione del progetto ADC. I dettagli di installazione sono memorizzati nel file .aio. Fornisce il contesto per i comandi CLI delle funzioni Edge di AEM riportati di seguito.

Prompt di installazione delle funzioni di AEM Edge

IMPORTANT

La configurazione del progetto Adobe Developer Console (ADC) per le credenziali API, che include la scheda API AEM Content Delivery Network (CDN), non viene eseguita come parte di questa esercitazione. Tuttavia, deve essere eseguito quando desideri distribuire i progetti AEM Edge Functions dal sistema CI/CD. Per ulteriori informazioni, vedere Integrazione Adobe Developer Console e Configurazione CI/CD.

Utilizza il seguente comando per rivedere i dettagli di configurazione delle funzioni AEM Edge:

$ aio aem edge-functions info

L’output deve essere simile al seguente:

Output informazioni funzioni AEM Edge

Passaggio 4: creare un progetto AEM Edge Functions

Crea il progetto AEM Edge Functions dal modello GitHub aem-edge-functions-boilerplate. La boilerplate include i file e la configurazione necessari per iniziare.

Passa a aem-edge-functions-boilerplate su GitHub.
Nell’angolo in alto a destra, selezionare Usa questo modello > Crea un nuovo repository.
Specificare il nome del repository (ad esempio, wknd-edge-functions), aggiungere una descrizione, impostare la visibilità su Privato e selezionare Crea repository.

Passaggio 5: clonare, rivedere ed eseguire il progetto AEM Edge Functions

Clonare il progetto AEM Edge Functions

Clona l’archivio creato al passaggio 4, quindi aprilo insieme al progetto WKND (o tuo) nell’IDE. La maggior parte degli editor supporta aree di lavoro o visualizzazioni a più directory principali che consentono di lavorare in entrambi i progetti contemporaneamente.

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

Ad esempio, apri il progetto WKND Sites e il progetto WKND AEM Edge Functions in un’unica area di lavoro IDE:

Le funzioni Edge di WKND e WKND AEM sono entrambe progetti come area di lavoro nell'IDE

Rivedi il progetto AEM Edge Functions

Prima di apportare modifiche o distribuire il progetto AEM Edge Functions, controlla i file chiave che definiscono il contratto AEM Edge Functions.

package.json contiene le dipendenze del progetto. Notare la dipendenza @fastly/js-compute. Per ulteriori informazioni, vedere JavaScript sulla piattaforma di elaborazione.

src/index.js è il punto di ingresso della funzione e contiene la logica principale per il progetto. Utilizza il pattern addEventListener("fetch", ...) di Fastly Compute. Tutte le richieste in ingresso passano attraverso la funzione handleRequest, in cui si aggiunge la logica di corrispondenza della route. Ad esempio, il seguente codice proviene dalla piastra di cottura:

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

Una singola funzione Edge di AEM può gestire più route tramite le istruzioni if in handleRequest.

fastly.toml configura il server di sviluppo locale. Per ulteriori informazioni, vedere Riferimento Fastly.toml.
config/ contiene i file di configurazione per il servizio AEM Edge Function e le regole di routing CDN. Distribuisci questi file nell’ambiente AEM as a Cloud Service utilizzando la pipeline di configurazione di Cloud Manager. La fase 6 riguarda tale processo.

Esaminare i file di progetto rimanenti, ad esempio test/, src/lib/ e README.md per comprendere l’installazione completa.

Eseguire il progetto AEM Edge Functions localmente

Per eseguire rapidamente l’iterazione, puoi eseguire localmente il progetto AEM Edge Functions. Dalla directory del progetto AEM Edge Functions, installa le dipendenze e avvia il server di sviluppo locale:

# 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

Il server inizia alle http://127.0.0.1:7676.

Ad esempio, l’output dovrebbe essere simile alla seguente schermata:

Output del server di sviluppo locale

Passaggio 6: rivedere e distribuire la configurazione CDN

Il progetto AEM Edge Functions include i file di configurazione CDN nella directory config/. Rivedili prima di copiarli nel progetto del sito AEM.

Verifica configurazione CDN

Esaminare i file di configurazione CDN nella directory config/ del progetto AEM Edge Functions.

config/edgeFunctions.yaml dichiara il servizio funzione Edge di AEM. Ad esempio, il seguente codice proviene dal progetto WKND AEM Edge Functions:

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

Per ulteriori informazioni sulle proprietà supportate, vedere edgeFunctions.yaml reference.

config/cdn.yaml dichiara le regole di routing CDN che indirizzano il traffico al servizio funzione Edge di AEM. Ad esempio, il seguente codice proviene dal progetto WKND AEM Edge Functions:

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

Richieste principali:

originName deve seguire il pattern edgefunction-<edge-function-name>, dove <edge-function-name> è il nome della funzione Edge di AEM dichiarata in edgeFunctions.yaml.
Il valore type deve essere selectAemOrigin.
skipCache è impostato su true per ignorare la cache CDN per la richiesta.

Per ulteriori informazioni, vedere Selettori di origine. Il file cdn.yaml supporta anche le regole del filtro del traffico, la trasformazione di richieste e risposte e altre funzionalità CDN. Per ulteriori informazioni, vedere Configurazione del traffico sulla rete CDN.

Gestisci configurazione CDN

Mantieni tutta la configurazione CDN nella directory config/ del progetto del sito AEM, in quanto il tuo sito potrebbe già includere regole WAF, filtri del traffico e altre impostazioni in cdn.yaml. In questo modo tutta la configurazione CDN viene mantenuta in un’unica posizione.

Copiare edgeFunctions.yaml dal progetto AEM Edge Functions nella directory config/ del progetto del sito AEM.
Unisci la sezione originSelectors dal cdn.yaml del progetto AEM Edge Functions nel cdn.yaml del progetto del sito AEM.

Ad esempio, i file di configurazione CDN nel progetto del sito WKND hanno questo aspetto:

File di configurazione CDN nel progetto WKND

Distribuire la configurazione CDN

Infine, distribuisci la configurazione CDN nell’ambiente AEM as a Cloud Service.

RDE

Per gli ambienti RDE, esegui il seguente comando dalla directory principale del progetto AEM WKND (o del tuo):

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`

Ambiente di sviluppo

Per gli ambienti di sviluppo, esegui il commit dei file di configurazione ed esegui la pipeline di configurazione in Cloud Manager:

Esegui il commit e invia i file di configurazione all’archivio Git di Cloud Manager.
Passa a Pipeline in Cloud Manager ed esegui la pipeline di configurazione per il tuo ambiente.

Esecuzione pipeline di configurazione Cloud Manager

Verifica che la configurazione sia stata distribuita correttamente:

$ aio aem edge-functions list

L’output deve elencare my-edge-function (o qualsiasi nome dichiarato in edgeFunctions.yaml).

Output elenco funzioni di AEM Edge

Passaggio 7: creare e distribuire il progetto AEM Edge Functions

Generare e distribuire il progetto AEM Edge Functions utilizzando i comandi seguenti. I comandi utilizzano il contesto memorizzato nel file .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

Il nome passato a deploy deve corrispondere a name dichiarato in config/edgeFunctions.yaml. Devi anche far parte del profilo di prodotto Amministratore AEM - Autore nell’istanza di authoring.

Ad esempio, l’output dovrebbe essere simile alla seguente schermata:

Le funzioni AEM Edge generano e distribuiscono l'output

IMPORTANT

Per distribuire il progetto AEM Edge Functions dal sistema CI/CD, è necessario il progetto Adobe Developer Console (ADC) per le credenziali API, che includono la scheda API CDN (Content Delivery Network) di AEM. Per ulteriori informazioni, vedere Integrazione Adobe Developer Console e Configurazione CI/CD.

Passaggio 8: verificare l’endpoint

Verifica gli endpoint distribuiti in un browser o con curl:

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

Sostituisci pXXXXX e eYYYYY con il tuo programma Cloud Manager e gli ID ambiente.

Ad esempio, le risposte sono simili alla schermata seguente:

Risposte endpoint live

NOTE

Il dominio edgefunction-pXXXXX-eYYYYY-<edge-function-name>.adobeaemcloud.com è disponibile solo per il debug e non è garantito che sia stabile. In produzione, le richieste raggiungono la funzione Edge di AEM attraverso il dominio del sito tramite le regole di routing CDN in cdn.yaml.

In scenari reali, utilizzare le funzioni Edge di AEM per la logica lato server sulla rete CDN e richiamarle dal sito tramite i percorsi instradati definiti in cdn.yaml. Per informazioni sulla configurazione avanzata, consulta la documentazione del prodotto Funzioni AEM Edge.

Riepilogo

Hai configurato correttamente le funzioni Edge di AEM nell’ambiente AEM as a Cloud Service, hai creato un progetto dal modello standard, lo hai clonato, hai esaminato i file del progetto, lo hai eseguito localmente, hai rivisto e distribuito la configurazione CDN, hai creato e distribuito il progetto e hai verificato l’endpoint.

Risorse aggiuntive

recommendation-more-help

experience-manager-learn-help-cloud-service