Documentação AEM Tutoriais do AEM Tutorial do AEM Headless

Configurar o AEM para o editor do SPA

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

Criado para:

Iniciante
Desenvolvedor

Embora a base de código do SPA seja gerenciada fora do AEM, um projeto do AEM é necessário para configurar requisitos de configuração e conteúdo de suporte. Este capítulo aborda a criação de um projeto AEM que contém as configurações necessárias:

Proxies dos Componentes principais do WCM no AEM
Proxy da página SPA remota AEM
Modelos de página AEM SPA remoto
SPA Páginas AEM remotas da linha de base
Subprojeto para definir mapeamentos de URL de AEM para SPA
Pastas de configuração do OSGi

Baixar o projeto base no GitHub

Baixe o projeto aem-guides-wknd-graphql de Github.com. Ele conterá alguns arquivos de linha de base usados neste projeto.

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

Criar um projeto AEM

Crie um projeto AEM no qual as configurações e o conteúdo da linha de base sejam gerenciados. Este projeto será gerado dentro da pasta remote-spa-tutorial do projeto aem-guides-wknd-graphql clonado.

Sempre usar a versão mais recente do Arquétipo 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

O último comando simplesmente renomeia a pasta do projeto AEM para que fique claro que é o projeto AEM e não deve ser confundido com SPA Remoto_

Enquanto frontendModule="react" for especificado, o projeto ui.frontend não será usado para o caso de uso de SPA Remoto. O SPA é desenvolvido e gerenciado externamente para AEM e só usa o AEM como uma API de conteúdo. O sinalizador frontendModule="react" é necessário para o projeto incluir as dependências do Java™ do AEM spa-project e configurar os Modelos de página do SPA remoto.

O Arquétipo de Projeto AEM gera os seguintes elementos que são usados para configurar o AEM para integração com o SPA.

Proxies de Componentes Principais de WCM do AEM em ui.apps/src/.../apps/wknd-app/components
AEM Proxy de página remota SPA em ui.apps/src/.../apps/wknd-app/components/remotepage
Modelos de página AEM em ui.content/src/.../conf/wknd-app/settings/wcm/templates
Subprojeto para definir mapeamentos de conteúdo em ui.content/src/...
SPA Páginas AEM remotas da linha de base em ui.content/src/.../content/wknd-app
Pastas de configuração OSGi em ui.config/src/.../apps/wknd-app/osgiconfig

Com a geração do projeto base AEM, alguns ajustes garantem a compatibilidade do Editor de SPA com o SPA remoto.

Remover projeto ui.frontend

Como o SPA é um SPA remoto, suponha que ele seja desenvolvido e gerenciado fora do projeto AEM. Para evitar conflitos, remova a implantação do projeto ui.frontend. Se o projeto ui.frontend não for removido, dois SPA, o SPA padrão fornecido no projeto ui.frontend e o SPA AEM SPA remoto, serão carregados ao mesmo tempo no Editor de.

Abra o projeto AEM (~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app) no IDE
Abrir a raiz pom.xml

Comente o <module>ui.frontend</module fora da lista <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>

O arquivo pom.xml deve ser semelhante a:

Remover o módulo ui.frontend do pom do reator

Abrir o ui.apps/pom.xml

Comente o <dependency> em <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>

O arquivo ui.apps/pom.xml deve ser semelhante a:

Remover dependência ui.frontend de ui.apps

Se o projeto AEM foi compilado antes dessas alterações, exclua manualmente a Biblioteca do Cliente gerada por ui.frontend do projeto ui.apps em ui.apps/src/main/content/jcr_root/apps/wknd-app/clientlibs/clientlib-react.

Mapeamento de conteúdo do AEM

Para que o AEM carregue o SPA remoto no Editor de SPA, os mapeamentos entre as rotas do SPA e as Páginas do AEM usadas para abrir e criar conteúdo devem ser estabelecidos.

A importância dessa configuração é explorada posteriormente.

O mapeamento pode ser feito com o Mapeamento do Sling definido em /etc/map.

No IDE, abra o subprojeto ui.content
Navegue até src/main/content/jcr_root
Criar uma pasta etc
Em etc, crie uma pasta map
Em map, crie uma pasta http

Em http, crie um arquivo .content.xml com o conteúdo:

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>

Em http , crie uma pasta localhost_any

Em localhost_any, crie um arquivo .content.xml com o conteúdo:

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>

Em localhost_any , crie uma pasta wknd-app-routes-adventure

Em wknd-app-routes-adventure, crie um arquivo .content.xml com o conteúdo:

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

Adicione os nós de mapeamento a ui.content/src/main/content/META-INF/vault/filter.xml para eles incluídos no pacote 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>

A estrutura de pastas e os arquivos .context.xml devem ter a seguinte aparência:

Mapeamento do Sling

O arquivo filter.xml deve ser semelhante a:

Mapeamento do Sling

Agora, quando o projeto AEM é implantado, essas configurações são incluídas automaticamente.

