Distribuzioni di applicazioni a pagina singola AEM headless
Le implementazioni 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 in AEM in modo headless.
La distribuzione di un’applicazione a pagina singola che interagisce con AEM in modo headless comporta l’hosting dell’applicazione a pagina singola e la sua accessibilità tramite un browser web.
Ospitare l’applicazione a pagina singola
Un'applicazione a pagina singola è composta 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’applicazione a pagina singola che interagisce con AEM headless, l’elemento principale da considerare è se l’applicazione a pagina singola è accessibile tramite il dominio (o host) di AEM o su un dominio diverso. Il motivo è che le applicazioni a pagina singola sono applicazioni web in esecuzione nei browser web e quindi sono soggette ai criteri di sicurezza dei browser web.
Dominio condiviso
Un’applicazione a pagina singola e AEM condividono i domini quando entrambi sono accessibili agli utenti finali dallo stesso dominio. Ad esempio:
- Accesso ad AEM tramite:
https://wknd.site/ - L'applicazione a pagina singola è accessibile tramite
https://wknd.site/spa
Poiché sia AEM che l’applicazione a pagina singola sono accessibili dallo stesso dominio, i browser web consentono all’applicazione a pagina singola di effettuare XHR per gli endpoint headless di AEM senza la necessità di CORS e consentono la condivisione di cookie HTTP (come il cookie login-token di AEM).
Sta a te definire il modo in cui il traffico di SPA e AEM viene instradato sul dominio condiviso: CDN con più origini, server HTTP con proxy inverso, hosting dell’SPA direttamente in AEM e così via.
Di seguito sono riportate le configurazioni di distribuzione necessarie per le distribuzioni di produzione di applicazioni a pagina singola, se ospitate sullo stesso dominio di AEM.
Domini diversi
Un’applicazione a pagina singola e AEM hanno domini diversi quando gli utenti finali del diverso dominio vi accedono. Ad esempio:
- Accesso ad AEM tramite:
https://wknd.site/ - L'applicazione a pagina singola è accessibile tramite
https://wknd-app.site/
Poiché AEM e l'applicazione a pagina singola sono accessibili da domini diversi, i browser Web applicano criteri di sicurezza quali Cross-Source Resource Sharing (CORS) e impediscono la condivisione di cookie HTTP (come il cookie login-token di AEM).
Di seguito sono riportate le configurazioni di distribuzione necessarie per le distribuzioni di produzione di applicazioni a pagina singola, se ospitate su un dominio diverso da AEM.
Esempio di implementazione di applicazioni a pagina singola in domini diversi
In questo esempio, l'applicazione a pagina singola viene distribuita a un dominio Netlify (https://main--sparkly-marzipan-b20bf8.netlify.app/) e l'applicazione a pagina singola utilizza le API AEM GraphQL dal dominio di pubblicazione AEM (https://publish-p65804-e666805.adobeaemcloud.com). Le schermate seguenti evidenziano il requisito CORS.
-
L’applicazione a pagina singola viene fornita da un dominio Netlify, ma effettua una chiamata XHR alle API GraphQL di AEM su un dominio diverso. Questa richiesta intersito richiede la configurazione di CORS in AEM per consentire l'accesso al contenuto da parte del dominio Netlify.
-
Durante l'analisi della richiesta XHR all'API GraphQL di AEM,
Access-Control-Allow-Originè presente, indicando al browser Web che AEM consente alla richiesta di questo dominio Netlify di accedere al relativo contenuto.Se il CORS di AEM fosse mancante o non includesse il dominio Netlify, il browser Web non avrebbe risposto alla richiesta XHR e segnalerebbe un errore CORS.
Esempio di app a pagina singola
Adobe fornisce un esempio di app a pagina singola codificata in React.
Un’app a pagina singola di esempio, scritta in React, che utilizza contenuti dalle API AEM Headless GraphQL.
App a pagina singola di esempio, scritta in Next.js, che utilizza contenuti dalle API GraphQL headless di AEM.