パイプラインの設定

フロントエンドパイプラインを作成して、サイトのテーマのカスタマイズを管理します。

これまでの説明内容

前のドキュメントのAEM Quick Site Creation ジャーニーでは、 テンプレートからサイトを作成し、 サイトテンプレートを使用してAEMサイトをすばやく作成する方法を学び、フロントエンドツールを使用してさらにカスタマイズできるようになりました。次の手順を実行する必要があります。

  • AEM Site テンプレートの取得方法を説明します。
  • テンプレートを使用して新しいサイトを作成する方法を説明します。
  • 新しいサイトからテンプレートをダウンロードして、フロントエンド開発者に提供する方法を確認します。

この記事は、これらの基本事項に基づいて構築されるので、フロントエンドパイプラインを設定できます。フロントエンド開発者は、後でフロントエンドカスタマイズ機能をデプロイするために使用します。

目的

このドキュメントでは、フロントエンドパイプラインと、サイトのカスタマイズされたテーマのデプロイメントを管理するためのパイプラインの作成方法を説明します。 ドキュメントを読めば、以下が可能です。

  • フロントエンドパイプラインとは何かを理解します。
  • Cloud Manager でフロントエンドパイプラインを設定する方法を説明します。

担当ロール

このジャーニーの部分は、Cloud Manager 管理者に適用されます。

要件

  • Cloud Manager にアクセスできる必要があります。
  • 次のメンバーである必要があります: デプロイメントマネージャー Cloud Manager での役割について説明します。
  • AEM環境の Git リポジトリは、Cloud Manager で設定する必要があります。
    • 通常、これはすでにアクティブなプロジェクトの場合に当てはまります。 ただし、ない場合は、次のリンクにある Cloud Manager Repositories ドキュメントを参照してください。 その他のリソース 」セクションに入力します。

フロントエンドパイプラインとは

フロントエンド開発では、AEMサイトのスタイルを定義する JavaScript、CSS、静的リソースのカスタマイズが必要になります。 フロントエンド開発者は、独自のローカル環境で作業して、これらのカスタマイズをおこないます。 準備が整うと、変更はAEM Git リポジトリにコミットされます。 ただし、ソースコードにのみコミットされます。 彼らはまだ生きていない。

フロントエンドパイプラインは、これらのコミット済みのカスタマイズを取得し、AEM環境(通常は実稼動環境または非実稼動環境)にデプロイします。

このようにして、フロントエンド開発は、独自のデプロイメントパイプラインを持つAEM上のフルスタックバックエンド開発とは別に、それと並行して動作できます。

メモ

フロントエンドパイプラインでデプロイできるのは、AEMサイトのスタイルを設定する JavaScript、CSS、静的リソースのみです。 ページやアセットなどのサイトコンテンツは、パイプラインにデプロイできません。

Cloud Manager にアクセス

  1. 次の場所にあるAdobeCloud Manager にログインします。 my.cloudmanager.adobe.com.

  2. Cloud Manager には、使用可能な様々なプログラムのリストが表示されます。 管理する項目をタップまたはクリックします。 AEM as a Cloud Serviceを使い始めたばかりの場合、1 つのプログラムしか使用できない可能性があります。

    Cloud Manager でのプログラムの選択

これで、プログラムの概要が表示されます。 ページの外観は異なりますが、次の例のようになります。

Cloud Manager の概要

URL にアクセスまたはコピーしたプログラムの名前をメモしておきます。 後でフロントエンド開発者にこれを提供する必要があります。

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

これで Cloud Manager にアクセスし、フロントエンドデプロイメント用のパイプラインを作成できます。

  1. パイプライン 「 」セクションで、 追加 」ボタンをクリックします。

    パイプライン

  2. の下に表示されるポップアップメニュー 追加 ボタン選択 実稼動以外のパイプラインを追加 この旅の目的で

  3. 設定 タブ 実稼動以外のパイプラインを追加 ダイアログが開きます。

    • 選択 デプロイメントパイプライン.
    • でパイプラインに名前を付けます。 実稼動以外のパイプライン名 フィールドに入力します。

    パイプライン設定を追加

  4. タップまたはクリック 続行.

  5. ソースコード タブ:

    • 選択 フロントエンドコード をデプロイするコードのタイプとして使用します。
    • 以下で正しい環境が選択されていることを確認します。 適格なデプロイメント環境.
    • 正しい リポジトリ.
    • 定義する Git ブランチ パイプラインを関連付ける必要があります。
    • 次を定義: コードの場所 (フロントエンド開発が、選択したリポジトリの特定のパスの下に配置されている場合)。 デフォルト値はリポジトリのルートですが、多くの場合、フロントエンド開発とバックエンドは異なるパスの下にあります。

    パイプライン追加のソースコード情報

  6. 保存して閉じる」をタップまたはクリックします。

新しいパイプラインが作成され、 パイプライン Cloud Manager ウィンドウの「 」セクションに表示されます。 パイプライン名の後の省略記号をタップすると、必要に応じて詳細を編集または表示するオプションが表示されます。

パイプラインオプション

ヒント

AEMaaCS のパイプラインに既に精通しており、フロントエンドパイプラインの詳細を含む様々なタイプのパイプラインの違いについて詳しくは、 CI/CD パイプラインの設定 — でリンクされたCloud Servicesを参照してください その他のリソース 」の節を参照してください。

次の手順

これで、AEM Quick Site Creation ジャーニーのこの部分が完了し、次の作業をおこなう必要があります。

  • フロントエンドパイプラインとは何かを理解します。
  • Cloud Manager でフロントエンドパイプラインを設定する方法を説明します。

この知識に基づいてドキュメントを次に確認し、AEMクイックサイト作成のジャーニーを続行します フロントエンド開発者にアクセス権を付与する ここでは、フロントエンドデベロッパーを Cloud Manager にオンボーディングして、AEMサイトの git リポジトリーとパイプラインにアクセスできるようにします。

その他のリソース

クイックサイト作成ジャーニーの次の部分に進むことをお勧めしますが、ドキュメントを確認してください サイトテーマのカスタマイズ 以下に、このドキュメントで取り上げたいくつかの概念について詳しく説明する、その他のオプションのリソースを示します。ただし、このジャーニーを続行する必要はありません。

  • Cloud Manager のドキュメント - Cloud Manager の機能の詳細については、詳細な技術ドキュメントを直接お問い合わせください。
  • Cloud Manager リポジトリ - AEMaCS プロジェクトの Git リポジトリーの設定および管理方法について詳しくは、このドキュメントを参照してください。
  • CI/CD Pipeline の設定 —Cloud Services — このドキュメントでは、フルスタックとフロントエンドの両方のパイプラインの設定に関する詳細を説明します。

このページ