Documentatie AEM Tutorials voor AEM AEM Headless-tutorial

AEM for SPA Editor configureren

Last update: Mon Jun 16 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Van toepassing op:
Experience Manager 6.5
Experience Manager as a Cloud Service

Gemaakt voor:

Beginner
Ontwikkelaar

IMPORTANT

De redacteur van het KUUROORD is afgekeurdvoor nieuwe projecten. Het blijft door Adobe ondersteund voor bestaande projecten, maar mag niet worden gebruikt voor nieuwe projecten. De voorkeurseditors voor het beheer van inhoud zonder kop in AEM zijn nu:

de Universele Redacteurvoor visueel het uitgeven van hoofdloze inhoud.
de Redacteur van het Fragment van de Inhoudvoor op vorm-gebaseerde het uitgeven van hoofdloze inhoud.

Terwijl de Codebase van het KUUROORD buiten AEM wordt beheerd, wordt een project van AEM vereist aan opstelling ondersteunende configuratie en inhoudsvereisten. Dit hoofdstuk doorloopt de verwezenlijking van een project van AEM dat noodzakelijke configuraties bevat:

AEM WCM Core-componentproxy's
AEM Remote SPA Page-proxy
AEM Remote SPA Page Templates
Baseline Remote SPA AEM-pagina's
Subproject om KUUROORD aan de afbeeldingen van AEM te bepalen URL
OSGi-configuratiemappen

Download het basisproject van GitHub

Download het aem-guides-wknd-graphql -project van Github.com. Dit zal sommige basislijndossiers bevatten die in dit project worden gebruikt.

$ mkdir -p ~/Code
$ git clone https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd remote-spa-tutorial

Een AEM-project maken

Maak een AEM-project waarin configuraties en basislijninhoud worden beheerd. Dit project wordt gegenereerd in de map remote-spa-tutorial van het gekloonde aem-guides-wknd-graphql project.

gebruik altijd de recentste versie van AEM Archetype.

$ 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

_Het laatste bevel wijzigt eenvoudig de naam van de het projectomslag van AEM zodat is het duidelijk het project van AEM, en niet om met Verre SPA* worden verward

Terwijl frontendModule="react" wordt gespecificeerd, wordt het ui.frontend project niet gebruikt voor het Verre gebruik van het KUUROORD. Het SPA wordt ontwikkeld en extern beheerd aan AEM en gebruikt slechts AEM als inhoud API. De markering frontendModule="react" is vereist voor het project, inclusief de spa-project AEM Java™-afhankelijkheden en het instellen van de Remote SPA Page Templates.

Het Archetype van het Project van AEM produceert de volgende elementen die gebruikte om AEM voor integratie met het KUUROORD te vormen.

de volmachten van de Componenten van de Kern van AEM WCM bij ui.apps/src/.../apps/wknd-app/components
de Verre volmacht van de Pagina van AEM SPA bij ui.apps/src/.../apps/wknd-app/components/remotepage
de Malplaatjes van de Pagina van AEM bij ui.content/src/.../conf/wknd-app/settings/wcm/templates
Subproject om inhoudsafbeeldingen bij ui.content/src/... te bepalen
Verre de Verre pagina's van AEM van de Basislijn bij ui.content/src/.../content/wknd-app
OSGi configuratiemappen bij ui.config/src/.../apps/wknd-app/osgiconfig

Met het project van basisAEM wordt geproduceerd, verzekeren een paar aanpassingen de verenigbaarheid van de Redacteur van het KUUROORD met Verre SPAs.

Ui.frontend-project verwijderen

Aangezien het KUUROORD een Verre KUUROORD is, veronderstel het buiten het project van AEM wordt ontwikkeld en geleid. U voorkomt conflicten door het ui.frontend -project uit de implementatie te verwijderen. Als het ui.frontend project niet wordt verwijderd, wordt twee SPAs, standaardSPA verstrekt in het ui.frontend project en het Verre KUUROORD, tezelfdertijd geladen in de Redacteur van AEM SPA.

Open het AEM-project (~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app) in uw IDE
De hoofdmap openen pom.xml

De opmerking <module>ui.frontend</module verwijderen uit de lijst <modules>

