ドキュメントAEM 6.5 LTSユーザーガイド

RemotePage コンポーネント remote-page-component

Last update: Tue Jun 17 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用対象：
  • Experience Manager 6.5 LTS
  • トピック：

作成対象：

  • 開発者

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

概要 overview

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

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

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

IMPORTANT
新しいプロジェクトでは SPA エディターは非推奨（廃止予定）になっています。 アドビでは既存のプロジェクトに対して引き続きサポートしますが、新しいプロジェクトには使用しないでください。AEM でヘッドレスコンテンツの管理に推奨されるエディターは次のようになりました。

要件 requirements

  • 開発での CORS の有効化

  • ページプロパティでのリモート URL の設定

  • AEM での SPA のレンダリング

  • Web アプリケーションは、次のようなバンドラーアセットマニフェストを使用して、読み込まれるすべての CSS ファイルおよび JS ファイルをエントリポイントプロパティにリストする 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

    エントリポイント

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

制限事項 limitations

  • RemotePage コンポーネントでは、実装がここにあるような。 ただし、RemotePage コンポーネントは React フレームワーク（および remote-page-next コンポーネントを介した Next.js）で動作するようにのみテストされているので、Angular など他のフレームワークからのアプリケーションのリモート読み込みはサポートされていません。
  • AEM でリモートレンダリングを行う場合、アプリケーションのルート HTML ファイルに定義された内部 CSS およびルート DOM ノードのインライン CSS は使用できません。

技術的詳細 technical-details

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

recommendation-more-help
51c6a92d-a39d-46d7-8e3e-2db9a31c06a2