Implantações de AEM Headless SPA
As implantações de aplicativo de página única (SPA) do AEM envolvem aplicativos baseados em JavaScript AEM criados com o uso de estruturas como o React ou o Vue, que consomem e interagem com conteúdo no de forma headless.
Implantar um SPA que interage 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 do AEM (ou host) ou em um domínio diferente. O motivo é que o SPA são aplicações Web executadas em navegadores da Web e, portanto, estão sujeitas a políticas de segurança de navegadores da Web.
Domínio compartilhado
Um AEM e SPA 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 AEM e SPA são acessados do mesmo domínio, os navegadores da Web permitem que o SPA faça XHR para o AEM AEM Headless endpoints sem a necessidade do CORS e permitem o compartilhamento de cookies HTTP (como o cookie do login-token).
Como o tráfego de AEM e SPA é 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 AEM.
Domínios diferentes
Um AEM e SPA 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 (cross-origin resource sharing, compartilhamento de recursos entre origens), e impedem o compartilhamento de cookies HTTP (como o cookie AEM login-token).
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 do SPA em diferentes domínios
Neste exemplo, o SPA é implantado em um domínio Netlify (https://main--sparkly-marzipan-b20bf8.netlify.app/) e o SPA consome APIs AEM GraphQL AEM do domínio Publish (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 APIs 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 AEM GraphQL, o
Access-Control-Allow-Originestá presente, indicando ao navegador da web que o AEM permite que a solicitação desse domínio Netlify acesse seu conteúdo.Se o AEM CORS estivesse ausente ou não incluísse o domínio Netlify, o navegador da Web falharia na solicitação XHR e relataria um erro do CORS.
Exemplo de aplicativo de página única
Adobe fornece um exemplo de aplicativo de página única codificado no React.
Um exemplo de aplicativo de página única, escrito no React, que consome conteúdo de APIs AEM Headless GraphQL.
Um aplicativo de página única de exemplo, escrito em Next.js, que consome conteúdo de APIs AEM Headless GraphQL.