AEM as a Cloud ServiceでのAEM Edge関数の設定

AEM as a Cloud Service環境でAEM Edge Functionsを設定する方法について説明します。

このチュートリアルでは、CLIのインストール、AEM サイトのデプロイメント、ボイラープレートテンプレートからのプロジェクトの設定、CDNの設定、AEM as a Cloud Service上での作業中のエンドポイントのデプロイメントについて説明します。

このチュートリアルでは、WKND Sites プロジェクト ​をデモサイトとして使用します。 同じ手順を独自のサイトと環境で実行できます。

構築する要素

AEM Edge Functionsは、AEM オリジンではなく、エッジのAdobe CDNで実行されるJavaScript モジュールです。 2つのルートを持つmy-edge-functionという名前の1つのAEM Edge関数をデプロイします。

開発時に、開発サーバーを使用してAEM Edge関数をローカルでテストします。 次に、CDN設定をAEM サイトプロジェクトにコピーし、Cloud ManagerまたはRDEを介してデプロイし、AEM Edge機能（JavaScript モジュール）をAdobe CDNにプッシュし、ブラウザーまたはcurlで両方のエンドポイントを検証します。

概要のステップ：

前提条件

開始する前に、次の項目が適切に設定されていることを確認してください。

手順1:CLIとプラグインのインストール

Adobe aio CLI、AEM Edge Functions、およびRDE プラグインをインストールまたは更新します。

# Install the Adobe CLI
$ npm install -g @adobe/aio-cli

# Install the AEM Edge Functions plugin
$ aio plugins install @adobe/aio-cli-plugin-aem-edge-functions

# Install the RDE plugin if you are using an RDE environment
$ aio plugins install @adobe/aio-cli-plugin-aem-rde

# Update the Adobe CLI
$ aio update

# List installed plugins (confirm the AEM Edge Functions plugin is listed)
$ aio plugins

# Update the installed plugins
$ aio plugins update

例えば、出力は次のスクリーンショットのようになります。

手順2:AEM サイトのデプロイ

AEM Edge Functionsを設定する前に、AEM サイトをターゲット環境にデプロイします。 サイトが既にデプロイされている場合は、そのサイトにアクセスできることを確認し、手順3にスキップします。

# Set up the RDE
$ aio aem:rde:setup

# Build the site
$ mvn clean install
$ aio aem:rde:install all/target/aem-guides-wknd.all-X.Y.Z-SNAPSHOT.zip
$ aio aem:rde:install dispatcher/target/aem-guides-wknd.dispatcher.cloud-X.Y.Z-SNAPSHOT.zip

# Verify the RDE and site are deployed
$ aio aem:rde:status

手順3：お使いの環境でAEM Edge Functionsを設定する

AEM Edge関数は、AEM as a Cloud Service環境で設定する必要があります。 これにより、コードと設定ファイルをAdobe CDNにデプロイできるので、サイトのJavaScript コードからAEM Edge Functionsでサポートされているルートを呼び出すことができます。

WKND （または独自の）AEM プロジェクトのルートから次のコマンドを実行します。

$ aio aem edge-functions setup

Adobe IMSにまだログインしていない場合は、コマンドトリガーのログインフローを使用します。 設定プロセスでは、プログラム、環境、サイトタイプ、およびADC プロジェクト設定の詳細を求めるプロンプトが表示されます。 設定の詳細は.aio ファイルに保存され、以降のAEM Edge Functions CLI コマンドのコンテキストが提供されます。

次のコマンドを使用して、AEM Edge Functionsの設定の詳細を確認します。

$ aio aem edge-functions info

出力は次のようになります。

手順4:AEM Edge Functions プロジェクトの作成

AEM Edge Functions プロジェクトをaem-edge-functions-boilerplate GitHub テンプレートから作成します。 ボイラープレートには、開始するために必要なファイルと設定が含まれています。

手順5:AEM Edge Functions プロジェクトの複製、レビュー、実行

AEM Edge Functions プロジェクトの複製

手順4で作成したリポジトリを複製し、IDEでWKND （または独自の）プロジェクトと一緒に開きます。 多くのエディターは、ワークスペースまたはマルチルートビューをサポートしており、両方のプロジェクトで同時に作業できます。

# Clone the repository
$ git clone https://github.com/<your-org>/<your-project-name>.git

例えば、WKND Sites プロジェクトとWKND AEM Edge Functions プロジェクトを1つのIDE ワークスペースで開きます。

AEM Edge Functions プロジェクトのレビュー

AEM Edge Functions プロジェクトを変更またはデプロイする前に、AEM Edge Functions コントラクトを定義する主要なファイルを確認してください。

