DokumentationAEMAEM-TutorialsAEM Headless-Tutorial

Konfigurieren von AEM für den SPA-Editor

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Einsteiger
  • Entwickler

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:

  • AEM WCM-Kernkomponenten-Proxys
  • Seiten-Proxy für AEM Remote-SPA
  • Seitenvorlagen für AEM Remote-SPA
  • Grundlegende AEM-Seiten für Remote-SPA
  • Unterprojekt zur Definition von SPA-zu-AEM-URL-Zuordnungen
  • OSGi-Konfigurationsordner

Laden Sie das Basisprojekt von GitHub herunter

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 eines AEM-Projekts

Erstellen Sie ein AEM-Projekt, in dem Konfigurationen und grundlegende Inhalte verwaltet werden. Dieses Projekt wird im Ordner des geklonten aem-guides-wknd-graphqlProjektsremote-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.

  • AEM WCM-Kernkomponenten-Proxys bei ui.apps/src/.../apps/wknd-app/components
  • AEM Remote-Seiten-Proxys bei ui.apps/src/.../apps/wknd-app/components/remotepage
  • AEM-Seitenvorlagen bei ui.content/src/.../conf/wknd-app/settings/wcm/templates
  • Unterprojekt zum Definieren von Inhaltszuordnungen bei ui.content/src/...
  • Grundlegende AEM-Seiten für Remote-SPA unter ui.content/src/.../content/wknd-app
  • OSGi-Konfigurationsordner bei 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.

Entfernen des ui.frontend-Projekts

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.

  1. Öffnen Sie das AEM-Projekt (~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app) in Ihrer IDE

  2. Öffnen Sie den Stamm pom.xml

  3. Kommentieren Sie die <module>ui.frontend</module auf der <modules>-Liste aus

    code language-none 
    <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:

    Entfernen des ui.frontend-Moduls aus dem Reaktor-POM

  4. Öffnen Sie ui.apps/pom.xml

  5. Kommentieren Sie die <dependency> auf <artifactId>wknd-app.ui.frontend</artifactId> aus.

    code language-none 
    <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:

    Entfernen der ui.frontend-Abhängigkeit aus ui.apps

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.

AEM-Inhaltszuordnung

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.

  1. Öffnen Sie in der IDE das Unterprojekt ui.content

  2. Navigieren Sie zu src/main/content/jcr_root

  3. Erstellen eines Ordners etc

  4. Erstellen Sie in etc einen Ordner map

  5. Erstellen Sie in map einen Ordner http

  6. Erstellen Sie in http eine Datei .content.xml mit dem Inhalt:

    code language-none 
    <?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>

  7. Erstellen Sie in http einen Ordner localhost_any

  8. Erstellen Sie in localhost_any eine Datei .content.xml mit dem Inhalt:

    code language-none 
    <?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>

  9. Erstellen Sie in localhost_any einen Ordner wknd-app-routes-adventure

  10. Erstellen Sie in wknd-app-routes-adventure eine Datei .content.xml mit dem Inhalt:

    code language-none 
    <?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"/>

  11. Fügen Sie die Zuordnungsknoten zu ui.content/src/main/content/META-INF/vault/filter.xml hinzu, um sie in das AEM-Paket aufzunehmen.

    code language-none 
    <?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:

Sling-Zuordnung

Die Datei filter.xml sollte wie folgt aussehen:

Sling-Zuordnung

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.

Sicherheitsrichtlinien für Cross-Origin Resource Sharing

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.

  1. Öffnen Sie in Ihrer IDE das Maven-Unterprojekt ui.config

  2. Navigieren Sie zu src/main/content/jcr_root/apps/wknd-app/osgiconfig/config

  3. Erstellen Sie eine Datei mit dem Namen com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json

  4. Fügen Sie der Datei Folgendes hinzu:

    code language-none 
    {
    "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:

SPA-Editor CORS-Konfiguration

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ützen
    • https://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.

Festlegen der AEM-Seite als Remote-SPA-Seitenvorlage

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.

  1. Öffnen Sie in Ihrer IDE das Unterprojekt ui.content

  2. Öffnen Sie src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml

  3. Aktualisieren Sie diese Datei .content.xml mit:

    code language-none 
    <?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="&lt;p>Hello World!&lt;/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:

Aktualisierungen der Datei .content.xml der Startseite

Diese Änderungen ermöglichen es dieser Seite, die als Stamm der SPA in AEM fungiert, die Remote-SPA im SPA-Editor zu laden.

NOTE
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.

Bereitstellen das AEM-Projekts für das AEM SDK

  1. Stellen Sie sicher, dass der AEM-Autoren-Service auf Port 4502 läuft.

  2. Navigieren Sie in der Befehlszeile zum Stammverzeichnis des AEM Maven-Projekts

  3. Verwenden Sie Maven, um das Projekt für Ihren lokalen AEM SDK-Autoren-Service bereitzustellen.

    code language-none 
    $ mvn clean install -PautoInstallSinglePackage

    mvn clean install -PautoInstallSinglePackage

Konfigurieren der AEM-Stammseite

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.

  1. Melden Sie sich bei AEM Author an

  2. Navigieren Sie zu Sites > WKND App > us > en

  3. Wählen Sie die WKND-App-Startseite und tippen Sie auf Eigenschaften

    WKND-App-Startseite – Eigenschaften

  4. Navigieren Sie zur Registerkarte SPA

  5. Füllen Sie die Remote-SPA-Konfiguration aus

    • SPA Host-URL: http://localhost:3000
      • Die URL zum Stamm der Remote-SPA

    WKND-App-Startseite – Remote-SPA-Konfiguration

  6. 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.

Herzlichen Glückwunsch

Sie haben nun die AEM-Konfigurationen vorbereitet und sie bei Ihrem lokalen AEM-Autoren-Service bereitgestellt! Sie wissen jetzt, wie man Folgendes tut:

  • Entfernen Sie die vom AEM-Projektarchetyp generierte SPA, indem Sie die Abhängigkeiten in ui.frontend auskommentieren
  • Fügen Sie Sling-Zuordnungen zu AEM hinzu, die die SPA-Routen den Ressourcen in AEM zuordnen.
  • Richten Sie die AEM-Sicherheitsrichtlinien für die herkunftsübergreifende Ressourcennutzung ein, die es dem Remote-SPA ermöglichen, Inhalte von AEM zu verwenden.
  • Stellen Sie das AEM-Projekt auf Ihrem lokalen AEM SDK-Autoren-Service bereit
  • Markieren Sie eine AEM-Seite als Stamm des Remote-SPA mit der Seiteneigenschaft SPA Host URL

Nächste Schritte

Wenn 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!

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4