Documentación AEM Tutoriales de AEM as a Cloud Service

Configuración de las funciones de AEM Edge en Edge Delivery Services

Última actualización: 25 de junio de 2026

Se aplica a:
Experience Manager as a Cloud Service

Creado para:

Intermediate
Admin
Developer

IMPORTANT

Funciones de AEM Edge se encuentra en la versión beta. Las funciones y la documentación pueden cambiar. Para obtener comentarios, comuníquese con aemcs-edgecompute-feedback@adobe.com.

Obtenga información sobre cómo configurar las funciones de Edge de AEM en un sitio de Edge Delivery Services.

Este tutorial cubre la incorporación del sitio Edge Delivery en Cloud Manager, la instalación de CLI, la configuración del proyecto desde la plantilla de plantillas, la configuración de CDN y la implementación de un punto de conexión en funcionamiento.

Este tutorial utiliza el Proyecto del sitio Frescopa como sitio de demostración. Puede seguir los mismos pasos con su propio sitio de Edge Delivery Services.

Lo que va a generar

Las funciones de AEM Edge son módulos de JavaScript que se ejecutan en Adobe CDN en el perímetro de, no en el origen de Edge Delivery. Implementa una función de AEM Edge denominada my-edge-function con dos rutas:

/hello-world devuelve un saludo desde el perímetro
/weather detecta la ubicación del visitante en el perímetro, llama a la API de Open-Meteo y devuelve la temperatura actual de su ciudad

