フロントエンドパイプラインを有効にする

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

概要

フロントエンドパイプラインは、サイトテーマとサイトテンプレートに基づいて 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フロントエンドパイプラインを使用する準備が整いました。フロントエンドパイプラインとサイトテーマの管理について詳しくは、以下を参照してください。

• サイトパネルを使用したサイトテーマの管理
• クイックサイト作成ジャーニー - このドキュメントジャーニーでは、フロントエンドパイプラインとクイックサイト作成ツールを使用してサイトを迅速にデプロイするプロセスの包括的な概要を示しています。
• CI／CD パイプライン - このドキュメントでは、フルスタックパイプラインおよび web 階層設定パイプラインとの関連でフロントエンドパイプラインについて説明しています。