Configurar o seu pipeline

Crie um pipeline de front-end para gerenciar a personalização do tema do seu site.

A história até agora

No documento anterior da jornada de Criação rápida de sites do AEM, Criar site a partir de modelo, você aprendeu a usar um modelo de site para criar rapidamente um site do AEM que pode ser personalizado ainda mais com ferramentas de front-end; agora, você deve:

  • Entenda como obter modelos de site do AEM.
  • Saiba como criar um novo site usando um modelo.
  • Veja como baixar o modelo do seu novo site para fornecer ao desenvolvedor de front-end.

Este artigo desenvolve esses fundamentos para que você possa configurar um pipeline de front-end, que o desenvolvedor de front-end usará posteriormente na jornada para implantar personalizações de front-end.

Objetivo

Este documento ajuda você a entender os pipelines de front-end e como criar um para gerenciar a implantação do tema personalizado do site. Depois de ler esse documento, você deverá:

  • Entender o que é um pipeline de front-end.
  • Saber como configurar um pipeline de front-end no Cloud Manager.

Função de responsabilidade

Essa parte da jornada se aplica ao administrador do Cloud Manager.

Requisitos

  • É necessário ter acesso ao Cloud Manager.
  • É necessário ser um membro da função Gerenciador de implantação no Cloud Manager.
  • Um repositório Git para o ambiente do AEM deve ser configurado no Cloud Manager.
    • Geralmente, isso já acontece em qualquer projeto ativo. No entanto, se não estiver, consulte a documentação dos Repositórios do Cloud Manager, disponível na seção Recursos adicionais.

O que é um pipeline de front-end

O desenvolvimento de front-end envolve personalização de JavaScript, CSS e recursos estáticos que definem o estilo do site do AEM. O desenvolvedor de front-end trabalhará no ambiente local dele para fazer essas personalizações. Quando prontas, as alterações são confirmadas no repositório Git do AEM. Mas elas são confirmadas apenas para o código-fonte. Elas ainda não estão ativas.

O pipeline de front-end pega essas personalizações confirmadas e as implanta em um ambiente do AEM, geralmente em ambientes de produção ou não.

Dessa forma, o desenvolvimento de front-end pode funcionar separadamente e em paralelo a qualquer desenvolvimento de back-end de pilha completa no AEM, que tem seus próprios pipelines de implantação.

OBSERVAÇÃO

Os pipelines de front-end só podem implantar JavaScript, CSS e recursos estáticos para desenvolver o estilo do site do AEM. O conteúdo do site, como páginas ou ativos, não pode ser implantado em um pipeline.

Acessar o Cloud Manager

  1. Faça logon no Adobe Cloud Manager em my.cloudmanager.adobe.com.

  2. O Cloud Manager lista os vários programas disponíveis. Toque ou clique naquele que deseja gerenciar. Se você estiver apenas começando no AEM as a Cloud Service, provavelmente terá apenas um programa disponível.

    Seleção de um programa no Cloud Manager

Você está vendo uma visão geral do seu programa. Sua página será diferente, mas semelhante a este exemplo.

Visão geral do Cloud Manager

Observe o nome do programa que você acessou ou copie o URL. Você precisará fornecê-lo ao desenvolvedor de front-end posteriormente.

Criar um pipeline de front-end

Agora que você acessou o Cloud Manager, é possível criar um pipeline para implantação de front-end.

  1. Na seção Pipelines da página do Cloud Manager, toque ou clique no botão Adicionar.

    Pipelines

  2. No menu pop-up exibido abaixo do botão Adicionar, selecione Adicionar pipeline de não produção para os fins desta jornada.

  3. Na guia Configuração da caixa de diálogo Adicionar pipeline de não produção que é aberta:

    • Selecione Pipeline de implantação.
    • Forneça um nome ao pipeline no campo Nome do pipeline de não produção.

    Adicionar configuração de pipeline

  4. Toque ou clique em Continuar.

  5. Na guia Código-fonte:

    • Selecione Código de front-end como o tipo de código a ser implantado.
    • Verifique se o ambiente correto está selecionado em Ambientes de implantação qualificados.
    • Selecione o Repositório correto.
    • Defina a qual Ramificação Git o pipeline deve ser associado.
    • Defina a Localização do código se o desenvolvimento de front-end estiver localizado em um caminho específico no repositório selecionado. O valor padrão é a raiz do repositório, mas com frequência o desenvolvimento de front-end e back-end estarão em caminhos diferentes.

    Informações do código-fonte para adicionar pipeline

  6. Toque ou clique em Salvar.

O novo pipeline é criado e fica visível na seção Pipelines da janela do Cloud Manager. Tocar ou clicar nas reticências depois do nome do pipeline revela opções para editar ou exibir mais detalhes, conforme necessário.

Opções de pipeline

DICA

Se você já estiver familiarizado com pipelines no AEMaaCS e quiser saber mais sobre as diferenças entre os tipos de pipelines, incluindo mais detalhes sobre o pipeline de front-end, consulte Configurar pipeline de CI/CD - Serviços em nuvem, cujo link encontra-se na seção Recursos adicionais abaixo.

O que vem a seguir

Agora que concluiu esta parte da jornada de Criação rápida de sites do AEM, você deve:

  • Entender o que é um pipeline de front-end.
  • Saber como configurar um pipeline de front-end no Cloud Manager.

Desenvolva esse conhecimento e prossiga na sua jornada de Criação rápida de sites do AEM, revisando a seguir o documento Conceder acesso ao desenvolvedor de front-end, onde você integrará os desenvolvedores de front-end no Cloud Manager para que eles tenham acesso ao seu repositório e pipeline de Git do site do AEM.

Recursos adicionais

Embora seja recomendável seguir para a próxima parte da jornada de Criação rápida de sites revisando o documento Personalizar o tema do site, a seguir estão alguns recursos adicionais e opcionais que aprofundam alguns conceitos mencionados neste documento, mas não são necessários para continuar na jornada.

Nesta página