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

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

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

SPA のホスト

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

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

デプロイメント設定

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

共有ドメイン

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

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

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

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

異なるドメイン

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

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

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

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

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

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

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