Configurare AEM per l’editor SPA

Mentre la base di codice dell’SPA è gestita al di fuori dell’AEM, è necessario un progetto AEM per configurare i requisiti di configurazione e contenuto di supporto. Questo capitolo illustra la creazione di un progetto AEM che contiene le configurazioni necessarie:

Proxy dei componenti core WCM AEM
Proxy pagina SPA remoto AEM
Modelli di pagina per SPA remoto AEM
Pagine AEM SPA remote al basale
Sottoprogetto per definire le mappature da SPA a URL AEM
Cartelle di configurazione OSGi

Scarica il progetto di base da GitHub

Scarica il file aem-guides-wknd-graphql progetto 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

Creare un progetto AEM

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

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 deve essere confuso con SPA remoto_

Mentre frontendModule="react" è specificato, il ui.frontend progetto non utilizzato per il caso di utilizzo dell’SPA remoto. L’SPA è sviluppato e gestito esternamente all’AEM e utilizza l’AEM solo come contenuto API. Il frontendModule="react" Il flag è obbligatorio per il progetto e include spa-project dipendenze Java™ dell’AEM e configurazione dei modelli di pagina per l’SPA remoto.

L’Archetipo progetto AEM genera i seguenti elementi che vengono utilizzati per configurare l’AEM per l’integrazione con l’SPA.

Proxy dei componenti core WCM AEM a ui.apps/src/.../apps/wknd-app/components
Proxy pagina remota SPA AEM a ui.apps/src/.../apps/wknd-app/components/remotepage
Modelli di pagina AEM a ui.content/src/.../conf/wknd-app/settings/wcm/templates
Sottoprogetto per definire le mappature del contenuto a ui.content/src/...
Pagine AEM SPA remote al basale a ui.content/src/.../content/wknd-app
Cartelle di configurazione OSGi a ui.config/src/.../apps/wknd-app/osgiconfig

Quando viene generato il progetto AEM di base, alcune modifiche garantiscono la compatibilità dell'Editor SPA con l'SPA remoto.

Rimuovi progetto ui.frontend

Poiché l'SPA è un SPA remoto, supponiamo che sia sviluppato e gestito al di fuori del progetto AEM. Per evitare conflitti, rimuovere ui.frontend del progetto dalla distribuzione. Se il ui.frontend progetto non viene rimosso, due SPA, l'SPA predefinito fornito nel ui.frontend e il Remote SPA, vengono caricati contemporaneamente nell’Editor SPA dell’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 il <module>ui.frontend</module fuori dal <modules> list

<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 pom.xml il file dovrebbe avere un aspetto simile a:

Rimuovi il modulo ui.frontend dal POM di Reactor

Apri ui.apps/pom.xml

Commenta il <dependency> il <artifactId>wknd-app.ui.frontend</artifactId>

<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 ui.apps/pom.xml il file dovrebbe avere un aspetto simile a:

Rimuovi la dipendenza ui.frontend da ui.apps

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

Mappatura dei contenuti AEM

Affinché l’AEM possa caricare l’SPA remoto nell’editor SPA, è necessario stabilire le mappature tra le route SPA e le pagine AEM utilizzate per aprire e creare i contenuti.

L’importanza di questa configurazione viene esaminata in seguito.

La mappatura può essere eseguita con Mappatura Sling definito in /etc/map.

Nell’IDE, apri il file ui.content sottoprogetto
Accedi a src/main/content/jcr_root
Crea una cartella . etc
In entrata etc, crea una cartella map
In entrata map, crea una cartella http

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

<?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 entrata http , crea una cartella localhost_any

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

<?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 entrata localhost_any , crea una cartella wknd-app-routes-adventure

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

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

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

<?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 .context.xml i file dovrebbero avere un aspetto simile a:

Mappatura Sling

Il filter.xml il file dovrebbe avere un aspetto simile a:

Mappatura Sling

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

Gli effetti di mappatura Sling AEM in esecuzione su http e localhostquindi sostenere solo lo sviluppo locale. Durante l’implementazione in AEM as a Cloud Service, è necessario aggiungere mappature Sling simili a quella di destinazione https e i settori AEM as a Cloud Service appropriati. Per ulteriori informazioni, vedere Documentazione di Sling Mapping.

Criteri di sicurezza per la condivisione delle risorse tra diverse origini

Quindi, configura l’AEM per proteggere il contenuto in modo che solo questo SPA possa accedere al contenuto dell’AEM. Configura Condivisione delle risorse tra le diverse origini nell’AEM.

Nell’IDE, apri il file ui.config Sottoprogetto Maven
Naviga 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:

