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/components
の AEM WCM コアコンポーネントプロキシui.apps/src/.../apps/wknd-app/components/remotepage
の AEM SPA リモートページプロキシ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 エディターとリモート SPA の互換性を確保するための調整がいくつか行われます。
ui.frontend プロジェクトを削除
SPA はリモート SPA なので、AEM プロジェクトの外部で開発および管理されていると仮定します。 競合を避けるために、ui.frontend
プロジェクトをデプロイから削除します。ui.frontend
プロジェクトを削除しないと、ui.frontend
プロジェクトで提供されるデフォルトの SPA とリモート SPA の 2 つの SPA が AEM 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 <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
ファイルは次のようになります。 -
ui.apps/pom.xml
を開きます -
<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
ファイルは次のようになります。
これらの変更の前に AEM プロジェクトが構築された場合は、ui.frontend
で生成されたクライアントライブラリを ui.apps/src/main/content/jcr_root/apps/wknd-app/clientlibs/clientlib-react
の ui.apps
プロジェクトから手動で削除します。
AEM コンテンツマッピング
AEM がリモート SPA を SPA エディターに読み込むには、SPA のルートと、コンテンツを開いて作成するために使用される AEM ページとの間のマッピングを確立する必要があります。
この設定の重要性については、後で説明します。
マッピングは、/etc/map
で定義された Sling Mapping で行うことができます。
-
IDE で
ui.content
サブプロジェクトを開きます -
src/main/content/jcr_root
に移動します -
フォルダー
etc
を作成します -
etc
で、フォルダーmap
を作成します -
map
で、フォルダーhttp
を作成します -
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>
-
http
で、フォルダーlocalhost_any
を作成します -
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>
-
localhost_any
で、フォルダーwknd-app-routes-adventure
を作成します -
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"/>
-
マッピングノードを
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
ファイルは次のようになります。
filter.xml
ファイルは次のようになります。
これで 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 { "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
ファイルは次のようになります。
重要な設定要素は次のとおりです。
-
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 ページ に変更する必要があります。
-
IDE で
ui.content
サブプロジェクトを開きます。 -
src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml
に開きます -
この
.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="<p>Hello World!</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
ファイルは次のようになります。
これらの変更により、AEM の SPA ルートであるこのページが、SPA エディターでリモート SPA を読み込むことができます。
ui.content
プロジェクトが、更新 ではなく、マージ ノードに設定されているため、AEM ページを__サイト/WKND アプリ/us/en/WKND アプリホームページ__で削除してください。このページを削除して、AEM 自体のリモート SPA ページとして再作成することもできますが、このページは ui.content
プロジェクトで自動作成されるため、コードベースで更新することをお勧めします。
AEM SDK に AEM プロジェクトをデプロイします。
-
AEM オーサーサービスがポート 4502 で実行されていることを確認します。
-
コマンドラインから、AEM Maven プロジェクトのルートに移動します。
-
Maven を使用して、ローカルの AEM SDK オーサーサービスにプロジェクトをデプロイします。
code language-none $ mvn clean install -PautoInstallSinglePackage
ルート AEM ページを設定します。
AEM プロジェクトがデプロイされたので、最後に、リモート SPA を読み込むように SPA エディターを準備するための手順が残っています。 AEM で、AEM プロジェクト アーキタイプで生成された SPA のルート /content/wknd-app/us/en/home
に対応する AEM ページをマークします。
-
AEM オーサーにログインします。
-
Sites/ WKND App/us/en に移動します。
-
WKND App Home Page を選択し、「プロパティ」をタップします。
-
「SPA」タブに移動します。
-
リモート SPA 設定 の項目に入力します。
- SPA ホスト URL:
http://localhost:3000
- リモート SPA のルートへの URL です。
- SPA ホスト URL:
-
「保存して閉じる」をタップします。
なお、このページのタイプを リモート 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 のブートストラップに専念できます。