Implantar usando o pipeline de front-end

Neste capítulo, criamos e executamos um pipeline de front-end no Adobe Cloud Manager. Ele só cria os arquivos de ui.frontend e os implanta no CDN incorporado no AEM as a Cloud Service. Assim, afastando-se da /etc.clientlibs com base na entrega de recursos de front-end.

Objetivos objectives

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

Uso do pipeline de front-end

Pré-requisitos prerequisites

Este é um tutorial em várias partes e presume-se que as etapas descritas no 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 as a Cloud Service do AEM.

Renomear pipeline existente

Renomear o pipeline existente de Implantar para desenvolvimento para Implantação do FullStack WKND no Desenvolvimento acessando o Configuração da guia Nome do pipeline de não produção campo. Isso é para tornar explícito se um pipeline é de pilha completa ou front-end apenas observando seu nome.

Renomear pipeline

Também no Código-fonte , verifique se os valores de campo Repositório e 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 do código-fonte

Criar um pipeline de front-end

Para SOMENTE criar e implantar os recursos de front-end a partir do ui.frontend , execute as seguintes etapas:

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

  2. No Adicionar pipeline de não produção como parte da Configuração , selecione a Pipeline de implantação opção, nomeie-a como Implantação WKND de FrontEnd para Desenvolvimento e clique em Continuar

Criar configurações de pipeline front-end

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

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

Sequência de implantação

  • Primeiro execute o recém-renomeado Implantação do FullStack WKND no Desenvolvimento pipeline 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 Configuração do Sling arquivos (SiteConfig, HtmlPageItemsConfig).

Site WKND sem estilo

WARNING
Depois, a variável Implantação do FullStack WKND no Desenvolvimento conclusão do pipeline, você terá um sem estilo Site da WKND, 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.
  • Por fim, execute o Implantação WKND de FrontEnd para Desenvolvimento pipeline somente para compilação ui.frontend e implante os recursos de front-end diretamente na CDN.
IMPORTANT
Você percebe que a variável sem estilo O site da WKND voltou ao normal e desta vez FrontEnd a execução do pipeline 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 o texto e colorir Adobe Vermelho e os arquivos de recursos de front-end (CSS, JS) sã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 o site.js ou qualquer outro recurso estático que você referenciou na variável HtmlPageItemsConfig arquivo.

Site WKND recém-estilizado

TIP
A variável $HASH_VALUE$ aqui é o mesmo que você vê no Implantação WKND de FrontEnd para Desenvolvimento do pipeline HASH DE CONTEÚDO campo. O AEM é notificado do URL CDN do recurso front-end, o valor é armazenado em /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content em prefixPath propriedade.

Correlação do 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