{
    "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 com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json il file dovrebbe avere un aspetto simile a:

Configurazione CORS dell’editor SPA

Gli elementi chiave della configurazione sono:

alloworigin specifica gli host autorizzati a recuperare il contenuto dall’AEM.
- localhost:3000 viene aggiunto per supportare l’SPA in esecuzione localmente
- https://external-hosted-app funge da segnaposto da sostituire con il dominio su cui è ospitato l’SPA remoto.
allowedpaths specifica quali percorsi in AEM sono coperti da questa configurazione CORS. L’impostazione predefinita consente l’accesso a tutto il contenuto dell’AEM, tuttavia questo può essere limitato ai percorsi specifici a cui l’SPA può accedere, ad esempio: /content/wknd-app.

Imposta pagina AEM come modello di pagina SPA remoto

L’Archetipo progetto AEM genera un progetto avviato per l’integrazione dell’AEM con un SPA remoto, ma richiede un piccolo ma importante adeguamento alla struttura della pagina AEM generata automaticamente. Il tipo della pagina AEM generata automaticamente deve essere modificato in Pagina SPA remoto, anziché un Pagina SPA.

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

Aggiorna questo .content.xml file con:

<?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 principali sono aggiornamenti al jcr:content nodo:

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

Il src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml il file dovrebbe avere un aspetto simile a:

Aggiornamenti .content.xml della home page

Queste modifiche consentono a questa pagina, che funge da radice SPA nell'AEM, di caricare l'SPA remoto nell'editor SPA.

NOTA

Se questo progetto è stato distribuito in precedenza all’AEM, assicurati di eliminare la pagina AEM con il seguente comando: Sites > App WKND > us > it > Home page app WKND, come ui.content il progetto è impostato su unione nodi, anziché aggiorna.

Questa pagina può anche essere rimossa e ricreata come pagina SPA remota nell’AEM stesso, tuttavia poiché questa pagina viene creata automaticamente nell’ ui.content progetto è consigliabile aggiornarlo nella base di codice.

Implementare il progetto AEM nell’SDK dell’AEM

Verifica che il servizio AEM Author sia in esecuzione sulla porta 4502
Dalla riga di comando, accedi alla directory principale del progetto AEM Maven
Utilizza Maven per distribuire il progetto al servizio di authoring dell’SDK AEM locale
```
$ mvn clean install -PautoInstallSinglePackage
```

Configurare la pagina AEM principale

Con il progetto AEM implementato, c'è un ultimo passaggio per preparare l'Editor SPA per caricare il nostro SPA remoto. In AEM, contrassegna la pagina AEM che corrisponde alla radice SPA,/content/wknd-app/us/en/home, generato dall’archetipo del progetto AEM.

Accedi ad AEM Author
Accedi a Sites > App WKND > us > it
Seleziona la Home page dell’app WKND, e tocca Proprietà
Accedi a SPA scheda
Compila il Configurazione remota SPA
- URL host SPA: http://localhost:3000
  - URL della radice dell'SPA remoto
Tocca Salva e chiudi

Ricorda che abbiamo cambiato il tipo di questa pagina in quello di Pagina SPA remoto, che è ciò che ci consente di visualizzare SPA scheda in Proprietà pagina.

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

Congratulazioni

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

Rimuovi l’SPA generato da Archetipo progetto AEM commentando le dipendenze in ui.frontend
Aggiungere mappature Sling all’AEM che mappano le rotte dell’SPA alle risorse dell’AEM
Imposta i criteri di sicurezza per la condivisione delle risorse tra le origini dell’AEM che consentono all’SPA remoto di utilizzare contenuti provenienti dall’AEM
Distribuire il progetto AEM nel servizio di authoring dell’SDK AEM locale
Contrassegnare una pagina AEM come radice SPA remota utilizzando la proprietà di pagina URL host SPA

Passaggi successivi

Con l'AEM configurato, possiamo concentrarci su avvio automatico dell’SPA remoto con supporto per le aree modificabili tramite l’Editor SPA dell’AEM.

Configurare AEM per l’editor SPA

Scarica il progetto di base da GitHub

Creare un progetto AEM

Rimuovi progetto ui.frontend

Mappatura dei contenuti AEM

Criteri di sicurezza per la condivisione delle risorse tra diverse origini

Imposta pagina AEM come modello di pagina SPA remoto

Implementare il progetto AEM nell’SDK dell’AEM

Configurare la pagina AEM principale

Congratulazioni

Passaggi successivi

Risorse Business.Adobe.com

In questa pagina

Visualizza successivo:

Scopri

Documentazione

Community

Assistenza

Risorse

Account Adobe

Adobe