フロントエンドパイプラインを使用したサイトの開発 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 をクリーンアップして、古い出力でのみ必要だった内容を削除し、フロントエンドパイプラインを介して最後の更新を実稼動環境にデプロイできます。