AEM Headless configuração rápida para AEM as a Cloud Service

A configuração rápida do AEM sem periféricos oferece uma abordagem prática do AEM sem periféricos usando conteúdo do projeto de amostra do WKND Site e uma amostra do aplicativo React (um SPA) que consome o conteúdo por meio das APIs do GraphQL do AEM sem periféricos.

Pré-requisitos

Para seguir esta configuração rápida, é necessário:

• Ambiente de sandbox as a Cloud Service AEM (preferencialmente desenvolvimento)
• Acesso ao AEM as a Cloud Service e ao Cloud Manager
  • Administrador AEM acesso ao AEM as a Cloud Service
  • Cloud Manager - Gerenciador de implantação acesso ao Cloud Manager
• As seguintes ferramentas devem ser instaladas localmente:
  • Node.js v18
  • Git
  • Um IDE (por exemplo Código do Microsoft® Visual Studio)

1. Criar um repositório Git do Cloud Manager

Primeiro, crie um repositório Git do Cloud Manager que é usado para implantar o Site WKND. O Site WKND é um projeto de exemplo de site AEM que contém conteúdo (fragmentos de conteúdo) e um endpoint do GraphQL AEM usado pelo aplicativo React da configuração rápida.

Screencast de etapas

1. Navegue até https://my.cloudmanager.adobe.com
2. Selecione o Cloud Manager Programa que contém o ambiente do AEM as a Cloud Service a ser usado para essa configuração rápida
3. Criar um repositório Git para o projeto do Site WKND
   1. Selecionar Repositórios na navegação superior
   2. Selecionar Adicionar repositório na barra de ação superior
   3. Nomeie o novo repositório Git: aem-headless-quick-setup-wknd
      • Os nomes dos repositórios Git devem ser exclusivos por organização Adobe,
   4. Selecionar Salvar e aguarde até que o repositório Git seja inicializado

2. Envie uma amostra do projeto do site WKND para o repositório Git do Cloud Manager

Com o repositório Git do Cloud Manager criado, clone o código-fonte do projeto do Site WKND do GitHub e envie-o para o repositório Git do Cloud Manager. Agora, o Cloud Manager permite acessar e implantar o projeto do Site WKND no ambiente as a Cloud Service AEM.

Screencast de etapas

1. Na linha de comando, clone do GitHub o código-fonte do projeto do site WKND de amostra

   $ mkdir -p ~/Code
   $ cd ~/Code
   $ git clone git@github.com:adobe/aem-guides-wknd.git
   

2. Adicionar o repositório Git do Cloud Manager como remoto

   1. Selecionar Repositórios na navegação superior

   2. Selecionar Acessar informações do repositório na barra de ação superior

   3. Comando Executar encontrado em Adicione um remoto ao seu repositório Git da linha de comando

      $ cd aem-guides-wknd
      $ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/
      

3. Envie o código-fonte do projeto de amostra do seu repositório Git local para o repositório Git do Cloud Manager

   $ git push adobe main:main
   

   Quando solicitado a fornecer credenciais, forneça a Nome de usuário e Senha do Cloud Manager Informações do repositório modal.

3. Implantar o site da WKND no AEM as a Cloud Service

Com o projeto do Site WKND enviado para o repositório Git do Cloud Manager, ele não pode ser implantado no AEM as a Cloud Service usando os pipelines do Cloud Manager.

Lembre-se, o projeto Site WKND fornece conteúdo de amostra que o aplicativo React consome por meio de APIs AEM Headless GraphQL.

Screencast de etapas

1. Anexar um Pipeline de implantação de não produção ao novo repositório Git
   1. Selecionar Pipelines na navegação superior
   2. Selecionar Adicionar pipeline na barra de ação superior
   3. No Configuração guia
      1. Selecionar Pipeline de implantação opção
      2. Defina o Nome do pipeline de não produção para Dev Deployment pipeline
      3. Selecionar Acionador de implantação > Sobre alterações do Git
      4. Selecionar Comportamento de falhas de métricas importantes > Continuar imediatamente
      5. Selecionar Continuar
   4. Na guia Código-fonte
      1. Selecionar Código de pilha completa opção
      2. Selecione o Ambiente de desenvolvimento as a Cloud Service AEM do Ambientes de implantação qualificados caixa selecionar
      3. Selecionar aem-headless-quick-setup-wknd no Repositório caixa selecionar
      4. Selecionar main do Ramificação Git caixa selecionar
      5. Selecione Salvar
