为SPA编辑器配置AEM

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

undefined
undefined

虽然SPA代码库在AEM之外进行管理，但需要使用AEM项目来设置支持配置和内容要求。本章介绍如何创建包含必要配置的AEM项目：

AEM WCM核心组件代理
AEM Remote SPA Page代理
AEM远程SPA页面模板
基线远程SPA AEM页
用于定义SPA到AEM URL映射的子项目
OSGi配置文件夹

从GitHub下载基本项目

从Github.com下载aem-guides-wknd-graphql项目。这将包含此项目中使用的一些基线文件。

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

创建AEM项目

创建管理配置和基线内容的AEM项目。此项目将在克隆的aem-guides-wknd-graphql项目的remote-spa-tutorial文件夹中生成。

始终使用最新版本的AEM Archetype。

$ 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

最后一个命令只是重命名了AEM项目文件夹，因此它显然是AEM项目，不要与远程SPA混淆_

在指定frontendModule="react"时，ui.frontend项目未用于远程SPA用例。 SPA是在外部开发并管理到AEM的，并且仅使用AEM作为内容API。项目需要frontendModule="react"标记才能包含spa-project个AEM Java™依赖项并设置远程SPA页面模板。

AEM项目原型会生成以下元素，这些元素用于配置AEM以便与SPA集成。

在ui.apps/src/.../apps/wknd-app/components处的 AEM WCM核心组件代理
AEM SPA Remote Page代理，位于ui.apps/src/.../apps/wknd-app/components/remotepage
AEM页面模板，位于ui.content/src/.../conf/wknd-app/settings/wcm/templates
子项目以定义位于ui.content/src/...的内容映射
基线远程SPA AEM页，位于ui.content/src/.../content/wknd-app
位于ui.config/src/.../apps/wknd-app/osgiconfig的OSGi配置文件夹

生成基本AEM项目后，进行了一些调整以确保SPA Editor与Remote SPA兼容。

移除ui.frontend项目

由于SPA是远程SPA，因此假定它是在AEM项目之外开发和管理的。为避免冲突，请从部署中删除ui.frontend项目。如果未删除ui.frontend项目，则会在AEM SPA编辑器中同时加载两个SPA(在ui.frontend项目和远程SPA中提供的默认SPA)。

在IDE中打开AEM项目(~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app)
打开根pom.xml

从<modules>列表中注释<module>ui.frontend</module

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>

pom.xml文件应如下所示：

从reactor pom中删除ui.frontend模块

打开ui.apps/pom.xml

在<artifactId>wknd-app.ui.frontend</artifactId>上注释掉<dependency>

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>

ui.apps/pom.xml文件应如下所示：

从ui.apps中删除ui.frontend依赖项

如果AEM项目是在这些更改之前生成的，请从位于ui.apps/src/main/content/jcr_root/apps/wknd-app/clientlibs/clientlib-react的ui.apps项目中手动删除ui.frontend生成的客户端库。

AEM内容映射

要让AEM在SPA编辑器中加载远程SPA，必须在SPA路由和用于打开和创作内容的AEM页面之间建立映射。

稍后将探讨此配置的重要性。

可以使用/etc/map中定义的Sling映射完成映射。

在IDE中，打开ui.content子项目
导航到src/main/content/jcr_root
创建文件夹etc
在etc中创建文件夹map
在map中创建文件夹http

在http中，创建包含下列内容的文件.content.xml：

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>

在http中创建文件夹localhost_any

在localhost_any中，创建包含下列内容的文件.content.xml：

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>

在localhost_any中创建文件夹wknd-app-routes-adventure

在wknd-app-routes-adventure中，创建包含下列内容的文件.content.xml：

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

将映射节点添加到ui.content/src/main/content/META-INF/vault/filter.xml以使其包含在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>

文件夹结构和.context.xml文件应如下所示：

Sling映射

filter.xml文件应如下所示：

Sling映射

现在，在部署AEM项目时，将自动包含这些配置。

Sling映射影响http和localhost上运行的AEM，因此仅支持本地开发。部署到AEM as a Cloud Service时，必须添加类似的Sling映射，以便针对https和适当的AEM as a Cloud Service域。有关详细信息，请参阅Sling映射文档。

跨源资源共享安全策略

接下来，配置AEM以保护内容，以便仅此SPA可以访问AEM内容。在AEM🔗中配置跨源资源共享。

在IDE中，打开ui.config Maven子项目
导航src/main/content/jcr_root/apps/wknd-app/osgiconfig/config
创建名为com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json的文件

在文件中添加以下内容：

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

com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json文件应如下所示：

SPA编辑器CORS配置

关键配置元素包括：

alloworigin指定允许哪些主机从AEM检索内容。
- 已添加localhost:3000以支持在本地运行的SPA
- https://external-hosted-app充当占位符，将替换为Remote SPA所在的域。
allowedpaths指定此CORS配置涵盖AEM中的哪些路径。默认允许访问AEM中的所有内容，但可以仅将其范围限定为SPA可以访问的特定路径，例如： /content/wknd-app。

将AEM页面设置为远程SPA页面模板

AEM项目原型会生成一个已准备好与Remote SPA集成AEM的项目，但需要对自动生成的AEM页面结构进行小幅但重要的调整。自动生成的AEM页面的类型必须更改为 远程SPA页面，而不是 SPA页面。

在IDE中，打开ui.content子项目
打开至src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml

使用以下内容更新此.content.xml文件：

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>

关键更改是对jcr:content节点的更新：