Documentazione AEM Tutorial su AEM Tutorial di AEM Headless

Configurare AEM per l’editor SPA

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

Si applica a:
Experience Manager 6.5
Experience Manager as a Cloud Service

Argomenti:
API
Sviluppo

Creato per:

Principiante
Sviluppatore

IMPORTANT

L'editor per applicazioni a pagina singola (o editor SPA) è stato dichiarato obsoleto per i nuovi progetti. Continua a essere supportato da Adobe per i progetti esistenti, ma non dovrebbe essere utilizzato per i nuovi progetti. Gli editor preferiti per la gestione dei contenuti headless in AEM sono ora i seguenti:

Editor universale per la modifica visiva di contenuti headless.
Editor frammenti di contenuto per la modifica di contenuti headless basata su modulo.

Mentre la base di codice dell’applicazione a pagina singola viene gestita al di fuori di AEM, è necessario un progetto AEM per configurare i requisiti di configurazione e contenuto che supportano. Questo capitolo illustra come creare un progetto AEM contenente le configurazioni necessarie:

Proxy dei componenti core WCM di AEM
Proxy pagina applicazione a pagina remota AEM
Modelli di pagina per applicazioni a pagina singola remote di AEM
Pagine AEM delle applicazioni a pagina singola remote previste
Sottoprogetto per definire le mappature URL da applicazione a pagina singola ad AEM
Cartelle di configurazione OSGi

Scarica il progetto di base da GitHub

Scarica il progetto aem-guides-wknd-graphql da Github.com. Conterrà alcuni file di base utilizzati in questo progetto.

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

Creazione di un progetto AEM

Crea un progetto AEM in cui vengono gestite le configurazioni e i contenuti della linea di base. Questo progetto verrà generato nella cartella remote-spa-tutorial del progetto aem-guides-wknd-graphql clonato.

Utilizza sempre la versione più recente di Archetipo AEM.

$ 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

_L’ultimo comando rinomina semplicemente la cartella del progetto AEM in modo che sia chiaro che si tratta del progetto AEM e non vada confuso con l’applicazione a pagina singola remota**

Se si specifica frontendModule="react", il progetto ui.frontend non viene utilizzato per il caso di utilizzo dell'applicazione a pagina singola remota. L’applicazione a pagina singola viene sviluppata e gestita esternamente ad AEM e utilizza AEM solo come API di contenuto. Il flag frontendModule="react" è richiesto per il progetto e include le dipendenze Java™ di AEM spa-project e configura i modelli di pagina per applicazioni a pagina singola remote.

L’Archetipo progetto AEM genera i seguenti elementi che vengono utilizzati per configurare AEM per l’integrazione con l’applicazione a pagina singola.

Proxy dei componenti core WCM di AEM in ui.apps/src/.../apps/wknd-app/components
Proxy pagina remota per applicazioni a pagina singola di AEM alle ui.apps/src/.../apps/wknd-app/components/remotepage
Modelli di pagina AEM in ui.content/src/.../conf/wknd-app/settings/wcm/templates
Sottoprogetto per definire le mappature dei contenuti in ui.content/src/...
Pagine AEM SPA remote previste alle ui.content/src/.../content/wknd-app
Cartelle di configurazione OSGi in ui.config/src/.../apps/wknd-app/osgiconfig

Quando viene generato il progetto di base AEM, alcune modifiche garantiscono la compatibilità dell’editor SPA con le applicazioni a pagina singola remote.

Rimuovi progetto ui.frontend

Poiché l’applicazione a pagina singola è un’applicazione a pagina singola remota, supponiamo che sia sviluppata e gestita al di fuori del progetto AEM. Per evitare conflitti, rimuovere il progetto ui.frontend dalla distribuzione. Se il progetto ui.frontend non viene rimosso, due applicazioni a pagina singola, quella predefinita fornita nel progetto ui.frontend e quella remota, vengono caricate contemporaneamente nell'editor di applicazioni a pagina singola di AEM.

Apri il progetto AEM (~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app) nell'IDE
Apri la directory principale pom.xml

Commenta <module>ui.frontend</module dall'elenco <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>

Il file pom.xml deve essere simile al seguente:

Rimuovi il modulo ui.frontend dal POM di Reactor

Apri ui.apps/pom.xml

Commento su <dependency> il <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>

Il file ui.apps/pom.xml deve essere simile al seguente:

Rimuovi la dipendenza ui.frontend da ui.apps

Se il progetto AEM è stato creato prima di queste modifiche, eliminare manualmente la libreria client generata da ui.frontend dal progetto ui.apps in ui.apps/src/main/content/jcr_root/apps/wknd-app/clientlibs/clientlib-react.

Mappatura dei contenuti AEM

Affinché AEM possa caricare l’applicazione a pagina singola remota nell’editor di applicazioni a pagina singola, è necessario stabilire le mappature tra le route dell’applicazione a pagina singola e le pagine AEM utilizzate per aprire e creare i contenuti.

L’importanza di questa configurazione viene esaminata in seguito.

È possibile eseguire la mappatura con Mappatura Sling definita in /etc/map.

Nell'IDE, apri il sottoprogetto ui.content
Passa a src/main/content/jcr_root
Crea una cartella etc
In etc, creare una cartella map
In map, creare una cartella http

In http, creare un file .content.xml con il contenuto:

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>

In http , creare una cartella localhost_any

In localhost_any, creare un file .content.xml con il contenuto:

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>

In localhost_any , creare una cartella wknd-app-routes-adventure

In wknd-app-routes-adventure, creare un file .content.xml con il contenuto:

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

Aggiungere i nodi di mappatura a ui.content/src/main/content/META-INF/vault/filter.xml a quelli inclusi nel pacchetto AEM.

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>

