AEM for SPA エディターを設定

SPA コードベースは AEM 外で管理されますが、サポートする設定およびコンテンツ要件を設定するには、AEM プロジェクトが必要です。 この章では、必要な設定を含む AEM プロジェクトの作成に関する手順を説明します。

  • AEM WCM コアコンポーネントプロキシ
  • AEM リモート SPA ページプロキシ
  • AEM リモート SPA ページテンプレート
  • ベースラインリモート SPA AEM ページ
  • SPA から AEM URL へのマッピングを定義するサブプロジェクト
  • OSGi 設定フォルダー

GitHub から基本プロジェクトをダウンロードします

aem-guides-wknd-graphql プロジェクトを Github.com からダウンロードします。このプロジェクトで使用されるベースラインファイルが含まれます。

$ 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 と混同しないようにします_

frontendModule="react" が指定されている場合、ui.frontend プロジェクトは、リモート SPA の使用例には使用されません。SPAは、AEM の外部的な開発と管理を行い、AEM をコンテンツ API としてのみ使用します。 frontendModule="react" フラグは、プロジェクトに spa-project AEM Java™ 依存関係を組み込み、リモート SPA ページ テンプレートを設定するために必要です。

AEM プロジェクトアーキタイプは、SPA と統合するために AEM を設定するのに使用される次の要素を生成します。

  • ui.apps/src/.../apps/wknd-app/componentsAEM WCM コアコンポーネントプロキシ
  • ui.apps/src/.../apps/wknd-app/components/remotepageAEM SPA リモートページプロキシ
  • ui.content/src/.../conf/wknd-app/settings/wcm/templatesAEM ページテンプレート
  • ui.content/src/...コンテンツマッピングを定義するサブプロジェクト
  • ui.content/src/.../content/wknd-appベースラインリモート SPA AEM ページ
  • ui.config/src/.../apps/wknd-app/osgiconfigOSGi 設定フォルダー

基本 AEM プロジェクトが生成されると、SPA エディターとリモート SPA の互換性を確保するための調整がいくつか行われます。

ui.frontend プロジェクトを削除

SPA はリモート SPA なので、AEM プロジェクトの外部で開発および管理されていると仮定します。 競合を避けるために、ui.frontend プロジェクトをデプロイから削除します。ui.frontend プロジェクトを削除しないと、ui.frontend プロジェクトで提供されるデフォルトの SPA とリモート SPA の 2 つの SPA が AEM 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.frontend で生成されたクライアントライブラリを ui.apps/src/main/content/jcr_root/apps/wknd-app/clientlibs/clientlib-reactui.apps プロジェクトから手動で削除します。

AEM コンテンツマッピング

AEM がリモート SPA を SPA エディターに読み込むには、SPA のルートと、コンテンツを開いて作成するために使用される AEM ページとの間のマッピングを確立する必要があります。

この設定の重要性については、後で説明します。

マッピングは、/etc/map で定義された Sling Mapping で行うことができます。

  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-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="&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 にデプロイされている場合は、ui.content プロジェクトが、更新 ​ではなく、マージ ​ノードに設定されているため、AEM ページを​__サイト/WKND アプリ/us/en/WKND アプリホームページ__​で削除してください。

このページを削除して、AEM 自体のリモート SPA ページとして再作成することもできますが、このページは ui.content プロジェクトで自動作成されるため、コードベースで更新することをお勧めします。

AEM SDK に AEM プロジェクトをデプロイします。

  1. AEM オーサーサービスがポート 4502 で実行されていることを確認します。

  2. コマンドラインから、AEM Maven プロジェクトのルートに移動します。

  3. Maven を使用して、ローカルの AEM SDK オーサーサービスにプロジェクトをデプロイします。

    code language-none
    $ mvn clean install -PautoInstallSinglePackage
    

    mvn clean install -PautoInstallSinglePackage

ルート AEM ページを設定します。

AEM プロジェクトがデプロイされたので、最後に、リモート SPA を読み込むように SPA エディターを準備するための手順が残っています。 AEM で、AEM プロジェクト アーキタイプで生成された SPA のルート /content/wknd-app/us/en/home に対応する AEM ページをマークします。

  1. AEM オーサーにログインします。

  2. Sites/ WKND App/us/en に移動します。

  3. WKND App Home Page を選択し、「プロパティ」をタップします。

    WKND App Home Page - プロパティ

  4. SPA」タブに移動します。

  5. リモート SPA 設定 ​の項目に入力します。

    • SPA ホスト URLhttp://localhost:3000
      • リモート SPA のルートへの URL です。

    WKND App Home Page - リモート SPA 設定

  6. 保存して閉じる」をタップします。

なお、このページのタイプを​ リモート SPA ページ ​に変更し、ページプロパティ ​に「SPA」タブが表示されるようにしました。

この設定は、SPA のルートに対応する AEM ページでのみ設定する必要があります。このページの下にあるすべての AEM ページが値を継承します。

これで完了です

これで、AEM の設定を準備して、ローカルの AEM オーサーにデプロイしました。次の方法を学習しました。

  • AEM プロジェクトアーキタイプで生成された SPA を削除するには、ui.frontend の依存関係をコメントアウトします。
  • SPA ルートを AEM のリソースにマッピングする Sling マッピングを AEM に追加します。
  • リモート SPA が AEM のコンテンツを使用できるように、AEM のクロスオリジンリソース共有セキュリティポリシーを設定します。
  • AEM プロジェクトをローカルの AEM SDK オーサーサービスにデプロイします。
  • 「SPA ホスト URL」ページプロパティを使用して、AEM ページをリモート SPA のルートとしてマークします。

次の手順

AEM が設定されたので、AEM SPA エディターを使用して、編集可能な領域をサポートするリモート SPA のブートストラップに専念できます。

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