Während die SPA-Code-Basis außerhalb von AEM verwaltet wird, ist ein AEM-Projekt erforderlich, um die unterstützenden Konfigurations- und Inhaltsanforderungen einzurichten. Dieses Kapitel führt Sie durch die Erstellung eines AEM-Projekts, das die erforderlichen Konfigurationen enthält:
Laden Sie das Projekt aem-guides-wknd-graphql
von Github.com herunter. Dies enthält einige grundlegende Dateien, die in diesem Projekt verwendet werden.
$ mkdir -p ~/Code
$ git clone https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd remote-spa-tutorial
Erstellen Sie ein AEM-Projekt, in dem Konfigurationen und grundlegende Inhalte verwaltet werden. Dieses Projekt wird im Ordner des geklonten aem-guides-wknd-graphql
Projektsremote-spa-tutorial
erstellt.
Verwenden Sie immer die neueste Version des AEM-Archetyps.
$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
$ mvn -B archetype:generate \
-D archetypeGroupId=com.adobe.aem \
-D archetypeArtifactId=aem-project-archetype \
-D archetypeVersion=39 \
-D aemVersion=cloud \
-D appTitle="WKND App" \
-D appId="wknd-app" \
-D groupId="com.adobe.aem.guides.wkndapp" \
-D frontendModule="react"
$ mv ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/wknd-app ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app
Der letzte Befehl benennt einfach den AEM-Projektordner um, damit deutlich ist, dass es sich um das AEM-Projekt handelt und nicht mit Remote SPA verwechselt werden kann_
Wenn frontendModule="react"
angegeben ist, wird das Projekt ui.frontend
nicht für den Anwendungsfall Remote-SPA verwendet. Die SPA wird außerhalb von AEM entwickelt und verwaltet und nutzt AEM nur als Inhalts-API. Die frontendModule="react"
-Markierung ist erforderlich, damit das Projekt die spa-project
AEM Java™-Abhängigkeiten enthält und die Remote-SPA Seitenvorlagen einrichtet.
Der AEM-Projektarchetyp generiert die folgenden Elemente, die zur Konfiguration von AEM für die Integration mit SPA verwendet werden.
ui.apps/src/.../apps/wknd-app/components
ui.apps/src/.../apps/wknd-app/components/remotepage
ui.content/src/.../conf/wknd-app/settings/wcm/templates
ui.content/src/...
ui.content/src/.../content/wknd-app
ui.config/src/.../apps/wknd-app/osgiconfig
Wenn das AEM-Basisprojekt erstellt ist, sorgen einige Anpassungen für die Kompatibilität des SPA-Editors mit Remote-SPAs.
Da die SPA eine Remote SPA ist, können Sie davon ausgehen, dass sie außerhalb des AEM-Projekts entwickelt und verwaltet wird. Um Konflikte zu vermeiden, entfernen Sie das ui.frontend
-Projekt aus der Bereitstellung. Wenn das ui.frontend
-Projekt nicht entfernt wird, werden zwei SPAs, die Standard-SPA aus dem ui.frontend
-Projekt und die Remote-SPA, gleichzeitig in den AEM-SPA-Editor geladen.
Öffnen Sie das AEM-Projekt (~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app
) in Ihrer IDE
Öffnen Sie den Stamm pom.xml
Kommentieren Sie die <module>ui.frontend</module
auf der <modules>
-Liste aus
<modules>
<module>all</module>
<module>core</module>
<!-- <module>ui.frontend</module> -->
<module>ui.apps</module>
<module>ui.apps.structure</module>
<module>ui.config</module>
<module>ui.content</module>
<module>it.tests</module>
<module>dispatcher</module>
<module>ui.tests</module>
<module>analyse</module>
</modules>
Die Datei pom.xml
sollte wie folgt aussehen:
Öffnen Sie ui.apps/pom.xml
Kommentieren Sie die <dependency>
auf <artifactId>wknd-app.ui.frontend</artifactId>
aus.
<dependencies>
<!-- Remote SPA project will provide all frontend resources
<dependency>
<groupId>com.adobe.aem.guides.wkndapp</groupId>
<artifactId>wknd-app.ui.frontend</artifactId>
<version>${project.version}</version>
<type>zip</type>
</dependency>
-->
</dependencies>
Die Datei ui.apps/pom.xml
sollte wie folgt aussehen:
Wenn das AEM-Projekt vor diesen Änderungen erstellt wurde, löschen Sie die von ui.frontend
generierte Client-Bibliothek manuell aus dem Projekt ui.apps
unter ui.apps/src/main/content/jcr_root/apps/wknd-app/clientlibs/clientlib-react
.
Damit AEM die Remote-SPA im SPA-Editor laden kann, müssen Zuordnungen zwischen den Routen der SPA und den AEM-Seiten, die zum Öffnen und Verfassen von Inhalten verwendet werden, hergestellt werden.
Die Bedeutung dieser Konfiguration wird später untersucht.
Die Zuordnung kann mit Sling-Zuordnung in /etc/map
definiert werden.
Öffnen Sie in der IDE das Unterprojekt ui.content
Navigieren Sie zu src/main/content/jcr_root
Erstellen eines Ordners etc
Erstellen Sie in etc
einen Ordner map
Erstellen Sie in map
einen Ordner http
Erstellen Sie in http
eine Datei .content.xml
mit dem Inhalt:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="sling:Mapping">
<localhost_any/>
</jcr:root>
Erstellen Sie in http
einen Ordner localhost_any
Erstellen Sie in localhost_any
eine Datei .content.xml
mit dem Inhalt:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="sling:Mapping"
sling:match="localhost\\.\\d+">
<wknd-app-routes-adventure/>
</jcr:root>
Erstellen Sie in localhost_any
einen Ordner wknd-app-routes-adventure
Erstellen Sie in wknd-app-routes-adventure
eine Datei .content.xml
mit dem Inhalt:
<?xml version="1.0" encoding="UTF-8"?>
<!--
The 'wknd-app-routes-adventure' mapping, maps requests to the SPA's adventure route
to it's corresponding page in AEM at /content/wknd-app/us/en/home/adventure/xxx.
Note the adventure AEM pages are created directly in AEM.
-->
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="sling:Mapping"
sling:match="adventure:.*/([^/]+)/?$"
sling:internalRedirect="/content/wknd-app/us/en/home/adventure/$1"/>
Fügen Sie die Zuordnungsknoten zu ui.content/src/main/content/META-INF/vault/filter.xml
hinzu, um sie in das AEM-Paket aufzunehmen.
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
<filter root="/conf/wknd-app" mode="merge"/>
<filter root="/content/wknd-app" mode="merge"/>
<filter root="/content/dam/wknd-app/asset.jpg" mode="merge"/>
<filter root="/content/experience-fragments/wknd-app" mode="merge"/>
<!-- Add the Sling Mapping rules for the WKND App -->
<filter root="/etc/map" mode="merge"/>
</workspaceFilter>
Die Ordnerstruktur und die Dateien .context.xml
sollten wie folgt aussehen:
Die Datei filter.xml
sollte wie folgt aussehen:
Wenn das AEM-Projekt jetzt bereitgestellt wird, werden diese Konfigurationen automatisch einbezogen.
Die Sling-Zuordnungseffekte wirken sich auf AEM aus, das auf http
und localhost
läuft und so wird nur die lokale Entwicklung unterstützt. Bei der Bereitstellung in AEM as a Cloud Service müssen ähnliche Sling-Zuordnungen hinzugefügt werden, die auf https
und die entsprechende(n) AEM as a Cloud Service-Domain(s) abzielen. Weitere Informationen finden Sie in der Sling-Zuordnungsdokumentation.
Als Nächstes konfigurieren Sie AEM so, dass die Inhalte geschützt werden, damit nur diese SPA auf die AEM-Inhalte zugreifen kann. Konfigurieren von Cross-Origin Resource Sharing in AEM.
Öffnen Sie in Ihrer IDE das Maven-Unterprojekt ui.config
Navigieren Sie zu src/main/content/jcr_root/apps/wknd-app/osgiconfig/config
Erstellen Sie eine Datei mit dem Namen com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json
Fügen Sie der Datei Folgendes hinzu:
{
"supportscredentials":true,
"exposedheaders":[
""
],
"supportedmethods":[
"GET",
"HEAD",
"POST",
"OPTIONS"
],
"alloworigin":[
"https://external-hosted-app", "localhost:3000"
],
"maxage:Integer":1800,
"alloworiginregexp":[
".*"
],
"allowedpaths":[
".*"
],
"supportedheaders":[
"Origin",
"Accept",
"X-Requested-With",
"Content-Type",
"Access-Control-Request-Method",
"Access-Control-Request-Headers",
"authorization"
]
}
Die Datei com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json
sollte wie folgt aussehen:
Die wichtigsten Konfigurationselemente sind:
alloworigin
gibt an, welche Hosts Inhalte von AEM abrufen dürfen.
localhost:3000
wird hinzugefügt, um das lokal laufende SPA zu unterstützenhttps://external-hosted-app
dient als Platzhalter, der durch die Domain ersetzt wird, auf der Remote-SPA gehostet wird.allowedpaths
geben an, welche Pfade in AEM von dieser CORS-Konfiguration abgedeckt werden. Die Standardeinstellung erlaubt den Zugriff auf alle Inhalte in AEM. Dies kann jedoch auf die spezifischen Pfade beschränkt werden, auf die die SPA zugreifen kann, zum Beispiel: /content/wknd-app
.Der AEM-Projektarchetyp generiert ein Projekt, das für die Integration von AEM mit einer Remote-SPA vorbereitet ist, erfordert jedoch eine kleine, aber wichtige Anpassung der automatisch generierten AEM-Seitenstruktur. Der Typ der automatisch generierten AEM-Seite muss in Remote-SPA-Seite anstelle von SPA-Seite geändert werden.
Öffnen Sie in Ihrer IDE das Unterprojekt ui.content
Öffnen Sie src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml
Aktualisieren Sie diese Datei .content.xml
mit:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Page">
<jcr:content
cq:template="/conf/wknd-app/settings/wcm/templates/spa-remote-page"
jcr:primaryType="cq:PageContent"
jcr:title="WKND App Home Page"
sling:resourceType="wknd-app/components/remotepage">
<root
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/responsivegrid">
<responsivegrid
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/responsivegrid">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="wknd-app/components/text"
text="<p>Hello World!</p>"
textIsRich="true">
<cq:responsive jcr:primaryType="nt:unstructured"/>
</text>
</responsivegrid>
</root>
</jcr:content>
</jcr:root>
Die wichtigsten Änderungen sind Aktualisierungen der jcr:content
-Knoten:
cq:template
in /conf/wknd-app/settings/wcm/templates/spa-remote-page
sling:resourceType
in wknd-app/components/remotepage
Die Datei src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml
sollte wie folgt aussehen:
Diese Änderungen ermöglichen es dieser Seite, die als Stamm der SPA in AEM fungiert, die Remote-SPA im SPA-Editor zu laden.
Wenn dieses Projekt zuvor in AEM bereitgestellt wurde, stellen Sie sicher, dass Sie die AEM-Seite als Sites > WKND App > us > en > WKND App Home Page löschen, da das ui.content
-Projekt auf das Zusammenführen von Knoten und nicht auf Update eingestellt ist.
Diese Seite könnte auch entfernt und als Remote-SPA-Seite in AEM selbst neu erstellt werden. Da diese Seite jedoch automatisch im ui.content
-Projekt erstellt wird, ist es am besten, sie in der Code-Basis zu aktualisieren.
Stellen Sie sicher, dass der AEM-Autoren-Service auf Port 4502 läuft.
Navigieren Sie in der Befehlszeile zum Stammverzeichnis des AEM Maven-Projekts
Verwenden Sie Maven, um das Projekt für Ihren lokalen AEM SDK-Autoren-Service bereitzustellen.
$ mvn clean install -PautoInstallSinglePackage
Nach der Bereitstellung des AEM-Projekts ist noch ein letzter Schritt erforderlich, um den SPA-Editor für das Laden unseres Remote-SPA vorzubereiten. Markieren Sie in AEM die AEM-Seite, die dem Stamm der SPA,/content/wknd-app/us/en/home
, entspricht, die vom AEM-Projektarchetyp generiert wurde.
Melden Sie sich bei AEM Author an
Navigieren Sie zu Sites > WKND App > us > en
Wählen Sie die WKND-App-Startseite und tippen Sie auf Eigenschaften
Navigieren Sie zur Registerkarte SPA
Füllen Sie die Remote-SPA-Konfiguration aus
http://localhost:3000
Tippen Sie auf Speichern und schließen
Denken Sie daran, dass wir den Typ dieser Seite in eine Remote-SPA-Seite geändert haben. Dadurch können wir die Registerkarte SPA in den Seiteneigenschaften sehen.
Diese Konfiguration darf nur auf der AEM-Seite vorgenommen werden, die dem Stamm der SPA entspricht. Alle AEM-Seiten unter dieser Seite übernehmen den Wert.
Sie haben nun die AEM-Konfigurationen vorbereitet und sie bei Ihrem lokalen AEM-Autoren-Service bereitgestellt! Sie wissen jetzt, wie man Folgendes tut:
ui.frontend
auskommentierenWenn AEM konfiguriert ist, können wir uns auf das Bootstrapping des Remote-SPA mit Unterstützung für bearbeitbare Bereiche mit dem AEM-SPA-Editor konzentrieren!