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:

  1. Provedores de nuvem como Azure ou AWS.

  2. No local hospedagem em uma empresa data center

  3. 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.

SPA se conecta a
Autor do AEM
AEM Publish
Visualização do AEM
Filtros do Dispatcher
Compartilhamento de recursos entre origens (CORS)
Hospedeiros 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.

SPA se conecta a
Autor do AEM
AEM Publish
Visualização do AEM
Filtros do Dispatcher
Compartilhamento de recursos entre origens (CORS)
Hospedeiros 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.

  1. 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.

    Solicitação de SPA atendida a partir de hosts SPA e AEM

  2. 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.

    API AEM GraphQL do cabeçalho de resposta do CORS

Exemplo de aplicativo de página única

Adobe fornece um exemplo de aplicativo de página única codificado no React.

aplicativo React

aplicativo React

Um exemplo de aplicativo de página única, escrito no React, que consome conteúdo de APIs AEM Headless GraphQL.

Exibir exemplo

Aplicativo Next.js

Aplicativo Next.js

Um aplicativo de página única de exemplo, escrito em Next.js, que consome conteúdo de APIs AEM Headless GraphQL.

Exibir exemplo

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4