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

フロントエンドパイプラインを使用したデプロイ

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

作成対象：

  • 中級
  • 開発者
  • 管理者

この章では、Adobe Cloud Manager でフロントエンドのパイプラインを作成し、実行します。ui.frontend モジュールからファイルをビルドし、AEM as a Cloud Service ビルトインの CDN にデプロイするだけです。このように、/etc.clientlibs ベースのフロントエンドリソース配信から移行できました。

目的 objectives

  • フロントエンドパイプラインを作成し、実行します。
  • フロントエンドのリソースが /etc.clientlibs からではなく、https://static- で始まる新しいホスト名から配信されることを確認します。

フロントエンドパイプラインの使用

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

前提条件 prerequisites

このチュートリアルは複数回に分けて行われ、標準の AEM プロジェクトのアップデートで説明した手順が完了していることを前提としています。

Cloud Manager でパイプラインを作成およびデプロイするための権限と、AEM as a Cloud Service 環境へのアクセス権を持っていることを確認します。

既存のパイプライン名を変更

「設定」タブの「 実稼働以外のパイプライン名」フィールドで、既存のパイプラインの名前を 開発にデプロイ から​ フルスタック WKND 開発環境にデプロイ ​に変更します。これは、名前を見ただけで、パイプラインがフルスタックかフロントエンドかを明確にするためです。

パイプライン名を変更

「ソースコード」タブで、「リポジトリ」フィールドと「Git ブランチ」フィールドの値が正しいこと、ブランチにフロントエンドパイプライン契約の変更があることも確認します。

ソースコード設定パイプライン

フロントエンドパイプラインの作成

ui.frontend モジュールで ONLY モジュールのフロントエンドリソースをビルドし、デプロイするには、次の手順を実行します。

  1. Cloud Manager UI の「パイプライン」セクションで、「追加」ボタンをクリックし、「実稼動以外のパイプラインを追加（ または 実稼動パイプラインを追加）」を、デプロイ先の AEM as a Cloud Service 環境に基づいて作成します。

  2. 実稼動以外のパイプラインを追加 ​ダイアログの​ 設定 ​手順で「デプロイメントパイプライン」オプションを選択し、フロントエンド WKND 開発環境にデプロイ ​と名前を付けて、「継続」をクリックします。

フロントエンドパイプライン設定の作成

  1. ソースコード ​の手順で、「フロントエンドコード」オプションを選択し、適格なデプロイメント環境 ​から環境を選びます。「ソースコード」セクションで、リポジトリと「Git ブランチ」フィールドの値が正しく、フロントエンドパイプラインのコントラクトが変更されたブランチであることを確認します。
    最も重要なこと ​は、「コードロケーション」フィールドの値が/ui.frontendであり、最後に「保存」をクリックすることです。

フロントエンドパイプラインソースコードを作成

デプロイメント順序

  • 最初に、新しく名前が変更された​ フルスタック WKND 開発環境へのデプロイ ​パイプラインを使用して WKND clientlib ファイルを AEM リポジトリから削除します。さらに最も重要なのは、Sling 設定 ファイル（SiteConfig、HtmlPageItemsConfig）を追加して、フロントエンドのパイプライン契約用に AEM を準備することです。

スタイルが設定されていない WKND サイト

WARNING
フルスタック WKND 開発環境へのデプロイ ​パイプライン完了後、スタイルが設定されていない WKND サイトができ、表示が崩れているように見えることがあります。停電を計画するか、変則的な時間帯にデプロイしてください。これは、1 回のフルスタックパイプラインの使用からフロントエンドパイプラインへの初期切り替え中に計画する必要があります。
  • 最後に、開発環境へのフロントエンド WKND デプロイ パイプラインはビルドのみ ui.frontend モジュールを使用し、フロントエンドリソースを直接 CDN にデプロイします。
IMPORTANT
スタイルが設定されていない WKND サイトが正常に戻り、今回は​__フロントエンド__​パイプラインの実行がフルスタックのパイプラインよりもずっと速かったことに気づくでしょう。

スタイルの変更と新しい配信パラダイムの検証

  • WKND サイトの任意のページを開くと、文字色が Adobe Red になり、フロントエンドのリソース（CSS、JS）ファイルが CDN から配信されていることがわかります。リソースリクエストのホスト名は https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css で始まり、同様に HtmlPageItemsConfig ファイルで参照した site.js やその他の静的リソースも含みます。

新しくスタイル設定された WKND サイト

TIP
ここでの $HASH_VALUE$ は、フロントエンド WKND 開発環境へのデプロイ ​パイプラインの「CONTENT HASH」フィールドで見るものと同じものです。AEM にフロントエンドリソースの CDN URL を通知し、その値は prefixPath プロパティの下の /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content に格納されます。

ハッシュ値の相関性

これで完了です。 congratulations

WKND Sites プロジェクトの ui.frontend モジュールのみをビルド、デプロイするフロントエンドパイプラインの作成、実行、検証が完了しました。これで、フロントエンドチームは、AEM プロジェクトのライフサイクル全体を超えて、サイトのデザインとフロントエンドの動作を素早く繰り返し実行できます。

次の手順 next-steps

次章の考慮事項では、フロントエンドとバックエンドの開発プロセスへの影響を確認します。

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