Configurare AEM per l’editor SPA

Ultimo aggiornamento: 2024-01-26
  • Argomenti:
  • SPA Editor
    Visualizza ulteriori informazioni su questo argomento
  • Core Components
    Visualizza ulteriori informazioni su questo argomento
  • APIs
    Visualizza ulteriori informazioni su questo argomento
  • Developing
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Beginner
    Developer

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.

  1. Apri il progetto AEM (~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app) nell’IDE

  2. Apri la directory principale pom.xml

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

  4. Apri ui.apps/pom.xml

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

  1. Nell’IDE, apri il file ui.content sottoprogetto

  2. Accedi a src/main/content/jcr_root

  3. Creare una cartella etc

  4. In entrata etc, crea una cartella map

  5. In entrata map, crea una cartella http

  6. 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>
    
  7. In entrata http , crea una cartella localhost_any

  8. 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>
    
  9. In entrata localhost_any , crea una cartella wknd-app-routes-adventure

  10. 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"/>
    
  11. 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.

  1. Nell’IDE, apri il file ui.config Sottoprogetto Maven

  2. Naviga src/main/content/jcr_root/apps/wknd-app/osgiconfig/config

  3. Crea un file denominato com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json

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

  1. Nell’IDE, apri il file ui.content sottoprogetto

  2. Apri a src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml

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

  1. Verificare che il servizio di creazione AEM sia in esecuzione sulla porta 4502

  2. Dalla riga di comando, accedi alla directory principale del progetto AEM Maven

  3. Utilizza Maven per distribuire il progetto al servizio di authoring dell’SDK AEM locale

    $ mvn clean install -PautoInstallSinglePackage
    

    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.

  1. Accedi a AEM Author

  2. Accedi a Sites > App WKND > us > it

  3. Seleziona la Home page dell’app WKND, e tocca Proprietà

    Home page dell’app WKND - Proprietà

  4. Accedi a SPA scheda

  5. Compila il Configurazione remota SPA

    • URL host SPA: http://localhost:3000
      • URL della radice dell'SPA remoto

    Home page dell’app WKND - Configurazione SPA remota

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

Complimenti

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.

In questa pagina