DocumentaçãoAEMTutoriais do AEMTutorials do WKND AEM Sites

Implantar usando o pipeline de front-end

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined
  • undefined

Neste capítulo, criamos e executamos um pipeline de front-end no Adobe Cloud Manager. Ele só compila os arquivos do módulo ui.frontend e os implanta no CDN incorporado no AEM as a Cloud Service. Afastando-se assim da entrega de recursos de front-end baseada em /etc.clientlibs.

Objetivos objectives

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

Uso do 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 projeto AEM padrão foram concluídas.

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

Renomear pipeline existente

Renomeie o pipeline existente de Implantar em Desenvolvimento para Implantação WKND de Empilhamento Completo em Desenvolvimento indo para o campo Nome do Pipeline de Não Produção da guia Configuração. Isso é para tornar explícito se um pipeline é de pilha completa ou front-end apenas observando seu nome.

Renomear Pipeline

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

Pipeline de configuração de código Source

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 WKND FrontEnd para Desenvolvimento e clique em Continuar

Criar Configurações De Pipeline De Front-End

  1. Como parte das etapas Código Source, selecione a opção Código de front-end e escolha o ambiente em Ambientes de implantação qualificados. Na seção Código Source, verifique se os valores dos campos Repositório e Ramificação Git estão corretos e se a ramificação tem suas alterações no contrato do pipeline de front-end.
    E o mais importante para o campo Localização do Código, o valor é /ui.frontend e, por fim, clique em Salvar.

Criar código Source do pipeline de front-end

Sequência de implantação

  • Primeiro execute o pipeline FullStack WKND Deploy to Dev recém-renomeado para remover os arquivos clientlib WKND do repositório AEM. E, o mais importante, prepare o AEM para o contrato de pipeline de front-end adicionando arquivos de configuração do Sling (SiteConfig, HtmlPageItemsConfig).

Site WKND Sem Estilo

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

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

  • Abra qualquer página do Site WKND e você poderá ver a cor do texto usando Adobe Vermelho e os arquivos de recursos de front-end (CSS, JS) são entregues a partir do 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ê referenciou no arquivo HtmlPageItemsConfig.

Site WKND Recém-Estilizado

TIP
O $HASH_VALUE$ aqui é o mesmo que você vê no campo CONTENT HASH da Implantação WKND de FrontEnd no pipeline de Desenvolvimento. O AEM é notificado da URL CDN do recurso 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ó cria e implanta o módulo "ui.frontend" do projeto do WKND Sites. Agora, sua equipe de front-end pode iterar rapidamente sobre o design do site e o comportamento de front-end, fora do ciclo de vida completo do projeto AEM.

Próximas etapas next-steps

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

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