code language-none

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>`

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

Het bestand pom.xml moet er als volgt uitzien:

verwijdert ui.frontend module uit reactorpom

De ui.apps/pom.xml openen

Maak een opmerking over de <dependency> on <artifactId>wknd-app.ui.frontend</artifactId>

code language-none

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>`

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

Het bestand ui.apps/pom.xml moet er als volgt uitzien:

verwijdert ui.frontend gebiedsdeel uit ui.apps

Als het AEM-project vóór deze wijzigingen is gemaakt, verwijdert u handmatig de ui.frontend gegenereerde clientbibliotheek uit het ui.apps project at ui.apps/src/main/content/jcr_root/apps/wknd-app/clientlibs/clientlib-react .

AEM-inhoudstoewijzing

Voor AEM om het Verre KUUROORD in de Redacteur van het KUUROORD te laden, moeten de afbeeldingen tussen de routes van het KUUROORD en de Pagina's van AEM worden gebruikt om te openen en auteursinhoud worden gevestigd.

Het belang van deze configuratie wordt later onderzocht.

De afbeelding kan worden gedaan met het Schuiven Toewijzingdie in /etc/map wordt bepaald.

Open het subproject ui.content in de IDE
Navigeren naar src/main/content/jcr_root
Een map maken etc
Maak in etc een map map
Maak in map een map http

Maak in http een bestand .content.xml met de inhoud:

code language-none

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>`

<?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>

Maak in http een map localhost_any

Maak in localhost_any een bestand .content.xml met de inhoud:

code language-none

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>`

<?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>

Maak in localhost_any een map wknd-app-routes-adventure

Maak in wknd-app-routes-adventure een bestand .content.xml met de inhoud:

code language-none

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"/>

<?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"/>

Voeg de toewijzingsknooppunten toe aan ui.content/src/main/content/META-INF/vault/filter.xml aan de knooppunten die in het AEM-pakket zijn opgenomen.

code language-none

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>`

<?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>

De mapstructuur en .context.xml -bestanden moeten er als volgt uitzien:

het Schuiven Toewijzing

Het bestand filter.xml moet er als volgt uitzien:

het Schuiven Toewijzing

Nu, wanneer het project van AEM wordt opgesteld, zijn deze configuraties automatisch inbegrepen.

De effecten voor het toewijzen van objecten aan AEM die op http en localhost worden uitgevoerd, ondersteunen dus alleen lokale ontwikkeling. Bij implementatie naar AEM as a Cloud Service moeten vergelijkbare Sling Mappings-objecten worden toegevoegd aan dat doel https en het juiste AEM as a Cloud Service-domein of de juiste-domeinen. Voor meer informatie, zie de Verschuivende documentatie van de Afbeelding.

Beveiligingsbeleid voor het delen van bronnen tussen verschillende bronnen

Configureer vervolgens AEM om de inhoud te beschermen, zodat alleen deze SPA toegang heeft tot de AEM-inhoud. Vorm het Delen van het Middel van de Cross-Origin in AEM.

Open het subproject ui.config Maven in uw IDE
Navigeren src/main/content/jcr_root/apps/wknd-app/osgiconfig/config
Een bestand met de naam com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json maken

Voeg het volgende toe aan het bestand:

code language-none

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" ] }`

{
    "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"
    ]
}

Het bestand com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json moet er als volgt uitzien:

de Configuratie van CORS van de Redacteur van het KUUROORD

De belangrijkste configuratieelementen zijn:

alloworigin geeft aan welke hosts inhoud uit AEM mogen ophalen.
- localhost:3000 wordt toegevoegd ter ondersteuning van de SPA die lokaal wordt uitgevoerd
- https://external-hosted-app dienst als placeholder die met het domein moet worden vervangen dat Verre SPA wordt ontvangen.
allowedpaths geeft op welke paden in AEM door deze CORS-configuratie worden gedekt. De standaardwaarde staat toegang tot al inhoud in AEM toe, nochtans kan dit tot slechts de specifieke wegen worden beperkt het KUUROORD, bijvoorbeeld: /content/wknd-app toegang hebben.

AEM-pagina instellen als sjabloon voor externe SPA-pagina

