AEM Headless SPA-implementaties
Gemaakt voor:
- tussenpersoon
- Ontwikkelaar
AEM Headless single-page app (SPA)-implementaties omvatten JavaScript-gebaseerde toepassingen die zijn gebouwd met behulp van frameworks zoals React of Vue, die op een krantenloze manier inhoud in AEM verbruiken en ermee communiceren.
Het opstellen van een KUUROORD die AEM op een headless manier in wisselwerking staat impliceert het ontvangen van het KUUROORD en het toegankelijk maken via Webbrowser.
Gastheer het SPA
Een KUUROORD 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 wanneer het ontvangen van een KUUROORD die met de hoofdtelefoon van AEM in wisselwerking staat, is als het KUUROORD via het domein van AEM (of gastheer), of op een verschillend domein wordt betreden. De reden is SPAs is Webtoepassingen die in Webbrowsers lopen, en is daarom onderworpen aan Webbrowsers veiligheidsbeleid.
Gedeeld domein
Een SPA en AEM delen domeinen wanneer allebei 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
Aangezien zowel AEM als het KUUROORD van het zelfde domein worden betreden, staan Webbrowsers het KUUROORD toe om XHR aan de Eindpunten van AEM Headless zonder de behoefte aan CORS te maken, en het delen van de koekjes van HTTP (zoals het koekje van AEM login-token) toe te staan.
Hoe het verkeer van het KUUROORD en van AEM op het gedeelde domein wordt verpletterd, is tot u: CDN met veelvoudige oorsprong, de server van HTTP met omgekeerde volmacht, die direct het KUUROORD in AEM ontvangen, etc.
Hieronder zijn plaatsingsconfiguraties die voor de plaatsingen van de productie van het KUUROORD worden vereist, wanneer ontvangen op het zelfde domein zoals 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 het KUUROORD van verschillende domeinen worden betreden, dwingen Webbrowsers veiligheidspolitiek zoals dwars-oorsprong middel het delen (CORS)af, en verhinderen het delen van de koekjes van HTTP (zoals AEM login-token koekje).
Hieronder zijn plaatsingsconfiguraties die voor de plaatsingen van de productie van het KUUROORD worden vereist, wanneer ontvangen op een verschillend domein dan AEM.
Voorbeeld-SPA-implementatie op verschillende domeinen
In dit voorbeeld, wordt het KUUROORD opgesteld aan een Netlify domein (https://main--sparkly-marzipan-b20bf8.netlify.app/) en het KUUROORD gebruikt AEM GraphQL APIs van het AEM publiceer domein (https://publish-p65804-e666805.adobeaemcloud.com). In de onderstaande schermafbeeldingen wordt de vereiste CORS benadrukt.
-
Het KUUROORD wordt gediend van een Netlify domein, 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 wordt aan de webbrowser doorgegeven dat AEM een aanvraag van dit Netlify-domein toestaat om toegang te krijgen tot de inhoud ervan.Als 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 Headless GraphQL APIs verbruikt.
Een voorbeeld van een app van één pagina, geschreven in Next.js, die inhoud van AEM Headless GraphQL APIs verbruikt.