Configuração do AEM para o Editor SPA
- O editor universal para editar conteúdo headless visualmente.
- O editor de fragmentos de conteúdo para editar conteúdo headless com base em formulários.
Embora a base de código de SPA seja gerenciada fora do AEM, um projeto do AEM é necessário para configurar os requisitos de configuração e conteúdo de suporte. Este capítulo aborda a criação de um projeto do AEM que contém as configurações necessárias:
- Proxies dos Componentes principais do AEM WCM
- Proxy de página do SPA remoto do AEM
- Modelos de página de SPA remoto do AEM
- Páginas do AEM do SPA Remoto da Linha de Base
- Subprojeto para definir mapeamentos de URL de SPA para AEM
- 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 do AEM
Crie um projeto do AEM em que 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 do 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 do AEM para que fique claro que é o projeto do 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 o AEM e usa somente o AEM como uma API de conteúdo. O sinalizador frontendModule="react" é necessário para o projeto incluir as spa-project dependências do AEM Java™ e configurar os Modelos de página do SPA Remoto.
O Arquétipo de projeto do AEM gera os seguintes elementos que são usados para configurar o AEM para integração com o SPA.
- Proxies de Componentes Principais do AEM WCM em
ui.apps/src/.../apps/wknd-app/components - Proxy de página remota do AEM SPA em
ui.apps/src/.../apps/wknd-app/components/remotepage - Modelos de página do AEM em
ui.content/src/.../conf/wknd-app/settings/wcm/templates - Subprojeto para definir mapeamentos de conteúdo em
ui.content/src/... - Páginas do AEM do SPA Remoto 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 o projeto básico do AEM gerado, alguns ajustes garantem a compatibilidade do Editor de SPA com SPAs remotos.
Remover projeto ui.frontend
Como o SPA é um SPA remoto, suponha que ele seja desenvolvido e gerenciado fora do projeto do AEM. Para evitar conflitos, remova a implantação do projeto ui.frontend. Se o projeto ui.frontend não for removido, dois SPAs, o SPA padrão fornecido no projeto ui.frontend e o SPA Remoto, serão carregados ao mesmo tempo no Editor de SPA do AEM.
-
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</modulefora da lista<modules>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>O arquivo
pom.xmldeve ser semelhante a:
-
Abrir o
ui.apps/pom.xml -
Comente o
<dependency>em<artifactId>wknd-app.ui.frontend</artifactId>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>O arquivo
ui.apps/pom.xmldeve ser semelhante a:
Se o projeto AEM foi compilado antes dessas alterações, exclua manualmente a Biblioteca do Cliente gerada 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 pastamap -
Em
map, crie uma pastahttp -
Em
http, crie um arquivo.content.xmlcom o conteúdo: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> -
Em
http, crie uma pastalocalhost_any -
Em
localhost_any, crie um arquivo.content.xmlcom o conteúdo: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> -
Em
localhost_any, crie uma pastawknd-app-routes-adventure -
Em
wknd-app-routes-adventure, crie um arquivo.content.xmlcom o conteúdo: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"/> -
Adicione os nós de mapeamento a
ui.content/src/main/content/META-INF/vault/filter.xmlpara eles incluídos no pacote AEM.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>
A estrutura de pastas e os arquivos .context.xml devem ter a seguinte aparência:
O arquivo filter.xml deve ser semelhante a:
Agora, quando o projeto do AEM é implantado, essas configurações são incluídas automaticamente.
O Mapeamento do Sling afeta o AEM em execução em http e localhost, portanto, oferece suporte apenas 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. Configure 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 { "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:
Os principais elementos de configuração são:
-
alloworiginespecifica quais hosts têm permissão para recuperar conteúdo do AEM.localhost:3000foi adicionado para oferecer suporte ao SPA executado localmentehttps://external-hosted-appatua como um espaço reservado a ser substituído pelo domínio em que o SPA Remoto está hospedado.
-
allowedpathsespecifique quais caminhos no AEM são cobertos por esta configuração do CORS. O padrão permite acesso a todo o conteúdo no AEM, no entanto, isso pode ser controlado apenas para os caminhos específicos que o SPA pode acessar, por exemplo:/content/wknd-app.
Definir página do AEM como modelo de página do SPA remoto
O Arquétipo de projeto do AEM gera um projeto preparado para a integração do AEM com um SPA remoto, mas requer um pequeno, mas importante ajuste à estrutura de página do AEM gerada automaticamente. A página do AEM gerada automaticamente deve ter seu tipo alterado para Página do SPA Remoto, em vez de uma página do 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.xmlarquivo com: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>
As alterações principais são atualizações no nó jcr:content:
cq:templatea/conf/wknd-app/settings/wcm/templates/spa-remote-pagesling:resourceTypeawknd-app/components/remotepage
O arquivo src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml deve ser semelhante a:
Essas alterações permitem que essa página, que atua como a raiz do SPA no AEM, carregue o SPA remoto no Editor de SPA.
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 de SPA Remoto no próprio AEM. No entanto, como essa página é criada automaticamente no projeto ui.content, é melhor atualizá-la na base de código.
Implantar o projeto do AEM no AEM SDK
-
Verifique se o serviço do Autor do AEM está em execução na porta 4502
-
Na linha de comando, navegue até a raiz do projeto AEM Maven.
-
Use o Maven para implantar o projeto no serviço de autor local do AEM SDK
code language-none $ mvn clean install -PautoInstallSinglePackage
Configurar a página raiz do AEM
Com o projeto do AEM implantado, há uma última etapa para preparar o Editor de SPA para carregar nosso SPA remoto. No AEM, marque a página do AEM que corresponde à raiz do SPA, /content/wknd-app/us/en/home, gerada pelo Arquétipo de projeto do 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 de SPA Remoto
- URL do Host SPA:
http://localhost:3000- O URL para a raiz do SPA remoto
- URL do Host SPA:
-
Toque em Salvar e fechar
Lembre-se de que alteramos o tipo desta página para o de uma Página de SPA Remoto, que é o que nos permite visualizar 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 do AEM abaixo dessa página herdam o valor.
Parabéns
Agora você preparou as 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 do AEM, comentando as dependências em
ui.frontend - Adicionar mapeamentos do Sling ao AEM que mapeiam as rotas de SPA para recursos no AEM
- Configure as políticas de segurança de Compartilhamento de recursos entre origens do AEM que permitem que o SPA remoto consuma conteúdo do AEM
- Implante o projeto do AEM no serviço de autor local do AEM SDK
- Marque uma página do AEM como a raiz do SPA remoto usando a propriedade da página URL do host do SPA
Próximas etapas
Com o AEM configurado, podemos nos concentrar em inicializar o SPA Remoto com suporte para áreas editáveis usando o AEM SPA Editor!