標準 AEM プロジェクトアーキタイプのフロントエンドパイプラインの有効化 enable-front-end-pipeline-standard-aem-project

AEM プロジェクトアーキタイプを使用して作成された AEM WKND Sites プロジェクト(別名、標準 AEM プロジェクト)を有効にして、CSS、JavaScript、フォント、アイコンなどのフロントエンドリソースをフロントエンドパイプラインを使用してデプロイし、開発からデプロイメントまでのサイクルを高速化する方法を説明します。AEM のフルスタックバックエンド開発からフロントエンド開発を切り離す方法も説明します。また、これらのフロントエンドリソースが AEM リポジトリから​ ではなく CDN から提供される方法、つまり配信パラダイムの変化についても説明します

ui.frontend アーティファクトの作成と組み込み CDN へのデプロイのみを行う新しいフロントエンドパイプラインが Adobe Cloud Manager で作成され、AEM にその場所を通知します。AEM で、web ページの HTML 生成時に、<link> および <script> タグが href 属性値のこのアーティファクトの場所を参照します。

ただし、WKND Sites AEM プロジェクトの変換後は、フロントエンド開発者は、独自のデプロイメントパイプラインを持つ、AEM 上のフルスタックバックエンド開発とは別に、または並行して作業を行うことができます。

IMPORTANT
一般に、フロントエンドパイプラインは AEM クイックサイト作成と併用されます。詳しくは、関連チュートリアルの AEM Sites の基本を学ぶ - クイックサイト作成を参照してください。そのため、このチュートリアルと関連ビデオには、上記への言及が含まれます。これは、微妙な違いにしっかりと注意を向けさせるためです。また、重要な概念を説明するために直接的または間接的な比較を行っています。

関連するマルチステップチュートリアルでは、クイックサイト作成機能を使用して、架空のライフスタイルブランド WKND の AEM サイトを実装する方法について順を追って説明します。 テーマ設定ワークフローを精査して、フロントエンドパイプラインの仕組みを理解します。

フロントエンドパイプラインの概要、メリットおよび考慮事項

NOTE
これは、AEM as a Cloud Service のみを対象としており、AMS ベースの Adobe Cloud Manager のデプロイメントには当てはまりません。

前提条件

このチュートリアルのデプロイメントステップは Adobe Cloud Manager で行います。デプロイメントマネージャー ​の役割が付与されていることを確認してください。Cloud Manage の役割の定義を参照してください。

このチュートリアルを実施する際は、必ずサンドボックスプログラム開発環境を使用してください。

次の手順 next-steps

ステップバイステップのチュートリアルで、AEM WKND Sites プロジェクトを変換してフロントエンドパイプラインを有効にする方法を順を追って説明します。

すぐに取りかかりましょう。まずは、フルスタックプロジェクトのレビューの章に移動してチュートリアルを開始し、標準 AEM Sites プロジェクトのコンテキストでのフロントエンド開発ライフサイクルの概要を確認します。

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9