Documentação AEM Tutoriais do AEM as a Cloud Service

Configurar as funções do AEM Edge no AEM as a Cloud Service

Última atualização: 25 de junho de 2026

Aplica-se a:
Experience Manager as a Cloud Service

Tópicos:
Developing

Criado para:

Intermediate
Admin
Developer

IMPORTANT

O AEM Edge Functions está atualmente na versão beta. Os recursos e a documentação podem mudar. Para receber comentários, contate aemcs-edgecompute-feedback@adobe.com.

Saiba como configurar as funções do AEM Edge no ambiente do AEM as a Cloud Service.

Este tutorial aborda a instalação da CLI, a implantação do site do AEM, a configuração do projeto a partir do modelo padrão, a configuração da CDN e a implantação de um endpoint de trabalho no AEM as a Cloud Service.

Este tutorial usa o projeto de Sites WKND como site de demonstração. Você pode seguir as mesmas etapas com seu próprio site e ambiente.

O que você vai criar

As Funções do AEM Edge são módulos do JavaScript executados no Adobe CDN na borda, não em sua origem no AEM. Você implanta uma AEM Edge Function chamada my-edge-function com duas rotas:

/hello-world retorna uma saudação da borda
/weather detecta a localização do visitante na borda, chama a API Open-Meteo e retorna a temperatura atual para sua cidade

Durante o desenvolvimento, você testa a função Edge do AEM localmente com o servidor dev. Em seguida, você copia a configuração do CDN para o projeto do site do AEM, implanta por meio do Cloud Manager ou de um RDE, envia a AEM Edge Function (módulo JavaScript) para o CDN do Adobe e verifica ambos os pontos de extremidade em um navegador ou com o curl.

As etapas de alto nível:

Instalar o plug-in Adobe CLI e AEM Edge Functions
Implante seu site do AEM em um ambiente RDE ou Dev
Configurar o AEM Edge Functions no seu ambiente do AEM as a Cloud Service
Criar o projeto do AEM Edge Functions a partir do modelo padronizado
Clonar, revisar e executar o projeto do AEM Edge Functions localmente
Revisar, gerenciar e implantar a configuração da CDN
Criar e implantar as Funções do AEM Edge na CDN da Adobe
Verifique se o endpoint está funcionando

Pré-requisitos

Verifique se os itens a seguir estão em vigor antes de iniciar.

Node.js e npm instalados localmente
Uma conta GitHub para criar um projeto a partir do modelo padronizado
Acesso a um ambiente do AEM as a Cloud Service com a função de Gerente de implantação do Cloud Manager ou ao Perfil de Produto Administrador do AEM na instância de autor
O projeto do WKND Sites ou seu próprio projeto do site do AEM clonado localmente

NOTE

Para o AEM as a Cloud Service, você pode implantar uma Função Edge do AEM por ambiente.

Etapa 1: instalar CLI e plug-ins

Instale ou atualize a aio CLI do Adobe, as Funções do Edge do AEM e os plug-ins do RDE.

Nova instalação

Para uma nova instalação, execute os seguintes 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

Atualizar existente

Atualize a CLI do Adobe e os plug-ins 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 exemplo, a saída deve ser semelhante à seguinte captura de tela:

saída da versão da CLI

Etapa 2: implantar o site do AEM

Antes de configurar o AEM Edge Functions, implante seu site do AEM em um ambiente de destino. Se o site já estiver implantado, verifique se ele está acessível e pule para a Etapa 3.

RDE

Na raiz do WKND ou do projeto do seu próprio site, execute os seguintes comandos para configurar e implantar o site no 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

Verifique se o site está acessível em https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/.

Para obter uma apresentação completa, consulte Ambiente de desenvolvimento rápido.

Ambiente de desenvolvimento

Implante a WKND ou seu próprio site no ambiente de Desenvolvimento usando o pipeline de Empilhamento completo no Cloud Manager.
Verifique se o site está acessível em https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/.

Para obter uma apresentação completa, consulte Pipelines de pilha completa.

Etapa 3: configurar as funções do AEM Edge em seu ambiente

As Funções Edge do AEM devem ser configuradas no ambiente do AEM as a Cloud Service. Ele permite implantar arquivos de código e configuração no Adobe CDN para que você possa chamar as rotas compatíveis com as Funções do AEM Edge a partir do código do JavaScript no seu site.

Execute o seguinte comando a partir da raiz do projeto WKND (ou do seu próprio) AEM:

$ aio aem edge-functions setup

