Dokumentation AEM AEM-Tutorials AEM Headless-Tutorial

AEM Headless-SPA-Bereitstellungen

Last update: Tue Oct 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:

Erstellt für:

Fortgeschrittener
Entwickler

AEM Headless-Single-Page-App (SPA)-Bereitstellungen beinhalten JavaScript-basierte, mit Frameworks wie React oder Vue erstellte Anwendungen, die Inhalte in AEM auf Headless-Weise nutzen und damit interagieren.

Wenn Sie eine SPA bereitstellen, die mit AEM auf Headless-Weise AEM interagiert, wird die SPA gehostet und über einen Webbrowser zugänglich gemacht.

Hosten der SPA

Eine SPA besteht aus einer Sammlung nativer Web-Ressourcen: HTML, CSS und JavaScript. Diese Ressourcen werden während des Build-Prozesses generiert (z. B. npm run build) und in einem Host für die Verwendung durch Endbenutzende bereitgestellt.

Es gibt verschiedene Hosting-Optionen entsprechend den Anforderungen Ihrer Organisation:

Cloud-Anbieterfirmen wie Azure oder AWS.
On-Premise-Hosting im Datenzentrum eines Unternehmens
Frontend-Hosting-Plattformen wie AWS Amplify, Azure App Service, Netlify, Heroku, Vercel usw.

Bereitstellungskonfigurationen

Beim Hosten einer SPA, die mit AEM Headless interagiert, sollten Sie vor allem berücksichtigen, ob der Zugriff auf die SPA über eine Domain (oder einen Host) von AEM oder über eine andere Domain erfolgt. Der Grund dafür ist, dass SPA-Webanwendungen in Webbrowsern ausgeführt werden und daher Sicherheitsrichtlinien für Webbrowser unterliegen.

Freigegebene Domain

Eine SPA und AEM teilen Domains, wenn beide von Endbenutzenden von derselben Domain aufgerufen werden. Zum Beispiel:

Der Zugriff auf AEM erfolgt über: https://wknd.site/
SPA ist zugänglich über https://wknd.site/spa

Da sowohl AEM als auch die SPA von derselben Domain aus aufgerufen werden, ermöglichen Webbrowser der SPA, ohne Erforderlichkeit von CORS XHR zu AEM Headless-Endpunkten zu machen, und erlauben die Freigabe von HTTP-Cookies (z. B. des login-token-Cookies von AEM).

Wie SPA und AEM-Traffic auf der geteilten Domain geleitet werden, liegt an Ihnen: CDN mit mehreren Ursprüngen, HTTP-Server mit Reverse-Proxy, Hosten der SPA direkt in AEM usw.

Im Folgenden finden Sie Bereitstellungskonfigurationen, die für SPA-Bereitstellungen in Produktionsumgebungen erforderlich sind, wenn sie auf derselben Domain wie AEM gehostet wird.

SPA stellt eine Verbindung her zu →

AEM Author

AEM Publish

AEM-Vorschau

Dispatcher-Filter

✘

✔

Cross-Origin Resource Sharing (CORS)

✘

AEM-Hosts

✘

Verschiedene Domains

Eine SPA und AEM haben unterschiedliche Domains, wenn Endbenutzende von abweichenden Domains aus auf sie zugreifen. Zum Beispiel:

Der Zugriff auf AEM erfolgt über: https://wknd.site/
SPA ist zugänglich über https://wknd-app.site/

Da auf AEM und die SPA von verschiedenen Domains aus zugegriffen wird, erzwingen Webbrowser Sicherheitsrichtlinien wie Cross-Origin Resource Sharing (CORS) und unterbinden die Freigabe von HTTP-Cookies (z. B. des login-token-Cookies von AEM).

Im Folgenden finden Sie Bereitstellungskonfigurationen, die für SPA-Bereitstellungen in Produktionsumgebungen erforderlich sind, wenn sie auf einer anderen Domain gehostet werden als AEM.