DocumentaçãoAEMTutoriais do AEMTutoriais WKND do AEM Sites

Implantar com o pipeline de front-end

Last update: Fri Oct 17 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Aplica-se a:
  • Experience Manager as a Cloud Service

Criado para:

  • Intermediário
  • Desenvolvedor
  • Administrador

Neste capítulo, vamos criar e executar um pipeline de front-end no Adobe Cloud Manager. Ele só reúne os arquivos do módulo ui.frontend e os implanta na CDN integrada no AEM as a Cloud Service. Assim, ele se distancia da entrega de recursos de front-end baseada em /etc.clientlibs.

Objetivos objectives

  • Crie e execute um pipeline de front-end.
  • Certifique-se de que os recursos de front-end NÃO sejam entregues a partir de /etc.clientlibs, mas de um novo nome de host que comece com https://static-

Usar o pipeline de front-end

https://video.tv.adobe.com/v/3409420?quality=12&learn=on

Pré-requisitos prerequisites

Este é um tutorial em várias partes, e presume-se que as etapas descritas em Atualizar um projeto padrão do AEM tenham sido concluídas.

Verifique se você tem privilégios para criar e implantar pipelines no Cloud Manager, bem como acesso a um ambiente do AEM as a Cloud Service.

Renomear pipeline existente

Renomeie o pipeline existente de Implantação para desenvolvimento para Implantação de pilha completa da WKND para desenvolvimento, acessando o campo Nome do pipeline de não produção da guia Configuração. Isso serve para explicitar se um pipeline é de pilha completa ou de front-end com base em seu nome.

Renomear pipeline

Além disso, na guia Código-fonte, verifique se os valores de campo do repositório e da ramificação do Git estão corretos, e se a ramificação reflete as suas alterações de contrato de pipeline de front-end.

Pipeline de configuração do código-fonte

Criar um pipeline de front-end

Para SOMENTE compilar e implantar os recursos de front-end do módulo ui.frontend, execute as seguintes etapas:

  1. Na interface do usuário do Cloud Manager, na seção Pipelines, clique no botão Adicionar e selecione Adicionar pipeline de não produção (ou Adicionar pipeline de produção) com base no ambiente do AEM as a Cloud Service no qual você deseja implantar.

  2. Na caixa de diálogo Adicionar pipeline de não produção, como parte das etapas Configuração, selecione a opção Pipeline de implantação, nomeie-a como Implantação de front-end da WKND para desenvolvimento e clique em Continuar

Criar configurações do pipeline de front-end

  1. Como parte das etapas do Código-fonte, selecione a opção Código de front-end e escolha o ambiente em Ambientes de implantação qualificados. Na seção Código-fonte, verifique se os valores dos campos de repositório e ramificação do Git estão corretos, e se a ramificação reflete as suas alterações no contrato do pipeline de front-end.
    E, acima de tudo, no campo Localização do código, o valor deve ser /ui.frontend; por fim, clique em Salvar.

Criar código-fonte do pipeline de front-end

Sequência de implantação

  • Primeiro, execute o pipeline Implantação de pilha completa da WKND para desenvolvimento recém-renomeado para remover os arquivos de clientlibs da WKND do repositório do AEM. E, acima de tudo, prepare o AEM para o contrato de pipeline de front-end, adicionando arquivos de configuração do Sling (SiteConfig, HtmlPageItemsConfig).

Site da WKND não estilizado

WARNING
Após a conclusão do pipeline de pilha completa da WKND para desenvolvimento, você terá um site da WKND não estilizado que pode parecer corrompido. Planeje uma interrupção ou implante durante horas ímpares. Essa é uma interrupção única que você precisa planejar durante a ativação inicial, desde usar um pipeline de pilha completa única até o pipeline de front-end.
  • Finalmente, execute a Implantação de front-end da WKND para desenvolvimento para compilar somente o módulo ui.frontend e implantar os recursos de front-end diretamente na CDN.
IMPORTANT
Você notará que o site da WKND estilizado voltou ao normal, e, desta vez, a execução do pipeline de front-end foi muito mais rápida que a do pipeline de pilha completa.

Verificar alterações de estilo e novo paradigma de entrega

  • Abra qualquer página do site da WKND, e você verá a cor do texto em vermelho da Adobe, e os arquivos de recursos de front-end (CSS, JS) serão entregues pela CDN. O nome de host da solicitação de recurso começa com https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css e também com o site.js ou qualquer outro recurso estático que você tenha referenciado no arquivo HtmlPageItemsConfig.

Site da WKND recém-estilizado

TIP
O $HASH_VALUE$ aqui é o mesmo que você vê no campo CONTENT HASH da Implantação do pipeline de front-end da WKND para desenvolvimento. O AEM é notificado do URL da CDN do recurso de front-end; o valor é armazenado em /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content, na propriedade prefixPath.

Correlação de valor de hash

Parabéns! congratulations

Parabéns, você criou, executou e verificou o pipeline de front-end, que só compila e implanta o módulo “ui.frontend” do projeto do site da WKND. Agora, a sua equipe de front-end pode iterar rapidamente o design do site e o comportamento do front-end, fora do ciclo de vida completo do projeto do AEM.

Próximas etapas next-steps

No próximo capítulo, Considerações, você analisará o impacto no processo de desenvolvimento de front-end e back-end.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9