Se você ainda não estiver conectado ao Adobe IMS, o comando acionará o fluxo de logon. O processo de configuração solicita detalhes de programa, ambiente, tipo de site e configuração de projeto ADC. Os detalhes da configuração são armazenados no arquivo .aio, que fornece o contexto para os comandos da CLI de Funções do AEM Edge a partir de agora.

Prompts de configuração das Funções do AEM Edge

IMPORTANT

A configuração do projeto Adobe Developer Console (ADC) para credenciais de API - que inclui o cartão de API da rede de entrega de conteúdo (CDN) da AEM - não é feita como parte deste tutorial. No entanto, isso deve ser feito quando você deseja implantar os projetos do AEM Edge Functions a partir do seu sistema de CI/CD. Consulte Integração do Adobe Developer Console e Configuração de CI/CD para obter mais informações.

Use o seguinte comando para revisar os detalhes de configuração das Funções Edge do AEM:

$ aio aem edge-functions info

A saída deve ser semelhante ao seguinte:

Saída de informações de Funções do AEM Edge

Etapa 4: Criar projeto do AEM Edge Functions

Crie o projeto AEM Edge Functions a partir do modelo GitHub aem-edge-functions-boilerplate. O modelo inclui os arquivos e a configuração necessária para começar.

Navegue até aem-edge-functions-boilerplate no GitHub.
No canto superior direito, selecione Usar este modelo > Criar um novo repositório.
Forneça o nome do repositório (por exemplo, wknd-edge-functions), adicione uma descrição, defina a visibilidade como Particular e selecione Criar repositório.

Etapa 5: Clonar, revisar e executar o projeto do AEM Edge Functions

Clonar o projeto do AEM Edge Functions

Clona o repositório que você criou na Etapa 4 e o abre junto com o projeto WKND (ou seu próprio) no IDE. A maioria dos editores é compatível com espaços de trabalho ou exibições de várias raízes que permitem trabalhar em ambos os projetos ao mesmo tempo.

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

Por exemplo, abra o projeto WKND Sites e o projeto WKND AEM Edge Functions em um único espaço de trabalho do IDE:

Projetos WKND e WKND do AEM Edge Functions como espaço de trabalho no IDE

Revisar o projeto do AEM Edge Functions

Antes de fazer alterações ou implantar o projeto do AEM Edge Functions, revise os arquivos principais que definem o contrato do AEM Edge Functions.

package.json contém as dependências do projeto. Observe a dependência @fastly/js-compute. Para obter mais informações, consulte JavaScript na plataforma de Computação.

src/index.js é o ponto de entrada da função e contém a lógica principal do projeto. Ele usa o padrão addEventListener("fetch", ...) do Fastly Compute. Todas as solicitações recebidas fluem através da função handleRequest, onde você adiciona a lógica de correspondência de rotas. Por exemplo, o código a seguir é da chapa:

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

Uma única Função Edge do AEM pode manipular várias rotas pelas instruções if em handleRequest.

fastly.toml configura o servidor de desenvolvimento local. Para obter mais informações, consulte a referência de Fastly.toml.
config/ contém os arquivos de configuração para o serviço AEM Edge Function e as regras de roteamento CDN. Implante esses arquivos no ambiente do AEM as a Cloud Service usando o pipeline de configuração do Cloud Manager. A etapa 6 aborda esse processo.

Revise os arquivos de projeto restantes como test/, src/lib/ e README.md para entender a configuração completa.

Executar o projeto AEM Edge Functions localmente

Para iterar rapidamente, você pode executar o projeto AEM Edge Functions localmente. No diretório do projeto do AEM Edge Functions, instale as dependências e inicie o servidor de desenvolvimento 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

O servidor inicia às http://127.0.0.1:7676.

Por exemplo, a saída deve ser semelhante à seguinte captura de tela:

Saída do servidor de desenvolvimento local

Etapa 6: Revisar e implantar a configuração da CDN

O projeto AEM Edge Functions inclui arquivos de configuração de CDN no diretório config/. Revise-as antes de copiá-las para o projeto de site do AEM.

Revisar configuração da CDN

Revise os arquivos de configuração CDN no diretório config/ do projeto AEM Edge Functions.

config/edgeFunctions.yaml declara o serviço AEM Edge Function. Por exemplo, o código a seguir é do projeto WKND AEM Edge Functions:

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

Para obter mais informações sobre propriedades com suporte, consulte edgeFunctions.yaml reference.