La struttura delle cartelle e i file .context.xml dovrebbero essere simili a:

Mappatura Sling

Il file filter.xml deve essere simile al seguente:

Mappatura Sling

Ora, quando il progetto AEM viene implementato, queste configurazioni vengono incluse automaticamente.

Gli effetti di mappatura Sling in AEM sono in esecuzione su http e localhost, pertanto supportano solo lo sviluppo locale. Durante la distribuzione in AEM as a Cloud Service, è necessario aggiungere mappature Sling simili che hanno come destinazione https e i domini AEM as a Cloud Service appropriati. Per ulteriori informazioni, consulta la documentazione sulle mappature Sling.

Criteri di sicurezza per la condivisione delle risorse tra diverse origini

Quindi, configura AEM per proteggere il contenuto in modo che solo questa applicazione a pagina singola possa accedere al contenuto di AEM. Configura Condivisione risorse tra le origini in AEM.

Nell'IDE aprire il sottoprogetto Maven ui.config
Passa a src/main/content/jcr_root/apps/wknd-app/osgiconfig/config
Crea un file denominato com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json

Aggiungi quanto segue al file:

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

Il file com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json deve essere simile al seguente:

Configurazione CORS editor SPA

Gli elementi chiave della configurazione sono:

alloworigin specifica gli host autorizzati a recuperare il contenuto da AEM.
- Aggiunta di localhost:3000 per supportare l'applicazione a pagina singola in esecuzione localmente
- https://external-hosted-app funge da segnaposto da sostituire con il dominio su cui è ospitata l'applicazione a pagina singola remota.
allowedpaths specifica quali percorsi in AEM sono coperti da questa configurazione CORS. L'impostazione predefinita consente l'accesso a tutto il contenuto in AEM, tuttavia questo può essere limitato ai percorsi specifici a cui l'applicazione a pagina singola può accedere, ad esempio: /content/wknd-app.

Imposta pagina AEM come modello pagina applicazione a pagina singola remota

L’Archetipo progetto AEM genera un progetto avviato per l’integrazione di AEM con un’applicazione a pagina singola remota, ma richiede una piccola ma importante modifica alla struttura della pagina AEM generata automaticamente. Il tipo della pagina AEM generata automaticamente deve essere modificato in Pagina applicazione a pagina singola remota, anziché in Pagina applicazione a pagina singola.

Nell'IDE, apri il sottoprogetto ui.content
Apri a src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml

Aggiorna il file .content.xml con:

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>

Le modifiche chiave sono aggiornamenti al nodo jcr:content:

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

Il file src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml deve essere simile al seguente:

Aggiornamenti della home page .content.xml

Queste modifiche consentono a questa pagina, che funge da directory principale dell’applicazione a pagina singola in AEM, di caricare l’applicazione a pagina singola remota nell’editor di applicazioni a pagina singola.

NOTE

Se questo progetto è stato distribuito in precedenza ad AEM, assicurati di eliminare la pagina AEM come Sites > App WKND > us > en > Home page app WKND, in quanto il progetto ui.content è impostato su merge nodi, anziché su update.

È inoltre possibile rimuovere e ricreare la pagina come pagina di applicazioni a pagina singola remota in AEM, tuttavia, poiché la pagina viene creata automaticamente nel progetto ui.content, è consigliabile aggiornarla nella base di codice.

Distribuire il progetto AEM in AEM SDK

Verifica che il servizio AEM Author sia in esecuzione sulla porta 4502
Dalla riga di comando, passa alla directory principale del progetto AEM Maven

Utilizza Maven per distribuire il progetto al servizio AEM SDK Author locale

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

mvn installazione pulita -PautoInstallSinglePackage

Configurare la pagina AEM principale

Con il progetto AEM implementato, c’è un ultimo passaggio per preparare l’Editor SPA per caricare la nostra SPA remota. In AEM, contrassegna la pagina AEM che corrisponde alla radice dell'applicazione a pagina singola, /content/wknd-app/us/en/home, generata dall'archetipo del progetto AEM.

Accedi ad AEM Author
Passa a Sites > App WKND > us > en
Seleziona la home page app WKND e tocca Proprietà
Passa alla scheda SPA
Compila la configurazione SPA remota
1. URL host applicazioni a pagina singola: http://localhost:3000
  1. URL della radice dell'applicazione a pagina singola remota
Tocca Salva e chiudi

Ricorda che il tipo di questa pagina è stato modificato in Pagina applicazione a pagina singola remota, che è ciò che ci consente di visualizzare la scheda Applicazione a pagina singola nelle relative Proprietà pagina.

Questa configurazione deve essere impostata solo sulla pagina AEM che corrisponde alla radice dell’applicazione a pagina singola. Tutte le pagine di AEM sotto questa pagina ereditano il valore.

Complimenti

Hai preparato le configurazioni di AEM e le hai distribuite all’autore AEM locale. Ora sai come:

Rimuovere l'applicazione a pagina singola generata da Archetipo progetto AEM inserendo un commento sulle dipendenze in ui.frontend
Aggiungi mappature Sling ad AEM che mappano i percorsi SPA alle risorse in AEM
Imposta i criteri di sicurezza di AEM per la condivisione delle risorse tra diverse origini che consentono all’applicazione a pagina singola remota di utilizzare contenuti da AEM
Distribuire il progetto AEM nel servizio AEM SDK Author locale
Contrassegna una pagina AEM come pagina principale dell’applicazione a pagina singola remota utilizzando la proprietà della pagina URL host applicazione a pagina singola

Passaggi successivi

Con AEM configurato, possiamo concentrarci sul avvio dell'applicazione a pagina singola remota con supporto per le aree modificabili tramite l'Editor SPA di AEM.

recommendation-more-help

e25b6834-e87f-4ff3-ba56-4cd16cdfdec4