O AEM dos efeitos do Mapeamento do Sling em execução em http e localhost, portanto, somente oferece suporte ao desenvolvimento local. Ao implantar no AEM as a Cloud Service, mapeamentos Sling semelhantes devem ser adicionados para direcionar https e os domínios apropriados do AEM as a Cloud Service. Para obter mais informações, consulte a documentação de Mapeamento do Sling.

Políticas de segurança do Compartilhamento de recursos entre origens

Em seguida, configure o AEM para proteger o conteúdo para que somente esse SPA possa acessar o conteúdo do AEM. Configurar o Compartilhamento de Recursos entre Origens no AEM.

No IDE, abra o subprojeto Maven ui.config
Navegar src/main/content/jcr_root/apps/wknd-app/osgiconfig/config
Criar um arquivo chamado com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json

Adicione o seguinte ao arquivo:

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

O arquivo com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json deve ser semelhante a:

Configuração CORS do editor SPA

Os principais elementos de configuração são:

alloworigin especifica quais hosts têm permissão para recuperar conteúdo do AEM.
- localhost:3000 é adicionado para oferecer suporte ao SPA executado localmente
- https://external-hosted-app atua como um espaço reservado a ser substituído pelo domínio em que o SPA Remoto está hospedado.
allowedpaths especifique quais caminhos no AEM são cobertos por esta configuração do CORS. O padrão permite o acesso a todo o conteúdo no AEM, no entanto, ele pode ser controlado apenas para os caminhos específicos que o SPA pode acessar, por exemplo: /content/wknd-app.

Definir página AEM como modelo de página SPA remota

O Arquétipo de Projeto AEM gera um projeto preparado para a integração do AEM com um SPA remoto, mas requer um pequeno, mas importante ajuste na estrutura da página do AEM gerada automaticamente. A página AEM gerada automaticamente deve ter seu tipo alterado para página SPA remota, em vez de uma página SPA.

No IDE, abra o subprojeto ui.content
Abrir para src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml

Atualizar este .content.xml arquivo com:

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

As alterações principais são atualizações no nó jcr:content:

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

O arquivo src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml deve ser semelhante a:

Atualizações de .content.xml na página inicial

Essas alterações permitem que esta página, que atua como a raiz do SPA no AEM, carregue o SPA remoto no editor do SPA.

NOTE

Se este projeto foi implantado anteriormente no AEM, certifique-se de excluir a página AEM como Sites > Aplicativo WKND > us > en > Página Inicial do Aplicativo WKND, pois o projeto ui.content está definido como mesclar nós, em vez de atualizar.

Esta página também pode ser removida e recriada como uma Página do SPA Remoto no próprio AEM. No entanto, como esta página é criada automaticamente no projeto ui.content, é melhor atualizá-la na base de código.

Implantar o projeto AEM no AEM SDK

Verifique se o serviço de Autor do AEM está em execução na porta 4502
Na linha de comando, navegue até a raiz do projeto Maven para AEM

Use o Maven para implantar o projeto no serviço de autor do SDK do AEM local

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

mvn limpar instalação -PautoInstallSinglePackage

Configurar a página raiz do AEM

Com o Projeto AEM implantado, há um último passo para preparar o Editor de SPA para carregar nosso SPA remoto. No AEM, marque a página AEM que corresponde à raiz do SPA,/content/wknd-app/us/en/home, gerada pelo Arquétipo de Projeto AEM.

Faça logon no AEM Author
Navegue até Sites > Aplicativo WKND > us > en
Selecione a Página inicial do aplicativo WKND e toque em Propriedades
Navegue até a guia SPA
Preencha a Configuração do SPA Remoto
- URL do Host SPA: http://localhost:3000
  - O URL para a raiz do SPA remoto
Toque em Salvar e fechar

Lembre-se de que alteramos o tipo desta página para Página do SPA Remoto, que é o que nos permite ver a guia SPA em suas Propriedades da Página.

Essa configuração só deve ser definida na página do AEM que corresponde à raiz do SPA. Todas as páginas AEM abaixo dessa página herdam o valor.

Parabéns

Agora você preparou configurações do AEM e as implantou no autor local do AEM! Agora você sabe como:

Remova o SPA gerado pelo Arquétipo de Projeto AEM, comentando as dependências em ui.frontend
Adicionar mapeamentos Sling ao AEM que mapeiam as rotas SPA para recursos no AEM
Configurar políticas de segurança de compartilhamento de recursos entre origens do AEM que permitem que o SPA remoto consuma conteúdo do AEM
Implantar o projeto AEM no serviço de autor do SDK do AEM local
Marcar uma página AEM como a raiz de SPA remota usando a propriedade de página do URL do host do SPA

Próximas etapas

Com o AEM configurado, podemos nos concentrar em bootstrapping do SPA remoto com suporte para áreas editáveis usando o Editor de AEM SPA!

recommendation-more-help

e25b6834-e87f-4ff3-ba56-4cd16cdfdec4