Implantações de AEM Headless SPA
As implantações do aplicativo AEM headless de página única (SPA) envolvem aplicativos baseados em JavaScript criados usando estruturas como o React ou o Vue, que consomem e interagem com conteúdo no AEM 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 build processo (por exemplo, npm run build
) e implantada em um host para consumo pelos usuários finais.
Existem vários hospedagem dependendo das necessidades da sua organização:
-
Provedores de nuvem como Azure ou AWS.
-
No local hospedagem em uma empresa data center
-
Plataformas de hospedagem front-end como AWS Amplify, Serviço de aplicativo do Azure, 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 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:
- O AEM é acessado via:
https://wknd.site/
- O 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 para o AEM AEM Headless endpoints sem a necessidade do CORS e permitem o compartilhamento de cookies HTTP (como o login-token
cookie).
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:
- O AEM é acessado via:
https://wknd.site/
- O 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 Compartilhamento de recursos entre origens (CORS)e impedem o compartilhamento de cookies HTTP (como AEM) login-token
cookie).
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 do AEM GraphQL do domínio de publicação do 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 APIs AEM GraphQL em um domínio diferente. Esta solicitação entre sites requer CORS a ser configurado no AEM para permitir que a solicitação do domínio Netlify acesse o conteúdo.
-
Inspecionando a solicitação XHR para a API AEM GraphQL, a variável
Access-Control-Allow-Origin
está 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 estava ausente ou não incluiu o domínio Netlify, o navegador da Web falharia a solicitação XHR e relataria um erro 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.