Distribuzioni di SPA headless AEM

Le distribuzioni di app AEM headless a pagina singola (SPA) coinvolgono applicazioni basate su JavaScript create utilizzando framework come React o Vue, che utilizzano e interagiscono con i contenuti dell’AEM in modo headless.

Distribuire un SPA che interagisca con l’AEM in modo headless implica ospitare l’SPA e renderlo accessibile tramite un browser web.

Ospitare l'SPA

Un SPA è costituito da una raccolta di risorse Web native: HTML, CSS e JavaScript. Queste risorse vengono generate durante il processo build (ad esempio, npm run build) e distribuite a un host per l'utilizzo da parte degli utenti finali.

Esistono varie opzioni di hosting a seconda dei requisiti della tua organizzazione:

  1. Provider cloud come Azure o AWS.

  2. On-Premise hosting in un data center aziendale

  3. Piattaforme di hosting front-end quali AWS Amplify, Azure App Service, Netlify, Heroku, Vercel e così via.

Configurazioni di distribuzione

Quando si ospita un SPA che interagisce con l'AEM headless, la considerazione principale è se l'SPA è accessibile tramite il dominio (o host) dell'AEM o su un dominio diverso. Il motivo è che SPA è applicazioni web in esecuzione nei browser web e quindi sono soggette ai criteri di sicurezza dei browser web.

Dominio condiviso

Un SPA e un AEM condividono domini quando entrambi sono accessibili agli utenti finali dallo stesso dominio. Ad esempio:

  • Accesso AEM tramite: https://wknd.site/
  • Accesso SPA tramite https://wknd.site/spa

Poiché sia l’AEM che l’SPA sono accessibili dallo stesso dominio, i browser web consentono all’SPA di effettuare endpoint da XHR a AEM Headless senza la necessità di CORS e consentono la condivisione di cookie HTTP (come il cookie login-token dell’AEM).

Sta a te definire il modo in cui il traffico SPA e AEM viene instradato sul dominio condiviso: rete CDN con più origini, server HTTP con proxy inverso, hosting dell’SPA direttamente nell’AEM e così via.

Di seguito sono riportate le configurazioni di distribuzione necessarie per le distribuzioni di produzione dell’SPA, se ospitate sullo stesso dominio dell’AEM.

L’SPA si connette a
Autore AEM
Pubblicazione AEM
Anteprima AEM
Filtri Dispatcher
Condivisione delle risorse tra le origini (CORS)
Host AEM

Domini diversi

Un SPA e un AEM hanno domini diversi quando gli utenti finali vi accedono dal diverso dominio. Ad esempio:

  • Accesso AEM tramite: https://wknd.site/
  • Accesso SPA tramite https://wknd-app.site/

Poiché l'AEM e l'SPA sono accessibili da domini diversi, i browser Web applicano criteri di sicurezza quali Cross-Origine Resource Sharing (CORS) e impediscono la condivisione di cookie HTTP (ad esempio AEM con cookie login-token).

Di seguito sono riportate le configurazioni di distribuzione necessarie per le distribuzioni di produzione dell’SPA, se ospitate su un dominio diverso da quello dell’AEM.

L’SPA si connette a
Autore AEM
Pubblicazione AEM
Anteprima AEM
Filtri Dispatcher
Condivisione risorse tra origini
Host AEM

Esempio di implementazione dell’SPA in domini diversi

In questo esempio, l'SPA viene distribuito a un dominio Netlify (https://main--sparkly-marzipan-b20bf8.netlify.app/) e l'SPA utilizza le API GraphQL AEM dal dominio Publish AEM (https://publish-p65804-e666805.adobeaemcloud.com). Le schermate seguenti evidenziano il requisito CORS.

  1. L’SPA viene gestito da un dominio Netlify, ma effettua una chiamata XHR alle API GraphQL dell’AEM su un dominio diverso. Questa richiesta intersito richiede la configurazione di CORS su AEM per consentire la richiesta del dominio Netlify di accedere al contenuto.

    Richiesta SPA trasmessa dagli host SPA e AEM

  2. Durante il controllo della richiesta XHR all'API GraphQL dell'AEM, è presente Access-Control-Allow-Origin, che indica al browser Web che l'AEM consente la richiesta da questo dominio Netlify di accedere al relativo contenuto.

    Se il CORS dell'AEM fosse mancante o non includesse il dominio Netlify, il browser Web non risponderebbe alla richiesta XHR e segnalerebbe un errore CORS.

    Intestazione risposta CORS AEM GraphQL API

Esempio di app a pagina singola

Un Adobe fornisce un’app a pagina singola codificata in React.

React app

React app

Un’app a pagina singola di esempio, scritta in React, che utilizza contenuti delle API GraphQL headless dell’AEM.

Visualizza esempio

App Next.js

App Next.js

Un’app a pagina singola di esempio, scritta in Next.js, che utilizza contenuti delle API GraphQL headless dell’AEM.

Visualizza esempio

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