Implantar e verificar

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.

Nossa meta é criar um bloco dinâmico do Edge Delivery Services que chame uma Função AEM Edge para buscar dados dinâmicos de uma API de terceiros.

A quarta e última etapa é implantar ambos os projetos no site de Desenvolvimento e confirmar se todo o fluxo funciona de ponta a ponta, não apenas localmente. O bloco Edge Delivery Services e a função Edge do AEM ficam em dois repositórios separados, para que sejam promovidos por meio de duas PRs separadas. Revise primeiro a estratégia de implantação do AEM Edge Function no Edge Delivery Services. Ele aborda como uma função do AEM Edge se vincula a um site e uma ramificação e como os segredos são definidos por site. Esta página é a sequência concreta das duas ramificações deste tutorial.

Gerar e mesclar ambas as PRs

  1. No projeto do AEM Edge Functions, gere uma PR de estimated-delivery (ou ramificação criada) na ramificação dev. No meu caso, consulte myfrescopa-edge-functions project PR
  2. No projeto do site do Edge Delivery Services, gere uma PR de estimated-delivery (ou ramificação criada) na ramificação dev. No meu caso, consulte Projeto de sites Frescopa PR
  3. Revise e mescle ambos.

As duas PRs são independentes. A ordem de mesclagem não importa para revisão, mas a Função AEM Edge precisa ser implantada antes que as chamadas do bloco Edge Delivery Services sejam bem-sucedidas no site implantado, já que o bloco simplesmente chama um caminho e depende da rota CDN já apontando para o código de trabalho.

Publicar a página em tempo real

Publicar para visualização, voltar a enviar código e criar o bloco, disponibiliza o conteúdo criado para aem up e para o host CDN de Visualização. O tráfego ativo no domínio do site de Desenvolvimento precisa da mesma página publicada no Live. No AEM Sites, abra a página e publique no Live da mesma forma que você publicou na Pré-visualização anteriormente.

Adicionar segredos ao pipeline de configuração

As chamadas upstream zombadas leem de CATALOG_API_TOKEN e DELIVERY_API_TOKEN até SecretStoreManager.getSecret(), mesmo que o tutorial ainda não use os valores de uma chamada real. Declarar ambos como segredos em config/edgeFunctions.yaml, referenciando variáveis de pipeline da Cloud Manager prefixadas por site, após Usar configurações e segredos com Funções Edge. Adicione as variáveis correspondentes no Cloud Manager antes de executar o pipeline na próxima etapa.

Adicionar segredos ao pipeline de configuração

Implantar a configuração da CDN e a função do AEM Edge

Depois que a ramificação dev do projeto do AEM Edge Functions tiver as alterações mescladas, implante a configuração do CDN primeiro, depois a própria AEM Edge Function.

Executar o pipeline de configuração

Execute o pipeline de configuração do Edge Delivery no Cloud Manager, após Revisar e implantar a configuração da CDN (confirme os pontos de etapa do Código Source do pipeline na sua ramificação dev, não main, portanto, ele extrai a configuração que você acabou de mesclar). Como cdn.yaml e edgeFunctions.yaml foram alterados, isso envia a nova regra de seletor de origem e resolve as referências secretas adicionadas na etapa anterior.

Executar o pipeline de configuração do Edge Delivery no Cloud Manager

Criar e implantar a função Edge do AEM

Depois que o pipeline for bem-sucedido, compile e implante a própria função, seguindo Criar e implantar o projeto do AEM Edge Functions:

$ cd myfrescopa-edge-functions
$ git checkout dev && git pull

# Confirm the CLI context targets the Dev site
$ aio aem edge-functions info

informações de aem edge-functions confirmando o domínio do site de Desenvolvimento

Confirme se Site Domain corresponde ao seu site de Desenvolvimento, por exemplo dev-myfrescopa.enablementadobe.com, antes de compilar e implantar.

$ aio aem edge-functions build
$ aio aem edge-functions deploy my-edge-function
NOTE
Este tutorial é implantado a partir da CLI para que as etapas permaneçam visíveis. Para um projeto real, implante por meio do CI/CD, para que cada implantação seja executada da mesma maneira, independentemente de quem o aciona.

Verificar o ponto de extremidade

Confirme se a AEM Edge Function responde diretamente primeiro:

$ curl "https://dev-myfrescopa.enablementadobe.com/api/frescopa/estimated-delivery?sku=house-blend-medium-roast&postcode=90210"

Em seguida, abra o site e utilize o próprio bloco do Edge Delivery Services:

https://dev-myfrescopa.enablementadobe.com/dev/branches/estimated-delivery

Envie o formulário e confirme se o resultado é renderizado com dados em tempo real da AEM Edge Function implantada, não com a resposta local que você viu em Conecte o bloco à AEM Edge Function.

Abra a guia Rede DevTools do navegador e confirme se o URL da solicitação é o domínio do próprio site, não o domínio de depuração bruto da Função AEM Edge. Isso confirma que o seletor de origem CDN está roteando o caminho relativo de mesma origem, exatamente como Escolher a URL correta para o ambiente descrito.

Guia Rede mostrando a solicitação de entrega estimada roteada de mesma origem pela CDN

Se a solicitação falhar aqui, mas funcionar localmente, verifique primeiro a regra do seletor de origem CDN (caminho originName e se o pipeline realmente foi executado) e, em seguida, a saída de compilação e implantação da Função AEM Edge para erros.

Promover mais

Para mover este recurso de dev para stage e main, repita a sequência de mesclagem, implantação e verificação para cada site, seguindo Promover código pelos seus sites.

Resumo

Você implementou um manipulador da Função AEM Edge que mescla duas chamadas upstream, criou um bloco Edge Delivery Services que o chama, conectou os dois com o CORS e a alternância de URL com reconhecimento de ambiente e implantou ambos em um site ativo.

Recursos adicionais

recommendation-more-help
experience-manager-learn-help-cloud-service