Implementaciones de SPA sin encabezado de AEM
Creado para:
- Intermedio
- Desarrollador
Las implementaciones de aplicaciones de una sola página (SPA) sin encabezado de AEM implican aplicaciones basadas en JavaScript creadas con marcos de trabajo como React o Vue, que consumen contenido en AEM e interactúan con él sin encabezado.
La implementación de una SPA que interactúe con AEM de forma descentralizada implica alojar la SPA y hacerla accesible a través de un explorador web.
Alojar la SPA
Un SPA consta de una colección de recursos web nativos: HTML, CSS y JavaScript. Estos recursos se generan durante el proceso build (por ejemplo, npm run build) y se implementan en un host para que los consuman los usuarios finales.
Hay varias opciones de alojamiento según los requisitos de su organización:
-
Proveedores de nube como Azure o AWS.
-
Alojamiento local en un centro de datos corporativo
-
Plataformas de alojamiento front-end como AWS Amplify, Azure App Service, Netlify, Heroku, Vercel, etc.
Configuraciones de implementación
La consideración principal al alojar un SPA que interactúa con AEM sin encabezado es si se accede al SPA a través del dominio (o host) de AEM o en un dominio diferente. El motivo es que las SPA son aplicaciones web que se ejecutan en exploradores web y, por lo tanto, están sujetas a las políticas de seguridad de los exploradores web.
Dominio compartido
Una SPA y AEM comparten dominios cuando ambos son accesibles para los usuarios finales desde el mismo dominio. Por ejemplo:
- Se tiene acceso a AEM a través de:
https://wknd.site/ - Se accede a la SPA a través de
https://wknd.site/spa
Dado que se accede a AEM y a la SPA desde el mismo dominio, los exploradores web permiten a la SPA realizar XHR en puntos finales sin encabezado de AEM sin necesidad de CORS y permiten el uso compartido de cookies HTTP (como la cookie login-token de AEM).
Depende de usted cómo se enrute el tráfico de SPA y AEM en el dominio compartido: CDN con varios orígenes, servidor HTTP con proxy inverso, alojamiento del SPA directamente en AEM, etc.
A continuación se indican las configuraciones de implementación necesarias para las implementaciones de producción de SPA, cuando se alojan en el mismo dominio que AEM.
Dominios diferentes
Una SPA y AEM tienen dominios diferentes cuando los usuarios finales de los distintos dominios acceden a ellos. Por ejemplo:
- Se tiene acceso a AEM a través de:
https://wknd.site/ - Se accede a la SPA a través de
https://wknd-app.site/
Dado que se accede a AEM y a la SPA desde dominios diferentes, los exploradores web aplican directivas de seguridad como uso compartido de recursos de origen cruzado (CORS) e impiden el uso compartido de cookies HTTP (como la cookie login-token de AEM).
A continuación se indican las configuraciones de implementación necesarias para las implementaciones de producción de SPA, cuando se alojan en un dominio diferente al de AEM.
Ejemplo de implementación de SPA en dominios diferentes
En este ejemplo, la SPA se implementa en un dominio de Netlify (https://main--sparkly-marzipan-b20bf8.netlify.app/) y la SPA consume las API de AEM GraphQL desde el dominio de publicación de AEM (https://publish-p65804-e666805.adobeaemcloud.com). Las siguientes capturas de pantalla resaltan el requisito CORS.
-
La SPA se sirve desde un dominio de Netlify, pero realiza una llamada XHR a las API de AEM GraphQL en un dominio diferente. Esta solicitud entre sitios requiere que CORS se configure en AEM para permitir que la solicitud del dominio de Netlify acceda a su contenido.
-
Al inspeccionar la solicitud XHR a la API de AEM GraphQL, está presente
Access-Control-Allow-Origin, lo que indica al explorador web que AEM permite que la solicitud de este dominio de Netlify acceda a su contenido.Si faltaba el AEM CORS o no incluía el dominio Netlify, el navegador web daría error a la solicitud XHR e informaría de un error CORS.
Ejemplo de aplicación de una sola página
Adobe proporciona una aplicación de una sola página de ejemplo codificada en React.
Aplicación de ejemplo de una sola página, escrita en React, que consume contenido de las API de GraphQL sin encabezado de AEM.
Aplicación de ejemplo de una sola página, escrita en Next.js, que consume contenido de las API de GraphQL sin encabezado de AEM.