2. Execute o Pipeline de implantação de desenvolvimento
   1. Selecionar Visão geral na navegação superior
   2. Localize o recém-criado Pipeline de implantação de desenvolvimento no Pipelines seção
   3. Selecione o … à direita da entrada do pipeline
   4. Selecionar Executar, e confirme no modal
   5. Selecione o … à direita do pipeline em execução
   6. Selecionar Exibir detalhes
3. Nos detalhes de execução do pipeline, monitore o progresso até que ele seja concluído com êxito. A execução do pipeline deve levar entre 30 e 40 minutos.

4. Baixe e execute o aplicativo WKND React

Com o AEM as a Cloud Service inicializado com o conteúdo do projeto do Site WKND, baixe e inicie o aplicativo WKND React de amostra que consome o conteúdo do Site WKND por meio das APIs do AEM Headless GraphQL.

Screencast de etapas

1. Na linha de comando, clone o código-fonte do aplicativo React do GitHub.

   $ cd ~/Code
   $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
   

2. Abrir a pasta ~/Code/aem-guides-wknd-graphql/react-app no IDE.

3. No IDE, abra o arquivo .env.development.

4. Aponte para o AEM as a Cloud Service Publish URI do host do serviço do REACT_APP_HOST_URI propriedade.

   REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
   ...
   

   Para encontrar o URI do host do serviço de publicação do AEM as a Cloud Service:

   1. No Cloud Manager, selecione Ambientes na navegação superior
   2. Selecionar Desenvolvimento ambiente
   3. Localize o Serviço de publicação (AEM e Dispatcher) link Segmentos de ambiente tabela
   4. Copie o endereço do link e use-o como o URI do serviço de publicação as a Cloud Service do AEM

5. No IDE, salve as alterações em .env.development

6. Na linha de comando, execute o aplicativo React

   $ cd ~/Code/aem-guides-wknd-graphql/react-app
   $ npm install
   $ npm start
   

7. O aplicativo React, executado localmente, inicia em http://localhost:3000 e exibe uma lista de aventuras, que são originadas do AEM as a Cloud Service usando as APIs do GraphQL do AEM Headless.

5. Editar conteúdo no AEM

Com a amostra do aplicativo WKND React conectando-se e consumindo conteúdo das APIs AEM Headless do GraphQL, crie conteúdo no serviço de autor do AEM e veja como a experiência do aplicativo React é atualizada em conjunto.

Screencast de etapas

1. Fazer logon no serviço de Autor do AEM as a Cloud Service

2. Navegue até Ativos > Arquivos > Compartilhado com WKND > Inglês > Aventuras

3. Abra o Ciclismo Sul de Utah Pasta

4. Selecione o Ciclismo Sul de Utah Fragmento do conteúdo e selecione Editar na barra de ação superior

5. Atualize alguns campos do Fragmento de conteúdo, por exemplo:

   • Título: Cycling Utah's National Parks
   • Duração do Percurso: 6 Days
   • Dificuldade: Intermediate
   • Preço: 3500
   • Imagem principal: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

6. Selecionar Salvar na barra de ação superior

7. Selecionar Publicação rápida na barra de ação superior …

8. Atualizar o aplicativo React em execução em http://localhost:3000.

9. No aplicativo React, selecione a aventura Ciclismo atualizada e verifique as alterações de conteúdo feitas no fragmento de conteúdo.

10. Usando a mesma abordagem, no serviço de Autor de AEM:

    1. Desfaça a publicação de um fragmento de conteúdo Adventure existente e verifique se ele foi removido da experiência do aplicativo React
    2. Crie e publique um novo Fragmento de conteúdo de aventura e verifique se ele aparece na experiência do aplicativo React
    DICA

    Se você não estiver familiarizado com a criação e publicação de novos fragmentos de conteúdo ou com o cancelamento da publicação de fragmentos de conteúdo existentes, assista ao screencast acima.

Parabéns.

Parabéns! Você usou o AEM Headless com sucesso para alimentar um aplicativo React!

Para entender em detalhes como o aplicativo React consome conteúdo do AEM as a Cloud Service, confira o tutorial AEM Headless. O tutorial explora como os fragmentos de conteúdo no AEM foram criados e como este aplicativo React consome o conteúdo como JSON.

Próximas etapas

• Iniciar o tutorial AEM Headless