為SPA編輯器設定AEM

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

主題：
核心組件
API
開發

建立對象：

初學者
開發人員

雖然SPA程式碼基底是在AEM之外進行管理，但需要AEM專案來設定支援的設定和內容要求。本章會逐步說明如何建立包含必要設定的AEM專案：

AEM WCM Core Components代理
AEM遠端SPA頁面Proxy
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核心元件代理伺服器
在ui.apps/src/.../apps/wknd-app/components/remotepage的 AEM SPA遠端頁面Proxy
在ui.content/src/.../conf/wknd-app/settings/wcm/templates的 AEM頁面範本
子專案以定義位於ui.content/src/...的內容對應
在ui.content/src/.../content/wknd-app的基準遠端SPA AEM頁面
在ui.config/src/.../apps/wknd-app/osgiconfig的 OSGi設定資料夾

產生基礎AEM專案後，有一些調整可確保SPA Editor與遠端SPA相容。

移除ui.frontend專案

由於SPA是遠端SPA，假設是在AEM專案外部開發和管理。若要避免衝突，請從部署中移除ui.frontend專案。如果未移除ui.frontend專案，則會同時在SPA SPA編輯器中載入兩個AEM (在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時，必須為目標https和適當的AEM as a Cloud Service網域新增類似的Sling對應。如需詳細資訊，請參閱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會作為預留位置，取代為遠端SPA託管所在的網域。
allowedpaths指定此CORS設定涵蓋AEM中的哪些路徑。預設允許存取AEM中的所有內容，但此範圍只能限定為SPA可存取的特定路徑，例如： /content/wknd-app。

將AEM頁面設定為遠端SPA頁面範本

AEM專案原型會產生一個專案，該專案已準備好與遠端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節點的更新：