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

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

ヘッドレスな方法でAEMを操作するSPAをデプロイするには、SPAのホストと、Web ブラウザーを使用してアクセスできるようにする必要があります。

SPAをホスト

SPAは、次のネイティブ Web リソースの集まりで構成されます。 HTML、CSS および JavaScript. これらのリソースは、 ビルド プロセス ( 例: npm run build) をクリックし、エンドユーザーが使用するためにホストにデプロイします。

種々ある ホスト オプションは、組織の要件に応じて以下に示します。

  1. クラウドプロバイダー 例: Azure または AWS.

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

  3. フロントエンドホスティングプラットフォーム 例: AWS Amplify, Azure App Service, Netlify, 辺六, ベルセル​など

デプロイメント設定

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 サーバー、SPAをAEMで直接ホストするなど。

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

SPAの接続先 コンテンツ作成者 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プレビュー
Dispatcher フィルター
クロスオリジンリソース共有 (CORS)
AEMホスト

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

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

  1. SPAは Netlify ドメインから提供されますが、別のドメインでAEM GraphQL API への XHR 呼び出しをおこないます。 このクロスサイトリクエストには CORS をAEMに設定して、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

単一ページアプリの例

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

React アプリ

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

例を表示

Next.js アプリ

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

例を表示

このページ