設定AEM for SPA Editor

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

AEM WCM核心元件Proxy
AEM遠端SPA頁面代理
AEM遠端SPA頁面範本
基線遠端SPA AEM頁面
定義SPA至AEM URL對應的子專案
OSGi配置資料夾

建立AEM專案

建立AEM專案，以管理設定和基準內容。

請一律使用最新版 AEM原型。

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=27 \
 -D aemVersion=cloud \
 -D appTitle="WKND App" \
 -D appId="wknd-app" \
 -D groupId="com.adobe.aem.guides.wkndapp" \
 -D frontendModule="react"
$ mv ~/Code/wknd-app/wknd-app ~/Code/wknd-app/com.adobe.aem.guides.wknd-app

最後一個命令只需重新命名AEM專案資料夾，如此即可清楚知道這是AEM專案，且不與遠端SPA混淆_

指定frontendModule="react"時，ui.frontend專案不會用於遠端SPA使用案例。 SPA是從外部開發及管理，僅使用AEM作為內容API。項目包含spa-project AEM Java™相依性並設定遠程SPA頁面模板時需要frontendModule="react"標誌。

AEM專案原型會產生下列元素，用以設定AEM以與SPA整合。

AEM WCM核心元件代理程 式 ui.content/src/.../apps/wknd-app/components
AEM SPA遠端頁面 代碼 ui.content/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
OSGi配置資 料夾 ui.config/src/.../apps/wknd-app/osgiconfig

產生基本AEM專案後，進行一些調整以確保SPA Editor與Remote SPA相容。

移除ui.frontend專案

由於SPA是遠端SPA，因此假設它是在AEM專案外部開發及管理。要避免衝突，請刪除ui.frontend項目，使其不進行部署。如果未移除ui.frontend專案，則會在AEM SPA編輯器中同時載入ui.frontend專案和遠端SPA中提供的兩個SPA(預設SPA)。

在IDE中開啟AEM專案(~/Code/wknd-app/com.adobe.aem.guides.wknd-app)
開啟根pom.xml

從<modules>清單中注釋<module>ui.frontend</module

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

<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
建立資料夾map
在map中，建立資料夾http

在http中，建立包含以下內容的檔案.content.xml:

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

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

<?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 will be 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包中。

<?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 aCloud Service時，必須新增類似的Sling對應，將目標https和適當的AEM作為Cloud Service網域。如需詳細資訊，請參閱Sling對應檔案。

跨原始資源共用安全性原則

接下來，設定AEM以保護內容，讓只有此SPA可以存取AEM內容。 C在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的檔案

將下列項目新增至檔案：

{
    "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專案原型會產生專案，以便與遠端SPA整合，但需要對自動產生的AEM頁面結構進行小幅但重要的調整。自動產生的AEM頁面必須將其類型變更為遠端SPA頁面，而非SPA頁面。

在IDE中，開啟ui.content子項目
開啟至src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml

使用以下內容更新此.content.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="&lt;p>Hello World!&lt;/p>"
                    textIsRich="true">
                    <cq:responsive jcr:primaryType="nt:unstructured"/>
                </text>
            </responsivegrid>
        </root>
    </jcr:content>
</jcr:root>

關鍵更改是對jcr:content節點的更新：

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

src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml檔案應該如下所示：

首頁.content.xml更新

這些變更可讓此頁面(作為AEM中的SPA根)在SPA Editor中載入遠端SPA。

注意

如果此專案先前是AEM專案，請務必將AEM頁面刪除為__Sites > WKND應用程式> us > en > WKND應用程式首頁__，因為ui.content專案已設為__merge__節點，而非__update__。

此頁面也可以移除，並重新建立為AEM本身的遠端SPA頁面，但由於此頁面是在ui.content專案中自動建立，因此最好在程式碼基底中更新它。

將AEM專案部署至AEM SDK

確認AEM製作服務在連接埠4502上執行
從命令列，導覽至AEM Maven專案的根目錄
使用Maven將專案部署至本機AEM SDK製作服務
```
$ mvn clean install -PautoInstallSinglePackage
```

設定根AEM頁面

部署AEM專案後，準備SPA Editor以載入遠端SPA的最後一步。在AEM中，標示與AEM專案原型產生之SPA根/content/wknd-app/us/en/home對應的AEM頁面。

登入AEM作者
導覽至「Sites > WKND應用程式> us > en」
選擇WKND應用首頁，然後點選屬性
導覽至SPA標籤
填寫遠程SPA配置
- SPA主機URL: http://localhost:3000
  - 遠端SPA的根目錄URL
點選儲存並關閉

請記住，我們將此頁面的類型變更為遠端SPA頁面的類型，這可讓我們在其頁面屬性中查看SPA標籤。

只有在AEM頁面上設定此設定，且此頁面與SPA的根目錄對應。此頁面下方的所有AEM頁面都會繼承值。

恭喜

您現在已準備AEM設定，並部署至本機AEM作者！您現在知道如何：

移除AEM專案原型產生的SPA，方法是在ui.frontend中註解相依性
將SPA路由對應至AEM中資源的Sling對應新增至AEM
設定AEM跨原始資源共用安全性原則，讓遠端SPA從AEM使用內容
將AEM專案部署至本機AEM SDK製作服務
使用AEM主機URL頁面屬性，將SPA頁面標示為遠端SPA根

後續步驟

在配置AEM後，我們可以專注於使用AEM SPA編輯器引導遠程SPA🔗並支援可編輯區域！

新增和改進的搜尋

設定AEM for SPA Editor

建立AEM專案

移除ui.frontend專案

AEM內容對應

跨原始資源共用安全性原則

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

將AEM專案部署至AEM SDK

設定根AEM頁面

恭喜

後續步驟

adobe.com 上的資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe