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:
-
Provider cloud come Azure o AWS.
-
On-Premise hosting in un data center aziendale
-
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.
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.
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.
-
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.
-
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.
Esempio di app a pagina singola
Un Adobe fornisce un’app a pagina singola codificata in React.
Un’app a pagina singola di esempio, scritta in React, che utilizza contenuti delle API GraphQL headless dell’AEM.
Un’app a pagina singola di esempio, scritta in Next.js, che utilizza contenuti delle API GraphQL headless dell’AEM.