Implantar usando o pipeline de front-end
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 comhttps://static-
Uso do pipeline de front-end
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.
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.
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:
-
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.
-
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
- 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.frontende, por fim, clique em Salvar.
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).
- Finalmente, execute a Implantação do WKND de FrontEnd no pipeline de Desenvolvimento para compilar somente o módulo
ui.frontende implantar os recursos de front-end diretamente no CDN.
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.csse também com o site.js ou qualquer outro recurso estático que você referenciou no arquivoHtmlPageItemsConfig.
$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.
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.