Habilitar o pipeline de front-end enable-front-end-pipeline

Saiba como você pode ativar o pipeline de front-end para sites existentes a fim de usar temas de site para personalizar seu site mais rapidamente.

Visão geral overview

O pipeline de front-end é um mecanismo que pode implantar rapidamente apenas o código front-end de seus sites, com base em temas de site e modelos de site.

Esse pipeline lida somente com o código front-end, tornando o processo de implantação mais rápido do que as implantações de pilha completa. Ele permite que desenvolvedores de front-end personalizem seu site facilmente, sem precisar de conhecimento sobre o AEM.

Sites baseados em modelos de site podem usar o pipeline de front-end por padrão. Este documento descreve como você pode adaptar seus sites existentes para aproveitar o pipeline de front-end.

TIP
Se você não estiver familiarizado com o pipeline de front-end e não souber como implantar sites rapidamente usando ele e os modelos de site, consulte a Jornada de Criação Rápida de Sites para obter uma introdução.

O AEM pode configurar seu site para carregar temas implantados com o pipeline de front-end, mesmo que ele não tenha sido criado usando modelos de site e temas, criando camadas sobre as bibliotecas de clientes existentes.

Detalhes técnicos technical-details

Quando você ativa o pipeline de front-end para um site, o AEM faz as seguintes alterações na estrutura do site.

  • Todas as páginas do site incluem um arquivo CSS e JS adicional, que pode ser modificado ao implantar atualizações por meio de um pipeline de front-end dedicado do Cloud Manager.
  • Os arquivos CSS e JS adicionados estão inicialmente vazios. No entanto, você pode baixar uma pasta de "fontes de tema" para configurar a estrutura de pastas necessária para implantar atualizações de código CSS e JS por meio do pipeline.
  • Somente um desenvolvedor pode desfazer a alteração, excluindo os nós SiteConfig e HtmlPageItemsConfig que esta operação cria abaixo de /conf/<site-name>/sling:configs.
NOTE
Essa ação não converte automaticamente as bibliotecas de clientes existentes do site para usar o pipeline de front-end. Mover essas fontes da pasta da biblioteca do cliente para a pasta do pipeline de front-end é uma tarefa que requer o trabalho manual de um desenvolvedor front-end.

Requisitos requirements

O AEM pode adaptar automaticamente seu site existente para usar o pipeline de front-end. Para fazer esse fluxo de trabalho, seu site deve usar v2 ou mais recente do Componente de Página dos Componentes Principais.

Ativação do pipeline de front-end enabling

IMPORTANT
Se você usar ou pretende usar o pipeline de front-end para desenvolver sites, a Lista de permissões de IP do Cloud Manager deverá ser adicionada com antecedência.
Consulte Uso da Lista de permissões IP do Cloud Manager com o pipeline de front-end.

A habilitação do site é feita pelo console de Sites, usando o painel Site.

  1. Faça logon no AEM e navegue até o site através de Navegação global > Sites.

  2. Selecione seu site no console. Selecione a raiz do site e não qualquer página secundária.

  3. Com seu site selecionado, abra o seletor de painéis à esquerda e escolha Site.

  4. No painel Site, clique no botão Ativar pipeline de front-end.

    Ativar pipeline de front-end

  5. A AEM solicita sua confirmação com uma visão geral das alterações feitas. Confirme e o site estará adaptado.

Agora, seu site está pronto para usar o pipeline de front-end. Para saber mais sobre o pipeline de front-end e gerenciar o tema do site, consulte:

Pipeline de front-end e domínios personalizados custom-domains

O pipeline de front-end pode ser usado com o recurso de domínios personalizados do Cloud Manager, mas esteja ciente dos seguintes requisitos ao usar os dois recursos juntos.

Arquivos de front-end estáticos static-files

Os ativos estáticos de front-end implantados por meio do pipeline de front-end serão, por padrão, atendidos a partir do domínio estático predefinido da Adobe.

Se você precisar de um domínio personalizado para ativos front-end, poderá instalar um domínio personalizado no nível de publicação e configurar o Dispatcher para rotear caminhos específicos (como /static/) para o local de hospedagem estática do Adobe. Este método requer a atualização das regras do Dispatcher para encaminhar e armazenar em cache corretamente as solicitações de ativos estáticos.

Depois de configurar o domínio e o dispatcher personalizados, você pode configurar o AEM para distribuir os ativos de front-end a partir do domínio estático.

Configuração configuration

Conforme descrito na seção Detalhes Técnicos, ativar o recurso de Pipeline de Front-End para um site cria um SiteConfig e HtmlPageItemsConfig nós abaixo de /conf/<site-name>/sling:configs.

Se você quiser usar o recurso de domínios personalizados do Cloud Manager para seu site junto com o pipeline de front-end para ativos de status, propriedades adicionais deverão ser adicionadas a esses nós.

  1. Defina a propriedade customFrontendPrefix em SiteConfig para o site.

    1. Vá até /conf/<site-name>/sling:configs/com.adobe.aem.wcm.site.manager.config.SiteConfig.
    2. Adicionar ou atualizar a propriedade customFrontendPrefix = "https://your-custom-domain.com/static/".
  2. Isso atualiza o valor prefixPath de HtmlPageItemsConfig com o domínio personalizado.

    1. Vá até /conf/<site-name>/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig.

    2. Verifique se prefixPath reflete seu domínio personalizado, como prefixPath = "https://your-custom-domain.com/static/<hash>/...".

    • Esse valor também pode ser substituído manualmente, conforme necessário.
  3. Verifique sua configuração.

    1. Após a implantação, verifique se as páginas estão referenciando corretamente artefatos de tema do domínio personalizado.
    2. Abra as ferramentas de desenvolvedor do seu navegador e inspecione os caminhos de arquivo theme.css e theme.js para confirmar se eles foram carregados do domínio correto.

As páginas para o site fazem referência a artefatos de tema desse URL atualizado. O dispatcher encaminha solicitações desses recursos para o domínio estático.

Práticas recomendadas para desenvolvedores de front-end best-practices

Se você precisar desenvolver e testar os ativos de front-end localmente antes de implantar por meio do pipeline de front-end, considere as seguintes abordagens:

  • Use o Modo Proxy do Construtor de Temas do Site para substituir artefatos de tema localmente para teste.
  • Exiba manualmente seus arquivos de tema de um servidor de desenvolvimento local e atualize o prefixPath no HtmlPageItemsConfig para corresponder ao endereço do servidor local.
  • Verifique se o cache do navegador está desativado durante o teste para ver as atualizações em tempo real.

Para obter mais detalhes sobre o desenvolvimento de front-end local, consulte a documentação do Criador de temas do site.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab