ドキュメント AEM AEM チュートリアル AEM Sites WKND チュートリアル

フルスタック AEM プロジェクトの「ui.frontend」モジュールを確認する aem-full-stack-ui-frontent

Last update: Wed May 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

中級
開発者
管理者

この章では、WKND サイトプロジェクト の「ui.frontend」モジュールに焦点を当てて、フルスタック AEM プロジェクトのフロントエンドアーティファクトの開発、デプロイおよび配信について確認します。

目的 objective

AEM フルスタックプロジェクトでのフロントエンドアーティファクトのビルドおよびデプロイメントフローについて
AEM フルスタックプロジェクトの ui.frontend モジュールの webpack 設定
AEM クライアントライブラリ（clientlibs とも呼ばれる）の生成プロセス

AEM フルスタックおよびクイックサイト作成プロジェクトのフロントエンドデプロイメントフロー

IMPORTANT

このビデオでは、フルスタックプロジェクトとクイックサイト作成 プロジェクトの両方のフロントエンドフローを説明および実演し、フロントエンドリソースのビルド、デプロイ、配信モデルの微妙な違いを概説します。

https://video.tv.adobe.com/v/3409344?quality=12&learn=on

前提条件 prerequisites

AEM WKND Sites プロジェクトのクローン
AEM WKND Sites プロジェクトのクローンを AEM as a Cloud Service にビルドしてデプロイしてあること。

詳しくは、AEM WKND Site プロジェクトの README.md を参照してください。

AEM フルスタックプロジェクトのフロントエンドアーティファクトフロー flow-of-frontend-artifacts

以下は、フルスタック AEM プロジェクトにおけるフロントエンドアーティファクトの 開発、デプロイ、配信 フローの概要です。

フロントエンドアーティファクトの開発、デプロイメント、配信

開発段階では、ui.frontend/src/main/webpack フォルダーの CSS ファイルと JS ファイルを更新することで、スタイリングやブランド変更などのフロントエンドの変更が行われます。次に、ビルド時に、webpack module-bundler と maven プラグインは、これらのファイルを ui.apps モジュールの下で最適化された AEM clientlibs に変換します。

Cloud Manager でフルスタック パイプラインを実行すると、フロントエンドの変更が AEM as a Cloud Service 環境にデプロイされます。

フロントエンドのリソースは、/etc.clientlibs/ で始まる URI パスを介して web ブラウザーに配信され、通常は AEM Dispatcher および CDN にキャッシュされます。

NOTE

同様に、AEM クイックサイト作成ジャーニー では、フロントエンドの変更は__フロントエンド__パイプラインを実行することで、AEM as a Cloud Service 環境にデプロイされます。パイプラインの設定を参照してください

WKND Sites プロジェクトでの WebPack 設定の確認 development-frontend-webpack-clientlib

WKND Sites のフロントエンドリソースをバンドルするために使用される webpack 設定ファイルは 3 つあります。

webpack.common - これには、WKND リソースのバンドルと最適化を指示する共通設定が含まれます。output プロパティは、作成する統合ファイル（JavaScript バンドルとも呼ばれますが、AEM OSGi バンドルと混同しないように）を出力する場所を指定します。デフォルトの名前は clientlib-site/js/[name].bundle.js に設定されています。

code language-javascript
`... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...`

webpack.dev.js には、webpack-dev-serve の開発設定が含まれており、使用する HTML テンプレートを指しています。また、localhost:4502 で実行されている AEM インスタンスへのプロキシ設定も含まれます。

code language-javascript
`... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...`

webpack.prod.js には 実稼働 設定が含まれており、プラグインを使用して開発ファイルを最適化されたバンドルに変換します。

code language-javascript
`... module.exports = merge(common, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin({ ...}) } ...`

バンドルされたリソースは、aem-clientlib-generator プラグインを使用して、clientlib.config.js ファイルで管理されている設定を使用して ui.apps モジュールに移動されます。

    ...
    const BUILD_DIR = path.join(__dirname, 'dist');
    const CLIENTLIB_DIR = path.join(
    __dirname,
    '..',
    'ui.apps',
    'src',
    'main',
    'content',
    'jcr_root',
    'apps',
    'wknd',
    'clientlibs'
    );
    ...

ui.frontend/pom.xml の frontend-maven-plugin は、AEM プロジェクトのビルド中に webpack のバンドルと clientlib の生成を調整します。

$ mvn clean install -PautoInstallSinglePackage

AEM as a Cloud Service へのデプロイメント deployment-frontend-aemaacs

フルスタック パイプラインは、これらの変更を AEM as a Cloud Service 環境にデプロイします

AEM as a Cloud Service からの配信 delivery-frontend-aemaacs

フルスタックパイプラインを介してデプロイされたフロントエンドリソースは、AEM サイトから web ブラウザーに /etc.clientlibs ファイルとして配信されます。これは、公開されている WKND サイトにアクセスして、web ページのソースを表示することで確認できます。

    ....
    <link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-181cd4102f7f49aa30eea548a7715c31-lc.min.css" type="text/css">

    ...

    <script async src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-d4e7c03fe5c6a405a23b3ca1cc3dcd3d-lc.min.js"></script>
    ....

おめでとうございます。 congratulations

これで、フルスタックプロジェクトの ui.frontend モジュールを確認しました

次の手順 next-steps

次の章では、フロントエンドパイプラインを使用するようにプロジェクトを更新して、AEM WKND サイトプロジェクトをフロントエンドパイプライン契約に対して有効にします。

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9