静的HTML ページを移行するためのAEM Sites アーキテクチャガイダンス

この記事では、コンテンツ編集が不要な場合に、静的なHTMLとCSS ページをAdobe Experience Manager Sitesに転送する際に推奨されるアーキテクチャと移行手順について説明します。

説明 description

環境

  • Adobe Experience Manager(すべてのバージョン)。

症状

  • 約100の静的HTMLとCSS ページをAEM Sitesに移行する必要があります。
  • コンテンツは、移行後に編集する必要はありません。
  • 既存のレイアウトは保持されます。
  • ページはAEM オーサーに保存し、オプションでAEM パブリッシュ経由で公開する必要があります。
  • ページ間に繰り返し表示されるセクションもありますが、多くのページには独自のレイアウトがあります。
  • JavaScriptとCSSは存在し、適切に管理する必要があります。
  • フォームが含まれているページもあります。

原因

従来のAEM Sitesアーキテクチャでは、ページ固有のコンポーネントを作成したり、このユースケースにEdge Delivery Servicesを導入したりするのに比べ、コンテンツ編集を継続的に必要としない静的なHTMLページを移行するためのより維持可能でリスクの低いアプローチを提供します。

解決策 resolution

問題を解決するには、次の手順に従います。

  1. ページレイアウトと再利用性の評価:

    1. 再利用可能なAEMコンポーネントとして実装できる、静的ページをまたいで繰り返し発生するセクションを特定します。
    2. 共有ページテンプレートを使用できるかどうか、または一意のレイアウトに複数のテンプレートが必要かどうかを判断します。
  2. AEM Sitesの構造を実装します。

    1. AEMで、静的ページの一般的な構造とレイアウトを反映したページテンプレートを作成します。
    2. ヘッダー、フッター、ナビゲーション、フォームなど、繰り返し使用するセクションの再利用可能なコンポーネントを開発します。
    3. ページ全体に単一の大きなコンポーネントを作成するのは避けましょう。これにより、メンテナンス性と再利用性が低下します。
  3. 静的コンテンツの移行:

    1. インポートスクリプトまたは移行ユーティリティを使用して、ページ構造を作成し、既存のHTML ファイルからコンテンツを入力します。
    2. AEM クライアントサイドライブラリ (clientlibs)を使用してJavaScriptとCSSを管理します。
    3. あらゆるフォームをAEMのコンポーネントとして統合したり、必要に応じて埋め込むことができます。
  4. 移行を検証:

    1. 下位の環境で移行されたページの代表的なセットをテストします。
    2. 視覚的な正確性、リンク、アセット参照、SEO メタデータ、JavaScriptの動作を検証します。
  5. 配信要件の決定:

    • ページに一般にアクセスできる必要がある場合は、AEM Publishを通じて配信を設定します。
    • AEM オーサーでページが内部使用のためにのみ必要な場合は、公開配信の設定は必要ありません。
  6. Edge Delivery Servicesについての検討事項:

    • Edge Delivery Servicesは、任意の静的HTML/CSSの直接移行には推奨されません。Edge Delivery Services ブロックモデルとユニバーサルエディターにコンテンツを適応させる必要があるからです。
    • Edge Delivery Servicesの導入を検討するのは、高性能なパブリック配信が主要な目標であり、開発およびオーサリングモデルを導入する準備が整っている場合に限ります。
recommendation-more-help
experience-cloud-kcs-help-kbarticles