AEM ヘッドレス SPA デプロイメント
AEM ヘッドレスシングルページアプリ(SPA)のデプロイメントには、React や Vue などのフレームワークを使用して作成された JavaScript ベースのアプリケーションが含まれます。これらのアプリケーションは、AEM のコンテンツをヘッドレスで使用および操作します。
AEM をヘッドレスで操作する SPA をデプロイするには、SPA をホストし、web ブラウザー経由でアクセスできるようにする必要があります。
SPA のホスト
SPA は、HTML、CSS、JavaScript のネイティブ web リソースのコレクションで構成されます。これらのリソースは、ビルド プロセス(npm run build
など)中に生成され、エンドユーザーが使用できるようにホストにデプロイされます。
組織の要件に応じて、様々な ホスティング オプションがあります。
-
Azure や AWS などの クラウドプロバイダー。
-
企業 データセンター での オンプレミス ホスティング
-
AWS Amplify、Azure App Service、Netlify、Heroku、Vercel などの フロントエンドホスティングプラットフォーム。
デプロイメント設定
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 には
https://wknd.site/
経由でアクセスできます - SPA には
https://wknd-app.site/
経由でアクセスできます
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 要件をハイライト表示しています。
-
SPA は Netlify ドメインから提供されますが、異なるドメインで AEM GraphQL API への XHR 呼び出しを行います。このクロスサイトリクエストでは、AEM で CORS を設定して、Netlify ドメインからのリクエストがそのコンテンツにアクセスできるようにする必要があります。
-
AEM GraphQL API への XHR リクエストを検査すると、
Access-Control-Allow-Origin
が存在し、この Netlify ドメインからのリクエストがそのコンテンツにアクセスすることを AEM が許可することを web ブラウザーに示します。AEM CORS が見つからなかったか、Netlify ドメインが含まれていなかった場合、web ブラウザーは XHR リクエストに失敗し、CORS エラーを報告します。
シングルページアプリの例
アドビは、React でコード化された単一ページアプリの例を提供しています。