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
をコメントアウトします<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>
をコメントアウトします<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
を作成します。<?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 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 パッケージに含めます。<?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
という名前のファイルを作成します。 -
次の項目をファイルに追加します。
{ "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
など)のみに限定できます。