Configuração rápida sem cabeçalho AEM para AEM as a Cloud Service

A configuração rápida do AEM Headless leva você com AEM Headless usando o conteúdo do projeto de amostra do WKND Site e uma amostra do React App (a SPA) que consome o conteúdo por meio AEM APIs GraphQL headless.

Pré-requisitos

Os itens a seguir são necessários para seguir esta configuração rápida:

  • AEM ambiente Sandbox as a Cloud Service (de preferência, desenvolvimento)
  • Acesso ao AEM as a Cloud Service e ao Cloud Manager
    • Administrador AEM acesso a AEM as a Cloud Service
    • Cloud Manager - Gerenciador de implantação acesso ao Cloud Manager
  • As seguintes ferramentas devem ser instaladas localmente:

1. Crie um repositório Git do Cloud Manager

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

Screencast de etapas

  1. Navegar para https://my.cloudmanager.adobe.com
  2. Selecione o Cloud Manager Programa que contém o ambiente as a Cloud Service AEM 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 no início da navegação
    2. Selecionar Adicionar Repositório na barra de ação superior
    3. Nomeie o novo repositório Git: aem-headless-quick-setup
    4. Selecionar Salvar e aguarde até que o repositório Git inicialize

2. Encaminhe o projeto de site WKND de amostra 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 para acessar e implantar o projeto do Site WKND no ambiente as a Cloud Service AEM.

Screencast de etapas

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

    $ 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 um repositório remoto

    1. Selecionar Repositórios no início da navegação

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

    3. Execute o comando found em Adicionar um repositório remoto ao repositório Git na linha de comando

      $ cd aem-guides-wknd
      $ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup/
      
  3. Encaminhe 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 master:main
    

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

3. Implante o site WKND para AEM as a Cloud Service

Com o projeto do site WKND enviado ao repositório Git do Cloud Manager, ele não pode ser implantado em AEM as a Cloud Service usando pipelines do Cloud Manager.

Lembre-se, o projeto de site da WKND fornece conteúdo de amostra que o aplicativo React consome AEM APIs GraphQL sem cabeçalho.

Screencast de etapas

  1. Anexar um pipeline de implantação de não produção ao novo repositório Git
    1. Selecionar Pipelines no início da navegação
    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 as Nome do pipeline de não produção para Dev Deployment pipeline
      3. Selecionar Acionador De Implantação > Em Alterações No Git
      4. Selecionar Comportamento de falhas importantes da métrica > Continuar imediatamente
      5. Selecionar Continuar
    4. No Código fonte guia
      1. Selecionar Código de pilha completo opção
      2. Selecione o Ambiente de desenvolvimento as a Cloud Service AEM do Ambientes de implantação qualificados caixa de seleção
      3. Selecionar aem-headless-quick-setup no Repositório caixa de seleção
      4. Selecionar main do Ramificação Git caixa de seleção
      5. Selecione Salvar
  2. Execute o Pipeline de implantação de desenvolvimento
    1. Selecionar Visão geral no início da navegação
    2. Localize os pipeline de implantação de desenvolvimento no Pipelines seção
    3. Selecione o à direita da entrada do pipeline
    4. Selecionar Executar e confirmar no modal
    5. Selecione o à direita do pipeline que está em execução
    6. Selecionar Exibir detalhes
  3. A partir dos detalhes da execução do pipeline, monitore o progresso até que ele seja concluído com êxito. A execução do pipeline deve levar de 45 a 60 minutos.

4. Baixe e execute o aplicativo WKND React

Com AEM inicialização as a Cloud Service 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 sobre AEM APIs GraphQL sem interface.

Screencast de etapas

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

    $ cd ~/Code
    $ git clone --branch tutorial/react git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Abra a pasta ~/Code/aem-guides-wknd-graphql no IDE.

  3. No IDE, abra o arquivo react-app/.env.development.

  4. Aponte para o AEM as a Cloud Service Publicar 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 de host do serviço de Publicação as a Cloud Service AEM:

    1. No Cloud Manager, selecione Ambientes no início da navegação
    2. Selecionar Desenvolvimento ambiente
    3. Localize a variável Serviço de publicação (AEM e Dispatcher) link Segmentos do ambiente tabela
    4. Copie o endereço do link e use-o como URI do serviço de publicação as a Cloud Service 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, começa em http://localhost:3000 e exibe uma lista de aventuras, que são provenientes de AEM as a Cloud Service usando APIs GraphQL sem periféricos AEM.

5. Editar conteúdo no AEM

Com o exemplo de aplicativo WKND React se conectando e consumindo conteúdo das APIs GraphQL sem cabeçalho do AEM, crie conteúdo no serviço AEM Author e veja como a experiência do aplicativo React é atualizada em conjunto.

Screencast de etapas

  1. Faça logon AEM serviço de criação as a Cloud Service

  2. Navegar para Ativos > Arquivos > WKND > Inglês > Aventuras

  3. Abra o Cycling Southern Utah Pasta

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

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

    • Título: Cycling Utah's National Parks
    • Extensão do Percurso: 6 Days
    • Dificuldade: Intermediate
    • Preço: $3500
    • Imagem principal: /content/dam/wknd/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. Atualize o aplicativo React em execução em http://localhost:3000.

  9. No aplicativo React, selecione o atualizado e verifique as alterações de conteúdo feitas no Fragmento de conteúdo.

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

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

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

Parabéns!

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

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

Próximas etapas

Nesta página