AEM ヘッドレス SPA デプロイメント

AEM ヘッドレスシングルページアプリ(SPA)のデプロイメントには、React や Vue などのフレームワークを使用して作成された JavaScript ベースのアプリケーションが含まれます。これらのアプリケーションは、AEM のコンテンツをヘッドレスで使用および操作します。

AEM をヘッドレスで操作する SPA をデプロイするには、SPA をホストし、web ブラウザー経由でアクセスできるようにする必要があります。

SPA のホスト

SPA は、HTML、CSS、JavaScript のネイティブ web リソースのコレクションで構成されます。これらのリソースは、ビルド ​プロセス(npm run build など)中に生成され、エンドユーザーが使用できるようにホストにデプロイされます。

組織の要件に応じて、様々な​ ホスティング ​オプションがあります。

  1. AzureAWS などの​ クラウドプロバイダー

  2. 企業​ データセンター ​での​ オンプレミス ​ホスティング

  3. AWS AmplifyAzure App ServiceNetlifyHerokuVercel などの​ フロントエンドホスティングプラットフォーム

デプロイメント設定

AEM ヘッドレスを操作する SPA をホストする場合の主な考慮事項は、SPA には AEM のドメイン(またはホスト)経由でアクセスするか、様々なドメインでアクセスするかです。その理由は、SPA は web ブラウザーで実行される web アプリケーションであり、web ブラウザーのセキュリティポリシーの対象となるからです。

共有ドメイン

SPA と AEM は、両方が同じドメインからエンドユーザーによってアクセスされる場合、ドメインを共有します。次に例を示します。

  • AEM には https://wknd.site/ 経由でアクセスできます
  • SPA には https://wknd.site/spa 経由でアクセスできます

AEM と SPA の両方に同じドメインからアクセスできるので、web ブラウザーは、SPA が CORS を必要とせずに XHR を AEM ヘッドレスエンドポイントに作成し、HTTP Cookie(AEM の login-token Cookie など)を共有できるようにします。

SPA と AEM のトラフィックが共有ドメインでどのようにルーティングされるかは、ユーザー次第です。つまり、複数のオリジンを持つ CDN、リバースプロキシを持つ HTTP サーバー、AEM で直接 SPA をホストするなどです。

AEM と同じドメインでホストされている場合に、SPA 実稼動デプロイメントに必要なデプロイメント設定を以下に示します。

SPA の接続先 →
AEM オーサー
AEM パブリッシュ
AEM プレビュー
Dispatcher フィルター
クロスオリジンリソース共有(CORS)
AEM ホスト

異なるドメイン

異なるドメインからエンドユーザーがアクセスする場合、SPA と AEM には異なるドメインがあります。次に例を示します。

  • AEM には https://wknd.site/ 経由でアクセスできます
  • SPA には https://wknd-app.site/ 経由でアクセスできます

AEM と SPA には異なるドメインからアクセスできるので、web ブラウザーはクロスオリジンリソース共有(CORS)などのセキュリティポリシーを適用し、HTTP Cookie(AEM の login-token Cookie など)の共有を防ぎます。

AEM と異なるドメインでホストされている場合に、SPA 実稼動デプロイメントに必要なデプロイメント設定を以下に示します。

SPA の接続先 →
AEM オーサー
AEM パブリッシュ
AEM プレビュー
Dispatcher フィルター
クロスオリジンリソース共有(CORS)
AEM ホスト

異なるドメインでの SPA デプロイメントの例

この例では、SPA は Netlify ドメイン(https://main--sparkly-marzipan-b20bf8.netlify.app/)にデプロイされ、SPA は AEM パブリッシュドメイン(https://publish-p65804-e666805.adobeaemcloud.com)から AEM GraphQL API を使用します。以下のスクリーンショットは、CORS 要件をハイライト表示しています。

  1. SPA は Netlify ドメインから提供されますが、異なるドメインで AEM GraphQL API への XHR 呼び出しを行います。このクロスサイトリクエストでは、AEM で CORS を設定して、Netlify ドメインからのリクエストがそのコンテンツにアクセスできるようにする必要があります。

    SPA および AEM ホストから提供される SPA リクエスト

  2. AEM GraphQL API への XHR リクエストを検査すると、Access-Control-Allow-Origin が存在し、この Netlify ドメインからのリクエストがそのコンテンツにアクセスすることを AEM が許可することを web ブラウザーに示します。

    AEM CORS が見つからなかったか、Netlify ドメインが含まれていなかった場合、web ブラウザーは XHR リクエストに失敗し、CORS エラーを報告します。

    CORS 応答ヘッダー AEM GraphQL API

シングルページアプリの例

アドビは、React でコード化された単一ページアプリの例を提供しています。

React アプリ

React アプリ

AEM ヘッドレス GraphQL API のコンテンツを使用する、React で記述された単一ページアプリの例です。

例を表示

Next.js アプリケーション

Next.js アプリケーション

AEM ヘッドレス GraphQL API のコンテンツを使用する Next.js で記述された単一ページアプリの例です。

例を表示

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