フロントエンドパイプラインを有効にする enable-front-end-pipeline

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

概要 overview

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

このパイプラインはフロントエンドコードのみを処理するので、フルスタックデプロイメントよりデプロイメントプロセスが高速になります。これにより、フロントエンド開発者は AEM の知識がなくても、サイトを簡単にカスタマイズできます。

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

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

技術的詳細 technical-details

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

要件 requirements

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

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

サイトを有効にするには、Sites コンソールのサイトパネルを使用して行います。

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

フロントエンドパイプラインとカスタムドメイン custom-domains

フロントエンドパイプラインは Cloud Manager のカスタムドメイン機能と共に使用できますが、2 つの機能を一緒に使用する場合は、次の要件に注意してください。

静的フロントエンドファイル static-files

フロントエンドパイプライン経由でデプロイされた静的フロントエンドアセットは、デフォルトでは、アドビの事前定義済み静的ドメインから提供されます。

フロントエンドアセットにカスタムドメインが必要な場合は、パブリッシュ層にカスタムドメインをインストールし、Dispatcher を設定して、特定のパス（/static/ など）をアドビの静的ホスティングの場所にルーティングできます。この方法では、静的アセットのリクエストを適切に転送およびキャッシュするのに、Dispatcher ルールを更新する必要があります。

カスタムドメインと Dispatcher を設定したら、AEM を設定して、静的ドメインからフロントエンドアセットを提供できます。

設定 configuration

技術的詳細の節に従って、サイトのフロントエンドパイプライン機能をアクティブ化すると、/conf/<site-name>/sling:configs の下に SiteConfig ノードと HtmlPageItemsConfig ノードが作成されます。

ステータスアセット用のフロントエンドパイプラインと共にサイトに Cloud Manager のカスタムドメイン機能を使用する場合は、これらのノードに追加のプロパティを追加する必要があります。

その後、サイトのページは、更新された URL からテーマアーティファクトを参照します。次に、Dispatcher はこれらのリソースに対するリクエストを静的ドメインにルーティングします。

フロントエンド開発者向けのベストプラクティス best-practices

フロントエンドパイプライン経由でデプロイする前に、フロントエンドアセットをローカルで開発およびテストする必要がある場合は、次のアプローチを考慮します。

ローカルフロントエンド開発について詳しくは、Site Theme Builder ドキュメントを参照してください。