为SPA编辑器配置AEM

Last update: Tue Apr 28 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

适用对象：
Experience Manager 6.5
Experience Manager as a Cloud Service

创建对象：

初学者
开发人员

IMPORTANT

SPA 编辑器已被新项目弃用。Adobe 对现有项目仍提供支持，但不应在新项目中使用。目前，AEM 中用于管理 Headless 内容的首选编辑器是：

通用编辑器，用于可视化编辑 Headless 内容。
内容片段编辑器，用于以基于表单的方法编辑 Headless 内容。

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

AEM WCM核心组件代理
AEM远程SPA页面代理
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原型。

$ 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混淆(_L)**

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

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

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

生成基本AEM项目后，进行了一些调整以确保SPA编辑器与远程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映射影响AEM在http和localhost上运行，因此仅支持本地开发。部署到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的文件

Add the following to the file:

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 Editor CORS configuration

The key configuration elements are:

alloworigin specifies which hosts are allowed to retrieve content from AEM.
- localhost:3000 is added to support the SPA running locally
- https://external-hosted-app acts as a placeholder to be replaced with the domain that Remote SPA is hosted on.
allowedpaths specify which paths in AEM are covered by this CORS configuration. The default allows access to all content in AEM, however this can be scoped to only the specific paths the SPA can access, for example: /content/wknd-app.

Set AEM Page as Remote SPA Page Template

The AEM Project Archetype generates a project primed for AEM's integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. The auto-generated AEM page must have its type changed to Remote SPA page, rather than a SPA page.

In your IDE, open the ui.content subproject
Open to src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml

Update this .content.xml file with:

code language-xml

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>

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

The key changes are updates to the jcr:content node's:

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

src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml文件应如下所示：

Home page .content.xml updates

These changes allow this page, which acts are the SPA's root in AEM, to load the Remote SPA in SPA Editor.

NOTE

If this project was previously deployed to AEM, make sure to delete the AEM page as Sites > WKND App > us > en > WKND App Home Page, as the ui.content project is set to merge nodes, rather than update.

This page could also be removed and re-created as a Remote SPA Page in AEM itself, however since this page is auto-created in the ui.content project it is best to update it in the code base.