Implementaties SPA zonder kop AEM
AEM Headless single-page app (SPA)-implementaties zijn gebaseerd op JavaScript-toepassingen die zijn gebouwd met behulp van frameworks zoals React of Vue, die op een krantenloze manier inhoud in AEM verbruiken en interageren.
Bij het implementeren van een SPA die zonder kop AEM interageert, moet u de SPA hosten en toegankelijk maken via een webbrowser.
De SPA hosten
Een SPA bestaat uit een inzameling van inheemse Webmiddelen: HTML, CSS, en JavaScript. Deze middelen worden geproduceerd tijdens bouwt proces (bijvoorbeeld, npm run build) en aan een gastheer voor consumptie door eind - gebruikers opgesteld.
Er zijn diverse het ontvangen opties afhankelijk van de vereisten van uw organisatie:
-
de leveranciers van de Wolk zoals Azure of AWS.
-
op gebouw het ontvangen in een collectief gegevenscentrum
-
front-end het ontvangen platforms zoals AWS breidt, Azure App Service uit, verbeter, Heroku, Vercel, enz.
Implementatieconfiguraties
De belangrijkste overweging bij het hosten van een SPA die met AEM zonder kop in wisselwerking staat, is als de SPA via AEM domein (of gastheer), of op een verschillend domein wordt betreden. De reden hiervoor SPA webtoepassingen die in webbrowsers worden uitgevoerd en die daarom onderworpen zijn aan beveiligingsbeleid voor webbrowsers.
Gedeeld domein
Een SPA en AEM delen domeinen wanneer beide toegang door eind - gebruikers van het zelfde domein zijn. Bijvoorbeeld:
- AEM is toegankelijk via:
https://wknd.site/ - SPA is toegankelijk via
https://wknd.site/spa
Omdat zowel AEM als de SPA worden benaderd vanuit hetzelfde domein, kunnen webbrowsers de SPA XHR maken naar AEM eindpunten zonder dat CORS nodig is, en staan ze het delen van HTTP-cookies toe (zoals AEM login-token cookie).
Hoe SPA en AEM verkeer op het gedeelde domein wordt verpletterd, is aan u: CDN met veelvoudige oorsprong, de server van HTTP met omgekeerde volmacht, die de SPA direct in AEM ontvangen, etc.
Hieronder vindt u implementatieconfiguraties die vereist zijn voor SPA productieimplementaties, wanneer deze worden gehost op hetzelfde domein als AEM.
Verschillende domeinen
Een SPA en AEM hebben verschillende domeinen wanneer zij door eind - gebruikers van het verschillende domein worden betreden. Bijvoorbeeld:
- AEM is toegankelijk via:
https://wknd.site/ - SPA is toegankelijk via
https://wknd-app.site/
Aangezien AEM en de SPA van verschillende domeinen worden betreden, Webbrowsers veiligheidspolitiek zoals dwars-oorsprong middel het delen (CORS)afdwingen, en verhinderen het delen van de koekjes van HTTP (zoals AEM login-token koekje).
Hieronder vindt u implementatieconfiguraties die vereist zijn voor SPA productieimplementaties, wanneer deze worden gehost op een ander domein dan AEM.
Voorbeeld SPA implementatie op verschillende domeinen
In dit voorbeeld, wordt de SPA opgesteld aan een domein van Netlify (https://main--sparkly-marzipan-b20bf8.netlify.app/) en de SPA gebruikt AEM GraphQL APIs van het domein van Publish van de AEM (https://publish-p65804-e666805.adobeaemcloud.com). In de onderstaande schermafbeeldingen wordt de vereiste CORS benadrukt.
-
De SPA wordt bediend van een domein van Netlify, maar maakt een XHR vraag aan AEM GraphQL APIs op een verschillend domein. Dit dwars-plaats verzoek vereist CORSom opstelling op AEM worden geplaatst om verzoek van het domein toe te staan Netlify om tot zijn inhoud toegang te hebben.
-
Wanneer de XHR-aanvraag wordt gecontroleerd op de AEM GraphQL API, is de
Access-Control-Allow-Originaanwezig en geeft deze aan de webbrowser aan dat AEM verzoek van dit Netlify-domein toestaat om toegang te krijgen tot de inhoud ervan.Als de AEM CORSontbrak of niet het Netlify domein omvatte, zou Webbrowser het XHR- verzoek ontbreken, en een fout melden CORS.
Voorbeeld-app van één pagina
Adobe biedt een voorbeeld van een app van één pagina die in React is gecodeerd.
Een voorbeeld van een app van één pagina, geschreven in React, die inhoud van AEM GraphQL-API's zonder koppen verbruikt.
Een voorbeeld van een app van één pagina, geschreven in Next.js, die inhoud van AEM GraphQL-API's zonder koppen verbruikt.