文件AEMAEM 教學課程AEM Headless 教學課程

設定適用於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 內容的首選編輯器為：

雖然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專案資料夾(_U)，因此很清楚它是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專案，則會同時在AEM SPA編輯器中載入兩個SPA （在ui.frontend專案和遠端SPA中提供的預設SPA）。

  1. 在IDE中開啟AEM專案(~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/com.adobe.aem.guides.wknd-app)

  2. 開啟根pom.xml

  3. 從<modules>清單註解<module>ui.frontend</module

    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>

    pom.xml檔案應該如下所示：

    從Reactor pom移除ui.frontend模組

  4. 開啟ui.apps/pom.xml

  5. 註解<artifactId>wknd-app.ui.frontend</artifactId>上的<dependency>

    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>

    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對應完成對應。

  1. 在IDE中，開啟ui.content子專案

  2. 瀏覽至src/main/content/jcr_root

  3. 建立資料夾etc

  4. 在etc中建立資料夾map

  5. 在map中建立資料夾http

  6. 在http中，建立包含下列內容的檔案.content.xml：

    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>

  7. 在http中建立資料夾localhost_any

  8. 在localhost_any中，建立包含下列內容的檔案.content.xml：

    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>

  9. 在localhost_any中建立資料夾wknd-app-routes-adventure

  10. 在wknd-app-routes-adventure中，建立包含下列內容的檔案.content.xml：

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

  11. 將對應節點新增至ui.content/src/main/content/META-INF/vault/filter.xml以包含在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>

資料夾結構和.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🔗中設定跨原始資源共用。

  1. 在您的IDE中，開啟ui.config Maven子專案

  2. 導覽src/main/content/jcr_root/apps/wknd-app/osgiconfig/config

  3. 建立名為com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-app_remote-spa.cfg.json的檔案

  4. 將下列專案新增至檔案：

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

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專案原型會產生一個專案，已為AEM與遠端SPA的整合做準備，但需要對自動產生的AEM頁面結構進行小幅但重要的調整。 自動產生的AEM頁面的型別必須變更為​遠端SPA頁面，而非​SPA頁面。

  1. 在您的IDE中，開啟ui.content子專案

  2. 開啟至src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml

  3. 更新此.content.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="&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編輯器中載入遠端SPA。

NOTE
如果此專案先前已部署至AEM，請確定刪除AEM頁面為「網站> WKND應用程式>我們>英文> WKND應用程式首頁」，因為「ui.content」專案設為​ 合併 ​節點，而非​更新。

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

將AEM專案部署至AEM SDK

  1. 請確定AEM Author服務正在連線埠4502上執行

  2. 從命令列，導覽至AEM Maven專案的根目錄

  3. 使用Maven將專案部署至您的本機AEM SDK作者服務

    code language-none 
    $ mvn clean install -PautoInstallSinglePackage

    mvn全新安裝 — PautoInstallSinglePackage

設定根AEM頁面

部署AEM專案後，最後一個步驟是準備SPA編輯器以載入我們的遠端SPA。 在AEM中，標籤與AEM專案原型產生的SPA根/content/wknd-app/us/en/home相對應的AEM頁面。

  1. 登入AEM Author

  2. 導覽至​網站> WKND應用程式>我們> en

  3. 選取​WKND應用程式首頁，然後點選​屬性

    WKND應用程式首頁 — 屬性

  4. 導覽至​ SPA ​標籤

  5. 填寫​遠端SPA設定

    1. SPA主機URL： http://localhost:3000
      1. 遠端SPA根目錄的URL

    WKND應用程式首頁 — 遠端SPA設定

  6. 點選​儲存並關閉

請記住，我們將此頁面的型別變更為​ 遠端SPA頁面 ​的型別，這可以讓我們在其​ 頁面屬性 ​中看到​ SPA ​索引標籤。

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

恭喜

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

  • 在ui.frontend中註解相依性，移除AEM專案原型產生的SPA
  • 新增Sling對應至AEM，將SPA路由對應至AEM中的資源
  • 設定AEM的跨原始資源共用安全性原則，允許遠端SPA使用來自AEM的內容
  • 將AEM專案部署至本機AEM SDK作者服務
  • Mark an AEM Page as the Remote SPA's root using the SPA Host URL page property

後續步驟

With AEM configured, we can focus on bootstrapping the Remote SPA with support for editable areas using AEM SPA Editor!

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4