フロントエンドパイプラインを有効にする enable-front-end-pipeline
サイトテーマを使用してサイトをより迅速にカスタマイズできるように、既存のサイトのフロントエンドパイプラインを有効にする方法について説明します。
概要 overview
フロントエンドパイプラインは、サイトテーマとサイトテンプレートに基づいて web サイトのフロントエンドコードだけを迅速にデプロイできるメカニズムです。
このパイプラインはフロントエンドコードのみを処理するので、フルスタックデプロイメントよりデプロイメントプロセスが高速になります。これにより、フロントエンド開発者は AEM の知識がなくても、サイトを簡単にカスタマイズできます。
サイトテンプレートに基づくサイトでは、フロントエンドパイプラインをデフォルトで使用できます。このドキュメントでは、フロントエンドパイプラインを利用するように既存のサイトを適応させる方法について説明します。
AEM では、サイトがサイトテンプレートとテーマを使用して作成されていない場合でも、既存のクライアントライブラリの上にテーマをレイヤー化することで、フロントエンドパイプラインでデプロイされたテーマを読み込むようにサイトを設定できます。
技術的詳細 technical-details
サイトのフロントエンドパイプラインを有効にすると、AEM はサイト構造に次のような変更を加えます。
- サイトのすべてのページには、追加の CSS および JS ファイルが 1 つ含まれており、専用の Cloud Manager フロントエンドパイプラインを通じて更新をデプロイすることで、このファイルを変更できます。
- 追加された CSS および JS ファイルは最初は空です。ただし、「テーマソース」フォルダーをダウンロードすると、パイプラインを通じて CSS コードと JS コードの更新をデプロイするために必要なフォルダー構造を設定できます。
- この操作によって
/conf/<site-name>/sling:configsの下に作成されるSiteConfigノードとHtmlPageItemsConfigノードを削除することで、変更を取り消すことができるのは、開発者のみです。
要件 requirements
AEM では、フロントエンドパイプラインを使用するように既存のサイトを自動的に適応させることができます。このワークフローを実行するには、サイトでコアコンポーネントのページコンポーネント v2 以降を使用する必要があります。
フロントエンドパイプラインの有効化 enabling
詳しくは、フロントエンドパイプラインでの Cloud Manager IP 許可リストの使用を参照してください。
サイトを有効にするには、Sites コンソールのサイトパネルを使用して行います。
-
AEM にログインし、グローバルナビゲーション／サイト を使用して Sites コンソールに移動します。
-
サイトをコンソールで選択します。サイトの子ページではなくルートを選択します。
-
サイトが選択された状態で、左側のパネルセレクターを開き、「サイト」を選択します。
-
サイト パネルで「フロントエンドパイプラインを有効化」ボタンをクリックします。
-
実行される変更の概要が表示され、AEM から確認を求められます。確認すると、サイトに適応されます。
これで、サイトでフロントエンドパイプラインを使用する準備が整いました。フロントエンドパイプラインとサイトテーマの管理について詳しくは、以下を参照してください。
- サイトパネルを使用したサイトテーマの管理
- クイックサイト作成ジャーニー - このドキュメントジャーニーでは、フロントエンドパイプラインとクイックサイト作成ツールを使用してサイトを迅速にデプロイするプロセスの包括的な概要を示しています。
- CI／CD パイプライン - このドキュメントでは、フルスタックパイプラインおよび web 階層設定パイプラインとの関連でフロントエンドパイプラインについて説明しています。