フロントエンドパイプラインの有効化

サイトテーマを利用してサイトをより迅速にカスタマイズできるように、既存のサイトのフロントエンドパイプラインを有効にする方法について説明します。

概要

フロントエンドパイプラインは、サイトテーマとサイトテンプレートに基づいて web サイトのフロントエンドコードだけを迅速にデプロイできるメカニズムです。

このパイプラインでは、フルスタックをデプロイするのではなくフロントエンドコードのみを扱うので、プロセスが速くなるほか、フロントエンド開発者に AEM の知識がなくてもサイトを簡単かつ迅速にカスタマイズできます。

サイトテンプレートに基づくサイトでは、フロントエンドパイプラインをデフォルトで利用できます。このドキュメントでは、フロントエンドパイプラインを利用するように既存のサイトを適応させる方法について説明します。

ヒント

フロントエンドパイプラインにも、フロントエンドパイプラインとサイトテンプレートを使用してサイトを迅速にデプロイする方法にも詳しくない場合は、クイックサイト作成ジャーニーで概要を確認してください。

サイトテンプレートとサイトテーマに基づいて既にサイトを作成してある場合、AEM では、フロントエンドパイプラインでデプロイされるテーマを既存のクライアントライブラリの上に読み込むようにサイトを設定できます。

技術的詳細

サイトのフロントエンドパイプラインを有効にすると、AEM はサイト構造に次のような変更を加えます。

  • サイトのすべてのページに CSS ファイルと JS ファイルが 1 つずつ追加されます。これらは、専用の Cloud Manager フロントエンドパイプラインを使用してアップデートをデプロイすることで変更できます。
  • 追加された CSS ファイルと JS ファイルは最初は空ですが、「テーマソース」フォルダーをダウンロードし、専用のパイプラインを介して CSS および JS コードのアップデートをデプロイできるフォルダー構造をブートストラップすることができます。
  • この変更を取り消すには、この操作で /conf/<site-name>/sling:configs 下に作成された SiteConfig ノードと HtmlPageItemsConfig ノードを開発者が削除する必要があります。
メモ

このアクションによって、フロントエンドパイプラインを使用するようにサイトの既存のクライアントライブラリが自動的に変換されることはありません。これらのソースをクライアントライブラリフォルダーからフロントエンドパイプラインフォルダーに移動するには、フロントエンド開発者が手動で行う必要があります。

要件

AEM では、フロントエンドパイプラインを使用するように既存のサイトを自動的に適応させることができます。それには、サイトがコアコンポーネントのページコンポーネント v2 以降を使用する必要があります。

フロントエンドパイプラインの有効化

サイトのフロントエンドパイプラインを有効にするには、Sites コンソールでサイトパネルを使用します。

  1. AEM にログインし、グローバルナビゲーション／サイト​を使用して Sites コンソールに移動します。

  2. サイトをコンソールで選択します。サイトの子ページではなくルートを選択する必要があります。

  3. サイトが選択された状態で、左側のパネルセレクターを開き、「サイト」を選択します。

  4. サイト​パネルで「フロントエンドパイプラインを有効化」ボタンをクリックします。

    フロントエンドパイプラインの有効化

  5. 実行される変更の概要が表示され、AEM から確認を求められます。確認すると、サイトに適応されます。

これで、サイトでAEMフロントエンドパイプラインを使用する準備が整いました。フロントエンドパイプラインとサイトテーマの管理について詳しくは、以下を参照してください。

このページ