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

フルスタック AEM プロジェクトを更新して、フロントエンドパイプラインを使用する

Last update: Thu Oct 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：
  • AEM プロジェクトアーキタイプ
  • Cloud Manager
  • CI-CD パイプライン

作成対象：

  • 中級
  • 開発者
  • 管理者

この章では、WKND Sites プロジェクト ​の設定を変更して、完全なフルスタックパイプラインの実行を要求するのではなく、フロントエンドパイプラインを使用して JavaScript と CSS をデプロイします。これにより、フロントエンドアーティファクトとバックエンドアーティファクトの開発とデプロイメントのライフサイクルを切り離し、より迅速で反復的な開発プロセス全体を実現することができます。

目的

  • フルスタックプロジェクトを更新してフロントエンドパイプラインを使用する

フルスタック AEM プロジェクトの設定変更の概要

video poster

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

前提条件

これは複数のパートから成るチュートリアルで、「ui.frontend」モジュールを確認済みであることを前提としています。

フルスタック AEM プロジェクトの変更

テストを実行するには、プロジェクト関連の設定変更とスタイルの変更を 3 つ行う必要があります。そのため、WKND プロジェクトでは、フロントエンドパイプライン契約に対して設定を有効にするために、合計 4 つの具体的な変更が行われます。

  1. ui.frontend フルスタックビルドサイクルからモジュールを削除

    • WKND サイトプロジェクトのルートの pom.xml で、<module>ui.frontend</module> サブモジュールエントリをコメントアウトします。
        ...
    <modules>
    <module>all</module>
    <module>core</module>
    <!--
    <module>ui.frontend</module>
    -->
    <module>ui.apps</module>
    ...
    • ui.apps/pom.xml で、関連の依存関係もコメントアウトします
        ...
    <!-- ====================================================================== -->
    <!-- D E P E N D E N C I E S                                                -->
    <!-- ====================================================================== -->
        ...
    <!--
        <dependency>
            <groupId>com.adobe.aem.guides</groupId>
            <artifactId>aem-guides-wknd.ui.frontend</artifactId>
            <version>${project.version}</version>
            <type>zip</type>
        </dependency>
    -->
    ...

  2. 2 つの新規 webpack 設定ファイルを追加して、フロントエンドパイプライン契約の ui.frontend モジュールを準備します。

    • 既存の webpack.common.js を webpack.theme.common.js としてコピーし、output プロパティと MiniCssExtractPlugin、CopyWebpackPlugin プラグイン設定パラメーターを次のように変更します。
    ...
output: {
        filename: 'theme/js/[name].js',
        path: path.resolve(__dirname, 'dist')
    }
...

...
    new MiniCssExtractPlugin({
            filename: 'theme/[name].css'
        }),
    new CopyWebpackPlugin({
        patterns: [
            { from: path.resolve(__dirname, SOURCE_ROOT + '/resources'), to: './clientlib-site' }
        ]
    })
...
    • 既存の webpack.prod.js を webpack.theme.prod.js としてコピーし、common 変数の場所を上記のファイルに次のように変更します
    ...
    const common = require('./webpack.theme.common.js');
...
    NOTE
    上記の 2 つの「webpack」設定の変更では、出力ファイルとフォルダーの名前が異なるため、clientlib（フルスタック）とテーマ生成（フロントエンド）パイプラインフロントエンドアーティファクトは簡単に区別できます。
    上記の変更をスキップして既存の webpack 設定を使用することもできますが、以下の変更が必要です。
    名前の設定や整理の方法は、ユーザー次第です。
    • package.json ファイルで、name プロパティ値が /conf ノードのサイト名と同じであることを確認します。scripts プロパティの下には、このモジュールからフロントエンドファイルを構築する方法を説明する build スクリプトがあります。
        {
    "name": "wknd",
    "version": "1.0.0",
    ...

    "scripts": {
        "build": "webpack --config ./webpack.theme.prod.js"
    }

    ...
    }

  3. 2 つの Sling 設定を追加して、フロントエンドパイプライン用の ui.content モジュールを準備します。

    • com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig にファイルを作成します。これには、ui.frontend モジュールが webpack 構築プロセスを使用して dist フォルダーの下に生成するすべてのフロントエンドファイルが含まれます。
    ...
    <css
    jcr:primaryType="nt:unstructured"
    element="link"
    location="header">
    <attributes
        jcr:primaryType="nt:unstructured">
        <as
            jcr:primaryType="nt:unstructured"
            name="as"
            value="style"/>
        <href
            jcr:primaryType="nt:unstructured"
            name="href"
            value="/theme/site.css"/>
...
    TIP
    詳しくは、AEM WKND Sites プロジェクト ​内の完全な HtmlPageItemsConfig を参照してください。
    • 次に com.adobe.aem.wcm.site.manager.config.SiteConfig の themePackageName 値が package.json と name プロパティ値と同じに、siteTemplatePath が /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0 スタブのパス値を指すようにします。
    ...
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
            jcr:primaryType="nt:unstructured"
            siteTemplatePath="/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0"
            themePackageName="wknd">
    </jcr:root>
...
    TIP
    詳しくは、AEM WKND Sites プロジェクト ​内の完全な SiteConfig を参照してください。

  4. テスト実行のためにフロントエンドパイプラインを通じてデプロイするテーマまたはスタイルが変更されます。ui.frontend/src/main/webpack/base/sass/_variables.scss を更新し、text-color を Adobe red（または独自のものを選択可能）に変更しています。

        $black:     #a40606;
    ...

最後に、これらの変更をプログラムの Adobegit リポジトリにプッシュします。

AVAILABILITY
これらの変更は、AEM WKND サイトプロジェクト ​の​ フロントエンドパイプライン ブランチ内にある GitHub で入手できます。

注意 - 「フロントエンドパイプラインを有効にする」ボタン

パネルセレクターの「サイト」オプションでサイトルートまたはサイトページを選択すると、「フロントエンドパイプラインを有効にする」ボタンが表示されます。「フロントエンドパイプラインを有効にする」ボタンをクリックすると、上記の Sling 設定 ​が上書きされるので、Cloud Manager パイプラインを実行して上記の変更をデプロイした後は、このボタンをクリックしないでください。

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

誤ってクリックした場合は、パイプラインを再実行して、フロントエンドパイプライン契約と変更が復元されていることを確認します。

おめでとうございます。

これで、WKND サイトプロジェクトが、フロントエンドパイプライン契約に対して有効になるように更新されました。

次の手順

次の章、フロントエンドパイプラインを使用したデプロイでは、フロントエンドパイプラインを作成して実行し、「/etc.clientlibs」ベースのフロントエンドリソース配信からの​ 移動 ​方法を確認します。

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