Documentazione AEM Tutorial su AEM as a Cloud Service

Configurare le funzioni AEM Edge su Edge Delivery Services

Ultimo aggiornamento: 25 giugno 2026

Si applica a:
Experience Manager as a Cloud Service

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 su un sito Edge Delivery Services.

Questa esercitazione tratta l’onboarding del sito Edge Delivery in Cloud Manager, l’installazione CLI, la configurazione del progetto dal modello standard, la configurazione CDN e la distribuzione di un endpoint funzionante.

Questa esercitazione utilizza il progetto del sito Frescopa come sito demo. Puoi seguire gli stessi passaggi con il tuo sito Edge Delivery Services.

Cosa verrà creato

Le funzioni Edge di AEM sono moduli JavaScript che vengono eseguiti sulla rete CDN di Adobe al limite, non nell’origine Edge Delivery. 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 distribuisci edgeFunctions.yaml e cdn.yaml tramite la pipeline di configurazione di Edge Delivery, invia la funzione AEM Edge (modulo JavaScript) alla rete CDN di Adobe e verifica entrambi gli endpoint sul dominio del sito (ad esempio, https://myfrescopa.enablementadobe.com/hello-world).

I passaggi di alto livello:

Eseguire l’onboarding del sito Edge Delivery in Cloud Manager
Installare Adobe CLI e il plug-in AEM Edge Functions
Configurare le funzioni AEM Edge su Edge Delivery Services
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
Un componente aggiuntivo Edge Delivery Services per il programma Cloud Manager
Ruolo Responsabile dell’implementazione in Cloud Manager
Il progetto del sito Frescopa o il tuo progetto del sito Edge Delivery

NOTE

Edge Delivery Services supporta fino a tre funzioni AEM Edge per programma, destinate a supportare sviluppo, gestione temporanea e produzione di rami dei siti.

Passaggio 1: onboarding del sito Edge Delivery in Cloud Manager

Prima di configurare le funzioni Edge di AEM, effettua l’onboarding del tuo sito Edge Delivery in Cloud Manager. Questo passaggio utilizza solo Cloud Manager e non richiede Adobe CLI.

Se il tuo sito è già stato acquisito, verifica che venga visualizzato in Cloud Manager e passa al passaggio 2.

Nei passaggi seguenti viene utilizzato il progetto del sito Frescopa come sito demo.

Accedi a Cloud Manager e apri il programma con un componente aggiuntivo Edge Delivery Services. Nella panoramica del programma, verifica che la scheda Edge Delivery sia visibile.
Nella scheda Edge Delivery, completa l’elenco attività di Edge Delivery. I passaggi chiave includono:
1. Aggiungi sito Edge Delivery:
  - Nome sito: Frescopa
  - Origine Edge Delivery: https://main--frescopa--sachinmali.aem.live/
  Il formato è https://<branch>--<site-name>--<organization-name>.aem.live/, dove <branch>, <site-name> e <organization-name> sono rispettivamente il ramo, il nome del sito e il nome dell’organizzazione del progetto del sito Edge Delivery Services.
  
  È consigliabile provare a configurare il ramo dev del progetto del sito Edge Delivery Services. Tuttavia, vedere la schermata seguente per il nostro sito demo.
2. Aggiungi dominio:
  - Nome dominio: myfrescopa.enablementadobe.com
  Devi avere un nome di dominio personalizzato configurato per distribuire il progetto AEM Edge Functions anche se stai provando su un sito di sviluppo mappato al ramo di sviluppo del progetto del sito Edge Delivery Services.
3. Aggiungi certificato SSL:
  - Tipo di certificato: gestito dal cliente (OV/EV)
  - Nome certificato: enablementadobe.com
  - Certificato: contenuto del file di certificato firmato compreso tra -----BEGIN CERTIFICATE----- e -----END CERTIFICATE-----
  - Chiave privata: contenuto del file della chiave privata compreso tra -----BEGIN PRIVATE KEY----- e -----END PRIVATE KEY-----
  - Catena di certificati: il contenuto del file della catena di certificati compreso tra -----BEGIN CERTIFICATE----- e -----END CERTIFICATE-----
  Puoi utilizzare anche il certificato gestito da Adobe (DV); a scopo di esercitazione, ad esempio, utilizziamo un certificato gestito dal cliente (OV/EV).
4. Aggiungi un record DNS nel servizio di hosting DNS per myfrescopa.enablementadobe.com.
5. Mappa il dominio myfrescopa.enablementadobe.com alla rete CDN gestita Adobe.
Verifica che il sito venga visualizzato nella tabella Siti di Edge Delivery. Il sito demo di Frescopa è raggiungibile all’indirizzo https://myfrescopa.enablementadobe.com/.

Per informazioni dettagliate, vedere Aggiungere un sito Edge Delivery a Cloud Manager.

Passaggio 2: installare CLI e i plug-in

Installa o aggiorna Adobe aio CLI e il plug-in AEM Edge Functions.

Nuova installazione

Per una nuova installazione, eseguire i comandi seguenti:

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`

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’installazione corretta del CLI e del plug-in delle funzioni Edge di AEM dovrebbe avere l’aspetto seguente:

Output versione CLI

Passaggio 3: configurare le funzioni Edge di AEM

Le funzioni Edge di AEM devono essere impostate sul dominio del sito Edge Delivery Services. 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.

Per configurare le funzioni di AEM Edge, esegui il comando seguente:

$ 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 configurazione richiede i dettagli del programma, del tipo di sito, del sito Edge Delivery e della configurazione del progetto ADC. Selezionare Edge Delivery Services come tipo di sito. 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

Il sito Edge Delivery Frescopa viene associato al dominio myfrescopa.enablementadobe.com.

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, frescopa-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 nel passaggio 4, quindi aprilo insieme al progetto del sito Edge Delivery (o al tuo) di Frescopa 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, consulta il progetto del sito Edge Delivery di Frescopa e il progetto delle funzioni Edge di Frescopa AEM come area di lavoro nell’IDE:

Progetto del sito Edge Delivery di Frescopa e Progetto delle funzioni Edge di Frescopa AEM 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 tramite la pipeline di configurazione di Edge Delivery in 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 frescopa-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 file di configurazione CDN. Esaminali e distribuiscili utilizzando la pipeline di configurazione di Edge Delivery in Cloud Manager.

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:

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:

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.

Gestisci configurazione CDN

Distribuisci la configurazione CDN tramite la pipeline di configurazione di Cloud Manager. Innanzitutto, rendi disponibili a Cloud Manager i file config/ del tuo progetto AEM Edge Functions. Sono disponibili due opzioni:

Archivio Adobe: crea un nuovo archivio in Cloud Manager per il programma.
Archivio privato: collega l’archivio GitHub esistente a Cloud Manager.

Questa esercitazione utilizza il progetto Frescopa AEM Edge Functions del passaggio 4 come archivio privato.

In Cloud Manager, apri Archivi e seleziona Aggiungi archivio.
Nella finestra di dialogo Aggiungi archivio, seleziona Archivio privato, quindi fornisci il nome dell’archivio, l’URL e il tipo. Seleziona Salva.
Completa i passaggi nella finestra di dialogo Convalida proprietà archivio privato.
1. Concedere a Cloud Manager l’accesso all’archivio:
2. Archivia il segreto di convalida nell’archivio dei progetti AEM Edge Functions:

Al termine della convalida, l’archivio privato viene visualizzato nella tabella Archivi.

Distribuire la configurazione CDN

Creare ed eseguire una pipeline di configurazione di Edge Delivery in Cloud Manager.

Nella pagina della panoramica del programma, apri la scheda Edge Delivery. In Pipeline, seleziona Aggiungi pipeline Edge Delivery.
Nella finestra di dialogo Aggiungi pipeline di Edge Delivery, specifica un nome e seleziona Continua.
Nel passaggio Codice Source, seleziona l’archivio privato aggiunto, il ramo main e /config come posizione del codice. Seleziona Salva.
Esegui la pipeline selezionando … accanto al nome della pipeline, quindi Esegui.

L’esecuzione corretta distribuisce i file edgeFunctions.yaml e cdn.yaml nel dominio del sito Edge Delivery.

Verifica che la configurazione CDN 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 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

Il nome passato a deploy deve corrispondere a name dichiarato in config/edgeFunctions.yaml. Devi anche far parte del profilo di prodotto Gestione distribuzione Cloud Manager.

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. 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://myfrescopa.enablementadobe.com/hello-world
$ curl https://myfrescopa.enablementadobe.com/weather

Sostituisci il dominio con il dominio del sito Edge Delivery dal passaggio 1.

Ad esempio, le risposte sono simili alla schermata seguente:

Risposte endpoint live

NOTE

Il dominio edgefunction-pXXXXX-dYYYYY-<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 personalizzato del sito tramite le regole di routing CDN in cdn.yaml.

In scenari reali, utilizza le funzioni Edge di AEM per la logica lato server sulla rete CDN e chiamale dal JavaScript del blocco del tuo sito. Per informazioni sulla configurazione avanzata, consulta la documentazione del prodotto Funzioni AEM Edge.

Riepilogo

Hai effettuato l’onboarding del sito Edge Delivery di Frescopa in Cloud Manager, installato CLI, configurato le funzioni Edge di AEM in Edge Delivery Services, creato ed eseguito il progetto localmente, distribuito la configurazione CDN, generato e implementato la funzione Edge di AEM e verificato l’endpoint.

Risorse aggiuntive

recommendation-more-help

experience-manager-learn-help-cloud-service