Het Project Archetype van AEM produceert een project dat voor de integratie van AEM met een Verre SPA wordt voorbereid, maar vereist een kleine, maar belangrijke aanpassing aan auto-geproduceerde de paginastructuur van AEM. De auto-geproduceerde AEM pagina moet zijn type hebben dat in Verre pagina van het KUUROORD wordt veranderd, eerder dan a pagina van het KUUROORD.

Open het subproject ui.content in uw IDE
Openen naar src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml

Dit .content.xml -bestand bijwerken met:

code language-xml

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

<?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>

De belangrijkste wijzigingen zijn updates van het knooppunt jcr:content :

cq:template t/m /conf/wknd-app/settings/wcm/templates/spa-remote-page
sling:resourceType t/m wknd-app/components/remotepage

Het bestand src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml moet er als volgt uitzien:

pagina van het Huis .content.xml- updates

Deze veranderingen staan deze pagina toe, die de wortel van het KUUROORD in AEM handelt, om het Verre KUUROORD in de Redacteur van het KUUROORD te laden.

NOTE

Als dit project eerder aan AEM werd opgesteld, zorg ervoor om de pagina van AEM als Plaatsen > App van WKND > gebruiken > en > WKND App Homepage te schrappen, aangezien het ui.content project aan knopen samenvoegt, eerder dan update wordt geplaatst.

Deze pagina kon ook als Verre pagina van het KUUROORD in AEM zelf worden verwijderd en worden opnieuw gecreeerd, echter aangezien deze pagina in het ui.content project auto-gecreeerd is het best om het in de codebasis bij te werken.

AEM-project implementeren voor AEM SDK

Controleer of de AEM Author-service wordt uitgevoerd op poort 4502
Navigeer vanaf de opdrachtregel naar de hoofdmap van het AEM Maven-project

Gebruik Maven om het project te implementeren voor uw lokale AEM SDK Author-service

code language-none
`$ mvn clean install -PautoInstallSinglePackage`

mvn schone installatie -PautoInstallSinglePackage

De AEM-basispagina configureren

Met het AEM opgestelde Project, is er één laatste stap om de Redacteur van het KUUROORD voor te bereiden om onze Verre KUUROORD te laden. In AEM, merk de pagina van AEM die aan de wortel van het KUUROORD, /content/wknd-app/us/en/home beantwoordt, door het Archetype van het Project van AEM wordt geproduceerd.

Aanmelden bij AEM-auteur
Navigeer aan Plaatsen > App WKND > gebruiken > en
Selecteer de WebND Pagina van het Huis van de App, en tik Eigenschappen
Navigeer aan het SPA lusje
Vul de Verre Configuratie van het KUUROORD uit
1. URL van de Gastheer van het KUUROORD: http://localhost:3000
  1. URL aan de wortel van het Verre KUUROORD
Tik sparen & Sluiten

Herinner dat wij het type van deze pagina in dat van a Verre pagina van het KUUROORD veranderden, wat ons toestaat om het KUUROORD lusje in zijn Eigenschappen van de Pagina te zien.

Deze configuratie moet slechts op de pagina van AEM worden geplaatst die aan de wortel van SPA beantwoordt. Alle AEM-pagina's onder deze pagina nemen de waarde over.

Gefeliciteerd

U hebt nu AEM-configuraties voorbereid en deze geïmplementeerd op uw lokale AEM-auteur! Nu weet u hoe:

Verwijder het door Archetype van het Project van AEM gegenereerde SPA door opmerkingen te maken over de afhankelijkheden in ui.frontend
Voeg het Verschuiven Toewijzingen aan AEM toe die de routes van het KUUROORD aan middelen in AEM in kaart brengen
Stel AEM in voor het delen van bronnen van kruisoorsprong en het delen van beveiligingsbeleid waarmee de externe SPA inhoud van AEM kan verbruiken
AEM-project implementeren voor uw lokale SDK Author-service van AEM
Markeer een Pagina van AEM als Verre wortel van SPA gebruikend het de paginabezit van URL van de Gastheer van het KUUROORD

Volgende stappen

Met gevormde AEM, kunnen wij op bootstrapping het Verre KUUROORDmet steun voor editable gebieden gebruikend de Redacteur van het KUUROORD van AEM concentreren!

recommendation-more-help

e25b6834-e87f-4ff3-ba56-4cd16cdfdec4