Implantações de SPA do AEM Headless
- Aplica-se a:
- Experience Manager as a Cloud Service
Criado para:
- Intermediário
- Desenvolvedor
As implantações de aplicativo de página única (SPA) do AEM Headless envolvem aplicativos do JavaScript criados com o uso de estruturas como o React ou o Vue, que consomem e interagem com conteúdo no AEM de forma headless.
A implantação de um SPA que interage com o AEM de forma headless envolve hospedar o SPA e torná-lo acessível por meio de um navegador da Web.
Hospede o SPA
Um SPA é composto de uma coleção de recursos nativos da Web: HTML, CSS e JavaScript. Esses recursos são gerados durante o processo de compilação (por exemplo, npm run build) e implantados em um host para consumo pelos usuários finais.
Há várias opções de hospedagem dependendo das necessidades da sua organização:
-
Provedores de nuvem, como Azure ou AWS.
-
Hospedagem no local em um data center corporativo
-
Plataformas de hospedagem front-end, como AWS Amplify, Azure App Service, Netlify, Heroku, Vercel etc.
Configurações de implantação
A principal consideração ao hospedar um SPA que interage com o AEM headless é se o SPA é acessado por meio do domínio (ou host) do AEM ou em um domínio diferente. O motivo é que os SPAs são aplicativos da Web em execução em navegadores da Web e, portanto, estão sujeitos às políticas de segurança dos navegadores da Web.
Domínio compartilhado
Um SPA e o AEM compartilham domínios quando ambos são acessados por usuários finais do mesmo domínio. Por exemplo:
- AEM acessado via:
https://wknd.site/ - SPA acessado via
https://wknd.site/spa
Como o AEM e o SPA são acessados do mesmo domínio, os navegadores da Web permitem que o SPA faça XHR nos pontos de extremidade headless do AEM sem a necessidade do CORS e permitem o compartilhamento de cookies HTTP (como o cookie login-token do AEM).
Como o tráfego de SPA e AEM é roteado no domínio compartilhado depende de você: CDN com várias origens, servidor HTTP com proxy reverso, hospedagem do SPA diretamente no AEM e assim por diante.
Abaixo estão as configurações de implantação necessárias para implantações de produção de SPA, quando hospedadas no mesmo domínio que o AEM.
Domínios diferentes
Um SPA e o AEM têm domínios diferentes quando são acessados por usuários finais de um domínio diferente. Por exemplo:
- AEM acessado via:
https://wknd.site/ - SPA acessado via
https://wknd-app.site/
Como o AEM e o SPA são acessados de domínios diferentes, os navegadores da Web impõem políticas de segurança, como o CORS (compartilhamento de recursos entre origens), e impedem o compartilhamento de cookies HTTP (como o cookie login-token do AEM).
Abaixo estão as configurações de implantação necessárias para implantações de produção de SPA, quando hospedadas em um domínio diferente do AEM.
Exemplo de implantação de SPA em domínios diferentes
Neste exemplo, o SPA é implantado em um domínio Netlify (https://main--sparkly-marzipan-b20bf8.netlify.app/) e o SPA consome APIs AEM GraphQL do domínio de publicação AEM (https://publish-p65804-e666805.adobeaemcloud.com). As capturas de tela abaixo destacam o requisito do CORS.
-
O SPA é disponibilizado a partir de um domínio Netlify, mas faz uma chamada XHR para as APIs do AEM GraphQL em um domínio diferente. Esta solicitação entre sites requer que o CORS seja configurado no AEM para permitir que a solicitação do domínio Netlify acesse seu conteúdo.
-
Inspecionando a solicitação XHR para a API GraphQL do AEM, o
Access-Control-Allow-Originestá presente, indicando ao navegador da Web que o AEM permite que a solicitação deste domínio Netlify acesse seu conteúdo.Se o AEM CORS estiver ausente ou não incluir o domínio Netlify, o navegador da Web falhará a solicitação XHR e relatará um erro do CORS.
Exemplo de aplicativo de página única
O Adobe fornece um exemplo de aplicativo de página única codificado no React.
Aplicativo React - Exemplo do AEM Headless
Os exemplos de aplicativos são uma ótima maneira de conhecer os recursos sem cabeçalho do Adobe Experience Manager (AEM). Este aplicativo React demonstra como consultar conteúdo usando as APIs GraphQL do AEM usando consultas persistentes.