RemotePage コンポーネント

外部 SPA と AEM の間でどのレベルの統合をおこなうかを決める際に、AEM 内で SPA を表示して編集できる必要があることはよくあります。RemotePage コンポーネントは、この目的のためのカスタムページコンポーネントです。

概要

RemotePage コンポーネントは、アプリケーションで生成された asset-manifest.json から必要なアセットをすべて取得し、これを使用して AEM 内の SPA +をレンダリングします。

  • RemotePage を使用すると、AEM ページコンポーネントの本文に SPA のスクリプトやスタイルシートを挿入できます。
  • 仮想フロントエンドコンポーネントを使用すると、AEM SPA エディターでセクションを編集可能としてマークできます。
  • これとともに、異なるドメインでホストされている SPA を AEM で編集可能にすることができます。

AEM の編集可能な外部 SPA の詳細については、🔗AEM 内の外部 SPA の編集を参照してください。

要件

  • 開発での CORS の有効化
  • ページプロパティでのリモート URL の設定
  • AEM での SPA のレンダリング
  • Webアプリケーションは、次のいずれかのバンドラーアセットマニフェストを使用し、読み込まれるすべてのCSSおよびJSファイルをentrypoints propertyにリストするドメインルートにasset-manifest.jsonファイルを公開する必要があります。
    • https://github.com/shellscape/webpack-manifest-plugin

    • https://github.com/webdeveric/webpack-assets-manifest

    • https://github.com/mugi-uno/parcel-plugin-bundle-manifest

      entrypointsプロパティの例

  • アプリケーションは、body要素の下の<div id="root"></div>で初期化できる必要があります。 アプリケーションが異なるマークアップをインスタンス化する必要がある場合は、sling:resourceSuperType="spa-project-core/components/remotepageを持つプロキシコンポーネントのHTLスクリプトで適宜調整する必要があります。

制限事項

  • 現在の RemotePage コンポーネントの実装では、リモートの React アプリケーションのみがサポートされています。
  • AEM でリモートレンダリングをおこなう場合、アプリケーションのルート HTML ファイルに定義された内部 CSS と、ルート DOM ノードのインライン CSS は使用できません。

技術的詳細

AEM SPA プロジェクトの他の部分と同様、RemotePage コンポーネントもオープンソースです。RemotePage コンポーネントの技術的な詳細については、GitHub リポジトリーを参照してください。

このページ