フロントエンドパイプラインを使用したサイトの開発 developing-site-with-front-end-pipeline

バックエンドチームは、まず、新しい HTML や JSON 出力を使用して開発環境を設定します。

1. フルスタックパイプラインを介して、必要な新しい HTML や JSON 出力、またはその両方のレンダリングに必要なコードをデプロイします。

2. フロントエンドチームが以前にアクセス権を持っていなかった環境の場合は、次の手順を実行する必要があります。

   1. URL：フロントエンドチームは、その開発環境の URL を知っておく必要があります。

   2. ACL：フロントエンドチームには、「寄稿者」権限と似た権限を持つローカル AEM ユーザーが割り当てられている必要があります。

   3. Git：フロントエンドチームには、その開発環境を具体的にターゲットとするフロントエンドモジュール用として、個別の Git の場所が必要です。

      一般的な方法は、開発環境で行われた変更を管理する dev 分岐を作成することです。この方法により、実稼動環境へのデプロイメントに使用される main 分岐に簡単に結合して戻すことができます。

   4. パイプライン：フロントエンドチームには、開発環境にデプロイする、フロントエンドパイプラインが必要です。そのパイプラインは、前のポイントで説明したように、通常は dev 分岐にあるフロントエンドモジュールをデプロイします。

次に、フロントエンドチームは、古い出力と新しい出力の両方で CSS と JS コードを動作するようにします。

1. 通常どおり、ローカルで開発するには、次の手順を実行します。

   1. npx aem-site-theme-builder proxy コマンドは、AEM 環境からコンテンツを取得するプロキシサーバーを起動します。フロントエンドモジュールの CSS ファイルと JS ファイルを、ローカルの dist フォルダーのファイルに置き換えます。
   2. 非表示の .env ファイルで AEM_URL 変数を設定すると、ローカルプロキシサーバーがコンテンツを使用する AEM 環境を制御できます。
   3. そのため、AEM_URL の値を変更すると、両方の環境に適合するように CSS と JS を調整するために、実稼動環境と開発環境を切り替えることができます。
   4. 新しい出力をレンダリングする開発環境と、古い出力をレンダリングする実稼動環境で動作する必要があります。

2. フロントエンドの作業は、更新されたフロントエンドモジュールが両方の環境で動作し、両方にデプロイされた時点で完了します。

その後、バックエンドチームは、フルスタックパイプラインを介して新しい HTML や JSON 出力、またはその両方をレンダリングするコードをデプロイすることにより、実稼動環境を更新できます。

フロントエンドチームは、CSS と JS をクリーンアップして、古い出力でのみ必要だった要素を削除し、フロントエンドパイプラインを介して最終的な更新を実稼動環境にデプロイできます。