test/、src/lib/、README.mdなどの残りのプロジェクトファイルを確認して、完全な設定を理解します。

AEM Edge Functions プロジェクトのローカル実行

迅速に反復するには、AEM Edge Functions プロジェクトをローカルで実行します。 AEM Edge Functions プロジェクトディレクトリから、依存関係をインストールし、ローカル開発サーバーを起動します。

# Navigate to the project directory (replace with your project name)
$ cd wknd-edge-functions

# Install dependencies
$ npm install

# Start the local development server
$ aio aem edge-functions serve

サーバーはhttp://127.0.0.1:7676から開始します。

例えば、出力は次のスクリーンショットのようになります。

手順6:CDN設定の確認とデプロイ

AEM Edge Functions プロジェクトには、config/ ディレクトリにCDN設定ファイルが含まれています。 AEM サイトプロジェクトにコピーする前に、それらを確認してください。

CDN設定の確認

AEM Edge Functions プロジェクトのconfig/ ディレクトリにあるCDN設定ファイルを確認します。

kind: "EdgeFunctions"
version: "1"
data:
  functions:
    - name: my-edge-function

サポートされているプロパティについて詳しくは、edgeFunctions.yaml リファレンス ​を参照してください。

kind: 'CDN'
version: '1'
data:
  originSelectors:
    rules:
      - name: route-weather-to-edge-function
        when: { reqProperty: path, equals: "/weather" }
        action:
          type: selectAemOrigin
          originName: edgefunction-my-edge-function
          skipCache: true
      - name: route-hello-world-to-edge-function
        when: { reqProperty: path, equals: "/hello-world" }
        action:
          type: selectAemOrigin
          originName: edgefunction-my-edge-function
          skipCache: true

重要なコールアウト：

詳しくは、​ オリジンセレクターを参照してください。 cdn.yaml ファイルは、トラフィックフィルタールール、リクエストと応答の変換、およびその他のCDN機能もサポートしていることに注意してください。 詳しくは、CDNでのトラフィックの設定を参照してください。

CDN設定の管理

サイトにはWAF ルール、トラフィックフィルター、その他の設定がcdn.yamlに既に含まれている可能性があるので、すべてのCDN設定をAEM サイトプロジェクトのconfig/ ディレクトリに保持します。 これにより、すべてのCDN設定が1か所に保持されます。

例えば、WKND サイトプロジェクトのCDN設定ファイルは次のようになります。

WKND プロジェクト のCDN設定ファイル

CDN設定のデプロイ

最後に、CDN設定をAEM as a Cloud Service環境にデプロイします。

# Navigate to the AEM project directory (replace with your project name)
$ cd aem-guides-wknd

# Deploy the CDN configuration
$ aio aem:rde:install -t env-config ./config

設定が正常にデプロイされたことを確認します。

$ aio aem edge-functions list

出力には、my-edge-function （またはedgeFunctions.yamlで宣言した名前）をリストする必要があります。

手順7:AEM Edge Functions プロジェクトのビルドとデプロイ

AEM Edge Functions プロジェクトをビルドしてデプロイするには、次のコマンドを使用します。これらのコマンドでは、.aio ファイルに保存されているコンテキストが使用されます。

# Navigate to the AEM Edge Functions project directory (replace with your project name)
$ cd wknd-edge-functions

# Review to make sure you are deploying to the correct AEM as a Cloud Service environment
$ aio aem edge-functions info

# Build the project
$ aio aem edge-functions build

# Deploy to Adobe CDN
$ aio aem edge-functions deploy my-edge-function

deployに渡された名前は、config/edgeFunctions.yamlで宣言されたnameと一致する必要があります。 また、オーサーインスタンスの​ AEM Administrator - author ​製品プロファイルに参加している必要があります。

例えば、出力は次のスクリーンショットのようになります。

手順8：エンドポイントの確認

ブラウザーまたはcurlを使用して、デプロイされたエンドポイントを確認します。

curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/hello-world
curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/weather

pXXXXXとeYYYYYをCloud Manager プログラムおよび環境IDに置き換えます。

例えば、次のスクリーンショットのように回答しています。

実際のシナリオでは、CDNのサーバーサイドロジックにAEM Edge Functionsを使用し、cdn.yamlで定義されたルーティングパスを通じてサイトから呼び出します。 詳細な設定については、AEM Edge Functions製品ドキュメント ​を参照してください。

概要

AEM as a Cloud Service環境でAEM Edge Functionsを正常に設定し、ボイラープレートテンプレートからプロジェクトを作成し、複製し、プロジェクトファイルをレビューし、ローカルに実行し、CDN設定をレビューおよびデプロイし、プロジェクトを構築およびデプロイし、エンドポイントを検証しました。

その他のリソース