Durante el desarrollo, pruebe la función Edge de AEM localmente con el servidor de desarrollo. A continuación, implemente edgeFunctions.yaml y cdn.yaml a través de la canalización de configuración de Edge Delivery, inserte la función Edge de AEM (módulo JavaScript) en la red de distribución de contenido (CDN) de Adobe y compruebe ambos extremos en el dominio del sitio (por ejemplo, https://myfrescopa.enablementadobe.com/hello-world).

Los pasos de alto nivel:

Incorporar el sitio de Edge Delivery a Cloud Manager
Instalación del complemento de funciones Edge de Adobe CLI y AEM
Configuración de las funciones de AEM Edge en Edge Delivery Services
Cree el proyecto Funciones de AEM Edge a partir de la plantilla de plantillas
Clonar, revisar y ejecutar el proyecto de funciones de Edge de AEM localmente
Revisión, administración e implementación de la configuración de CDN
Creación e implementación de funciones de Edge de AEM en CDN de Adobe
Compruebe que el punto de conexión funciona

Requisitos previos

Asegúrese de que las siguientes opciones estén implementadas antes de comenzar.

Node.js y npm se instalaron localmente
Una cuenta de GitHub para crear un proyecto a partir de la plantilla de plantillas
Un complemento de Edge Delivery Services para su programa de Cloud Manager
Función Administrador de implementación en Cloud Manager
El proyecto del sitio Frescopa o su propio proyecto del sitio Edge Delivery

NOTE

Edge Delivery Services admite hasta tres funciones de AEM Edge por programa, destinadas a admitir las ramas de desarrollo, ensayo y producción de sus sitios.

Paso 1: Incorporar su sitio de Edge Delivery a Cloud Manager

Antes de configurar las funciones de Edge de AEM, incorpore el sitio de Edge Delivery en Cloud Manager. Este paso utiliza solo Cloud Manager y no requiere la CLI de Adobe.

Si el sitio ya está incorporado, compruebe que aparece en Cloud Manager y vaya al paso 2.

Los pasos siguientes utilizan el Proyecto del sitio Frescopa como sitio de demostración.

Inicie sesión en Cloud Manager y abra su programa con un complemento de Edge Delivery Services. En la descripción general del programa, confirma que la ficha Edge Delivery está visible.
En la ficha Edge Delivery, complete la lista de tareas pendientes de Edge Delivery. Los pasos clave incluyen:
1. Agregar sitio Edge Delivery:
  - Nombre del sitio: Frescopa
  - Origen de Edge Delivery: https://main--frescopa--sachinmali.aem.live/
  El formato es https://<branch>--<site-name>--<organization-name>.aem.live/, donde <branch>, <site-name> y <organization-name> son la rama, el nombre de sitio y el nombre de organización del proyecto de sitio de Edge Delivery Services, respectivamente.
  
  Lo ideal es intentar configurar la rama dev del proyecto del sitio de Edge Delivery Services. Sin embargo, consulte la siguiente captura de pantalla para ver nuestro sitio de demostración.
2. Agregar dominio:
  - Nombre de dominio: myfrescopa.enablementadobe.com
  Debe tener un nombre de dominio personalizado configurado para implementar el proyecto de funciones de Edge de AEM aunque esté probando en un sitio de desarrollo asignado a la rama de desarrollo del proyecto de sitio de Edge Delivery Services.
3. Agregar certificado SSL:
  - Tipo de certificado: administrado por el cliente (OV/EV)
  - Nombre de certificado: enablementadobe.com
  - Certificado: el contenido del archivo de certificado firmado entre -----BEGIN CERTIFICATE----- y -----END CERTIFICATE-----
  - Clave privada: El contenido del archivo de clave privada entre -----BEGIN PRIVATE KEY----- y -----END PRIVATE KEY-----
  - Cadena de certificados: El contenido del archivo de cadena de certificados entre -----BEGIN CERTIFICATE----- y -----END CERTIFICATE-----
  También puede utilizar el certificado administrado de Adobe (DV). Por motivos de tutorial, utilizamos un certificado administrado por el cliente (OV/EV) como ejemplo.
4. Agregar un registro DNS en su servicio de hospedaje DNS para myfrescopa.enablementadobe.com.
5. Asigne el dominio myfrescopa.enablementadobe.com a la CDN administrada por Adobe.
Compruebe que el sitio aparece en la tabla de Edge Delivery Sites. Se puede acceder al sitio de muestra de Frescopa en https://myfrescopa.enablementadobe.com/.

Para ver un tutorial completo, consulte Agregar un sitio Edge Delivery a Cloud Manager.

Paso 2: Instalar CLI y complementos

Instale o actualice la CLI de Adobe aio y el complemento AEM Edge Functions.

Nueva instalación

Para una instalación nueva, ejecute los siguientes comandos:

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`

Actualizar existente

Actualice la CLI de Adobe y los complementos instalados:

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`

Por ejemplo, la instalación correcta del complemento CLI y funciones Edge de AEM debería tener el siguiente aspecto:

Salida de versión de CLI

Paso 3: Configurar las funciones de Edge de AEM

Las funciones de AEM Edge deben configurarse en el dominio del sitio de Edge Delivery Services. Permite implementar código y archivos de configuración en Adobe CDN para poder invocar las rutas admitidas por las funciones de AEM Edge desde el código de JavaScript en el sitio.

Para configurar las funciones de Edge de AEM, ejecute el siguiente comando:

$ aio aem edge-functions setup

Si aún no ha iniciado sesión en Adobe IMS, el comando déclencheur el flujo de inicio de sesión. El proceso de configuración solicita detalles sobre el programa, el tipo de sitio, el sitio de Edge Delivery y la configuración del proyecto de ADC. Seleccione Edge Delivery Services como tipo de sitio. Los detalles de instalación se almacenan en el archivo .aio, proporciona el contexto para los comandos CLI de funciones de AEM Edge a partir de ahora.

Mensajes de configuración de funciones de AEM Edge

Tenga en cuenta que el programa de instalación asocia el sitio Edge Delivery de Frescopa con el dominio myfrescopa.enablementadobe.com.

IMPORTANT

La configuración del proyecto de Adobe Developer Console (ADC) para credenciales de API (que incluye la tarjeta de API de red de distribución de contenido (CDN) de AEM) no se realiza como parte de este tutorial. Sin embargo, debe hacerse cuando desee implementar los proyectos de AEM Edge Functions desde el sistema CI/CD. Consulte Integración de Adobe Developer Console y Configuración de CI/CD para obtener más información.

Utilice el siguiente comando para revisar los detalles de configuración de las funciones de Edge de AEM:

$ aio aem edge-functions info

El resultado debe ser similar al siguiente:

Salida de información de funciones de AEM Edge

Paso 4: Crear un proyecto de funciones de Edge de AEM

Cree el proyecto Funciones de AEM Edge a partir de la plantilla de GitHub aem-edge-functions-boilerplate. La plantilla incluye los archivos y la configuración que necesita para empezar.

Vaya a aem-edge-functions-boilerplate en GitHub.
En la esquina superior derecha, seleccione Usar esta plantilla > Crear un nuevo repositorio.
Proporcione el nombre del repositorio (por ejemplo, frescopa-edge-functions), agregue una descripción, establezca la visibilidad en Privado y seleccione Crear repositorio.

Paso 5: Clonar, revisar y ejecutar el proyecto Funciones de Edge de AEM

Clone el proyecto Funciones de Edge de AEM

Clone el repositorio que creó en el paso 4 y, a continuación, ábralo junto con el proyecto de sitio Edge Delivery Frescopa (o el suyo propio) en su IDE. La mayoría de los editores admiten espacios de trabajo o vistas multiraíz que permiten trabajar en ambos proyectos al mismo tiempo.

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

Por ejemplo, consulte el proyecto del sitio Edge Delivery de Frescopa y el proyecto de funciones Edge de Frescopa AEM como espacio de trabajo en IDE:

Proyecto del sitio Edge Delivery de Frescopa y Proyecto de funciones Edge de Frescopa AEM como espacio de trabajo en IDE

Revise el proyecto Funciones de Edge de AEM

Antes de realizar cambios o implementar el proyecto de funciones de Edge de AEM, revise los archivos clave que definen el contrato de funciones de Edge de AEM.

package.json contiene las dependencias del proyecto. Observe la dependencia @fastly/js-compute. Para obtener más información, consulte JavaScript en Compute platform.

src/index.js es el punto de entrada de la función y contiene la lógica principal del proyecto. Utiliza el patrón addEventListener("fetch", ...) de Fastly Compute. Todas las solicitudes entrantes fluyen a través de la función handleRequest, donde se agrega la lógica de coincidencia de ruta. Por ejemplo, el siguiente código es de la plantilla:

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 única función Edge de AEM puede administrar varias rutas a través de las instrucciones if en handleRequest.

fastly.toml configura el servidor de desarrollo local. Para obtener más información, vea la referencia de Fastly.toml.
config/ contiene los archivos de configuración para el servicio AEM Edge Function y las reglas de enrutamiento de CDN. Implemente estos archivos a través de la canalización de configuración de Edge Delivery en Cloud Manager. El paso 6 cubre ese proceso.

Revise los archivos de proyecto restantes, como test/, src/lib/ y README.md, para comprender la configuración completa.

Ejecute el proyecto Funciones de AEM Edge localmente

Para iterar rápidamente, puede ejecutar el proyecto Funciones de AEM Edge localmente. En el directorio del proyecto Funciones de AEM Edge, instale las dependencias e inicie el servidor de desarrollo 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

El servidor se inicia a las http://127.0.0.1:7676.

Por ejemplo, el resultado debería ser similar al de la siguiente captura de pantalla:

Salida del servidor de desarrollo local

Paso 6: Revisar e implementar la configuración de CDN

El proyecto Funciones de AEM Edge incluye archivos de configuración de CDN. Revise e implemente mediante la canalización de configuración de Edge Delivery en Cloud Manager.

Revisar configuración de CDN

Revise los archivos de configuración de CDN en el directorio config/ del proyecto Funciones de Edge de AEM.

config/edgeFunctions.yaml declara el servicio AEM Edge Function. Por ejemplo:

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

Para obtener más información acerca de las propiedades compatibles, vea edgeFunctions.yaml reference.

config/cdn.yaml declara las reglas de enrutamiento de CDN que dirigen el tráfico al servicio de funciones de AEM Edge. Por ejemplo:

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

Llamadas clave:

originName debe seguir el patrón edgefunction-<edge-function-name>, donde <edge-function-name> es el nombre de la función Edge de AEM declarada en edgeFunctions.yaml.
type debe ser selectAemOrigin.
skipCache está establecido en true para omitir la caché de CDN para la solicitud.

Para obtener más información, consulte Selectores de origen.

Administrar configuración de CDN

Implemente la configuración de CDN mediante la canalización de configuración de Cloud Manager. En primer lugar, ponga a disposición de Cloud Manager los archivos de config/ del proyecto Funciones de Edge de AEM. Tiene dos opciones:

Repositorio de Adobe: cree un nuevo repositorio en Cloud Manager para su programa.
Repositorio privado: vincule su repositorio de GitHub existente a Cloud Manager.

Este tutorial utiliza el proyecto Frescopa AEM Edge Functions del Paso 4 como repositorio privado.

En Cloud Manager, abra Repositorios y seleccione Agregar repositorio.
En el cuadro de diálogo Agregar repositorio, seleccione Repositorio privado y, a continuación, proporcione el nombre del repositorio, la dirección URL y el tipo. Seleccione Guardar.
Complete los pasos del cuadro de diálogo Validación de propiedad de repositorio privado.
1. Conceder acceso de Cloud Manager al repositorio:
2. Almacene el secreto de validación en el repositorio del proyecto de funciones de AEM Edge:

Una vez finalizada la validación, el repositorio privado aparece en la tabla Repositorios.

Implementar la configuración de CDN

Cree y ejecute una canalización de configuración de Edge Delivery en Cloud Manager.

En la página de información general del programa, abra la ficha Edge Delivery. En Canalizaciones, seleccione Agregar canalización de Edge Delivery.
En el cuadro de diálogo Agregar canalización de Edge Delivery, proporcione un nombre y seleccione Continuar.
En el paso Código Source, seleccione el repositorio privado que agregó, la rama main y /config como ubicación del código. Seleccione Guardar.
Ejecute la canalización seleccionando … junto al nombre de la canalización y, a continuación, Ejecutar.

La ejecución correcta implementa los archivos edgeFunctions.yaml y cdn.yaml en el dominio del sitio de Edge Delivery.

Compruebe que la configuración de CDN se ha implementado correctamente:

$ aio aem edge-functions list

El resultado debe incluir my-edge-function (o el nombre que haya declarado en edgeFunctions.yaml).

Salida de lista de funciones de AEM Edge

Paso 7: Creación e implementación del proyecto Funciones de Edge de AEM

Genere e implemente el proyecto Funciones de Edge de AEM con los siguientes comandos, los comandos utilizan el contexto almacenado en el archivo .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

El nombre pasado a deploy debe coincidir con el name declarado en config/edgeFunctions.yaml. Además, debe formar parte del perfil de producto Cloud Manager Deployment Manager.

Por ejemplo, el resultado debería ser similar al de la siguiente captura de pantalla:

Funciones de AEM Edge generan e implementan resultados

IMPORTANT

Para implementar el proyecto de funciones de Edge de AEM desde el sistema de CI/CD, necesita el proyecto de Adobe Developer Console (ADC) para las credenciales de la API. Consulte Integración de Adobe Developer Console y Configuración de CI/CD para obtener más información.

Paso 8: Verificar el punto final

Compruebe los extremos implementados en un explorador o con curl:

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

Sustituya el dominio por el dominio del sitio de Edge Delivery desde el paso 1.

Por ejemplo, las respuestas tienen el siguiente aspecto:

Respuestas de extremo activas

NOTE

El dominio edgefunction-pXXXXX-dYYYYY-<edge-function-name>.adobeaemcloud.com solo está disponible para depuración y no se garantiza que sea estable. En producción, las solicitudes llegan a la función Edge de AEM a través del dominio personalizado del sitio a través de las reglas de enrutamiento de CDN en cdn.yaml.

En situaciones reales, use las funciones Edge de AEM para lógica del lado del servidor en la red de distribución de contenido (CDN) y llámelas desde el bloque JavaScript de su sitio. Consulte la Documentación del producto Funciones de AEM Edge para obtener información sobre la configuración avanzada.

Resumen

Ha incorporado el sitio Edge Delivery de Frescopa a Cloud Manager, ha instalado la CLI, ha configurado las funciones Edge de AEM en Edge Delivery Services, ha creado y ejecutado el proyecto localmente, ha implementado la configuración de CDN, ha creado e implementado la función Edge de AEM y ha verificado el punto de conexión.

Recursos adicionales

recommendation-more-help

experience-manager-learn-help-cloud-service