config/cdn.yaml declara as regras de roteamento CDN que direcionam o tráfego para o serviço AEM Edge Function. Por exemplo, o código a seguir é do projeto 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

Principais chamadas de retorno:

O originName deve seguir o padrão edgefunction-<edge-function-name>, onde <edge-function-name> é o nome da Função Edge do AEM declarada em edgeFunctions.yaml.- O type deve ser selectAemOrigin.- O skipCache está definido como true para ignorar o cache CDN da solicitação.

Para obter mais informações, consulte Seletores de origem. Observe que o arquivo cdn.yaml também oferece suporte a regras de filtro de tráfego, transformação de solicitação e resposta e outros recursos de CDN. Para obter mais informações, consulte Configurando o tráfego na CDN.

Gerenciar configuração da CDN

Mantenha toda a configuração CDN no diretório config/ do projeto de site do AEM, pois o site pode já incluir regras do WAF, filtros de tráfego e outras configurações no cdn.yaml. Isso mantém todas as configurações de CDN em um único local.

Copie edgeFunctions.yaml do projeto do AEM Edge Functions para o diretório config/ do projeto do site do AEM.
Mescle a seção originSelectors do cdn.yaml do projeto do AEM Edge Functions com o cdn.yaml do projeto do site do AEM.

Por exemplo, os arquivos de configuração de CDN no projeto de site WKND têm esta aparência:

Arquivos de configuração de CDN no projeto WKND

Implantar configuração de CDN

Por fim, implante a configuração da CDN no ambiente do AEM as a Cloud Service.

RDE

Para ambientes RDE, execute o seguinte comando na raiz do projeto WKND (ou seu próprio) 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`

Ambiente de desenvolvimento

Para ambientes de Desenvolvimento, confirme os arquivos de configuração e execute o pipeline de configuração no Cloud Manager:

Confirme e envie os arquivos de configuração para o repositório Git do Cloud Manager.
Navegue até Pipelines no Cloud Manager e execute o pipeline de configuração para o seu ambiente.

execução do pipeline de configuração do Cloud Manager

Verifique se a configuração foi implantada com êxito:

$ aio aem edge-functions list

A saída deve listar my-edge-function (ou qualquer nome declarado em edgeFunctions.yaml).

Saída da lista de Funções do AEM Edge

Etapa 7: criar e implantar o projeto do AEM Edge Functions

Crie e implante o projeto AEM Edge Functions usando os seguintes comandos, que usam o contexto armazenado no arquivo .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

O nome passado para deploy deve corresponder ao name declarado em config/edgeFunctions.yaml. Você também deve fazer parte do perfil de produto Administrador do AEM - autor na instância de autor.

Por exemplo, a saída deve ser semelhante à seguinte captura de tela:

Saída de compilação e implantação das Funções Edge do AEM

IMPORTANT

Para implantar o projeto AEM Edge Functions do seu sistema de CI/CD, você precisa do projeto Adobe Developer Console (ADC) para credenciais de API - que inclui o cartão de API da rede de entrega de conteúdo (CDN) da AEM. Consulte Integração do Adobe Developer Console e Configuração de CI/CD para obter mais informações.

Etapa 8: verificar o endpoint

Verifique os pontos de extremidade implantados em um navegador ou com curl:

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

Substitua pXXXXX e eYYYYY pelas IDs de programa e ambiente do Cloud Manager.

Por exemplo, as respostas são semelhantes à seguinte captura de tela:

Respostas do ponto de extremidade ao vivo

NOTE

O domínio edgefunction-pXXXXX-eYYYYY-<edge-function-name>.adobeaemcloud.com está disponível somente para depuração e não há garantias de que seja estável. Na produção, as solicitações atingem a Função Edge do AEM por meio do domínio do site por meio das regras de roteamento CDN em cdn.yaml.

Em cenários reais, use as Funções Edge do AEM para lógica do lado do servidor na CDN e faça uma chamada para elas a partir do seu site pelos caminhos roteados definidos no cdn.yaml. Consulte a documentação do produto AEM Edge Functions para obter a configuração avançada.

Resumo

Você configurou com êxito o AEM Edge Functions no seu ambiente do AEM as a Cloud Service, criou um projeto a partir do modelo padrão, clonou-o, revisou os arquivos do projeto, executou-o localmente, revisou e implantou a configuração de CDN, criou e implantou o projeto e verificou o endpoint.

Recursos adicionais

recommendation-more-help

experience-manager-learn-help-cloud-service