Documentación AEM Tutoriales de AEM as a Cloud Service

Configuración de las funciones de AEM Edge en AEM as a Cloud Service

Última actualización: 25 de junio de 2026

Se aplica a:
Experience Manager as a Cloud Service

Temas:
Developing

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 el entorno de AEM as a Cloud Service.

Este tutorial abarca la instalación de CLI, la implementación del sitio de AEM, 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 en AEM as a Cloud Service.

Este tutorial utiliza el proyecto WKND Sites como sitio de demostración. Puede seguir los mismos pasos con su propio sitio y entorno.

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 AEM. 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, copie la configuración de CDN en el proyecto del sitio de AEM, implemente a través de Cloud Manager o un RDE, inserte la función AEM Edge (módulo de JavaScript) en CDN de Adobe y compruebe ambos extremos en un explorador o con curl.

Los pasos de alto nivel:

Instalación del complemento de funciones Edge de Adobe CLI y AEM
Implementar el sitio de AEM en un entorno RDE o Dev
Configuración de las funciones de AEM Edge en el entorno de AEM as a Cloud Service
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
Acceso a un entorno de AEM as a Cloud Service con el rol de administrador de implementación Cloud Manager o el perfil de producto AEM Administrator en la instancia de autor
El proyecto WKND Sites o su propio proyecto de sitio AEM clonado localmente

NOTE

Para AEM as a Cloud Service, puede implementar una función Edge de AEM por entorno.

Paso 1: Instalar CLI y complementos

Instale o actualice la CLI de Adobe aio, las funciones de AEM Edge y los complementos de RDE.

Nueva instalación

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

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

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, el resultado debería ser similar al de la siguiente captura de pantalla:

Salida de versión de CLI

Paso 2: Implementar el sitio de AEM

Antes de configurar las funciones de Edge de AEM, implemente su sitio de AEM en un entorno de destino. Si el sitio ya está implementado, compruebe que es accesible y vaya al paso 3.

RDE

Desde la raíz de WKND o desde su propio proyecto de sitio, ejecute los siguientes comandos para configurar e implementar el sitio en 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

Compruebe que se puede acceder al sitio en https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/.

Para ver un tutorial completo, vea Entorno de desarrollo rápido.

Entorno de desarrollo

Implemente WKND o su propio sitio en el entorno de desarrollo mediante la canalización de pila completa en Cloud Manager.
Compruebe que se puede acceder al sitio en https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/.

Para obtener un tutorial completo, vea Canalizaciones de pila completa.

Paso 3: Configurar las funciones de AEM Edge en su entorno

Las funciones de Edge de AEM deben configurarse en el entorno de AEM as a Cloud Service. 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.

Ejecute el siguiente comando desde la raíz del proyecto WKND (o su propio) de AEM:

$ 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 entorno, el tipo de sitio y la configuración del proyecto de ADC. 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

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, wknd-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 WKND (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, abra el proyecto de WKND Sites y el proyecto de funciones Edge de WKND AEM en un solo espacio de trabajo del IDE:

Los proyectos de funciones Edge de WKND y WKND 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 en el entorno de AEM as a Cloud Service mediante la canalización de configuración de 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 wknd-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 de funciones Edge de AEM incluye archivos de configuración de CDN en el directorio config/. Revíselos antes de copiarlos en el proyecto de sitio de AEM.

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, el siguiente código es del proyecto WKND AEM Edge Functions:

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, el siguiente código es del proyecto 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

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. Tenga en cuenta que el archivo cdn.yaml también admite reglas de filtro de tráfico, transformación de solicitudes y respuestas y otras características de CDN. Para obtener más información, consulte Configuración del tráfico en CDN.

Administrar configuración de CDN

Mantenga toda la configuración de CDN en el directorio config/ del proyecto del sitio de AEM, ya que es posible que el sitio ya incluya reglas de WAF, filtros de tráfico y otras configuraciones en cdn.yaml. Esto mantiene toda la configuración de CDN en un solo lugar.

Copie edgeFunctions.yaml del proyecto Funciones de Edge de AEM al directorio config/ del proyecto de sitio AEM.
Combine la sección originSelectors del proyecto de funciones Edge de AEM cdn.yaml en el proyecto del sitio AEM cdn.yaml.

Por ejemplo, los archivos de configuración de CDN en el proyecto del sitio WKND tienen este aspecto:

Archivos de configuración de CDN en el proyecto WKND

Implementar la configuración de CDN

Finalmente, implemente la configuración de CDN en su entorno de AEM as a Cloud Service.

RDE

Para entornos RDE, ejecute el siguiente comando desde la raíz del proyecto WKND (o el suyo propio) de AEM:

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`

Entorno de desarrollo

En entornos de desarrollo, confirme los archivos de configuración y ejecute la canalización de configuración en Cloud Manager:

Confirme y envíe los archivos de configuración al repositorio de Git de Cloud Manager.
Vaya a Canalizaciones en Cloud Manager y ejecute la canalización de configuración para su entorno.

Ejecución de canalización de configuración de Cloud Manager

Compruebe que la configuración se haya 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 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

El nombre pasado a deploy debe coincidir con el name declarado en config/edgeFunctions.yaml. Además, debe formar parte del perfil de producto Administrador de AEM - autor en la instancia de autor.

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, que incluye la tarjeta de API de la red de distribución de contenido de AEM (CDN). 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://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/hello-world
curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/weather

Reemplace pXXXXX y eYYYYY por sus ID de programa y entorno de Cloud Manager.

Por ejemplo, las respuestas tienen el siguiente aspecto:

Respuestas de extremo activas

NOTE

El dominio edgefunction-pXXXXX-eYYYYY-<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 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 la lógica del lado del servidor en la CDN y llámelas desde el sitio a través de las rutas de acceso definidas en cdn.yaml. Consulte la Documentación del producto Funciones de AEM Edge para obtener información sobre la configuración avanzada.

Resumen

Ha configurado correctamente las funciones de Edge de AEM en su entorno de AEM as a Cloud Service, ha creado un proyecto a partir de la plantilla de plantillas, lo ha clonado, ha revisado los archivos del proyecto, lo ha ejecutado localmente, ha revisado e implementado la configuración de CDN, ha creado e implementado el proyecto y ha verificado el punto de conexión.

Recursos adicionales

recommendation-more-help

experience-manager-learn-help-cloud-service