デプロイと検証

IMPORTANT
AEM Edge Functionsは現在ベータ版です。 機能やドキュメントは変更される可能性があります。 フィードバックについては、aemcs-edgecompute-feedback@adobe.comまでお問い合わせください。

目標は、AEM Edge関数を呼び出してサードパーティ APIから動的データを取得する動的なEdge Delivery Services ブロックを​ ビルド ​することです。

4つ目と最後のステップは、両方のプロジェクトを開発サイトにデプロイし、フロー全体がローカルだけでなく、エンドツーエンドで機能することを確認することです。 Edge Delivery Services ブロックとAEM Edge関数は2つの別々のリポジトリに存在するため、2つの別々のPRを通じて昇格します。 最初に、Edge Delivery Services🔗でのAEM Edge関数のデプロイメント戦略を確認します。 AEM Edge関数がサイトとブランチにどのようにバインドするか、およびサイトごとにシークレットをスコープする方法について説明します。 このページは、このチュートリアルの2つのブランチの具体的なシーケンスです。

両方のPRを上げて結合する

  1. AEM Edge Functions プロジェクトで、estimated-delivery (または作成したブランチ)からdev ブランチにPRを発生させます。 私の場合、myfrescopa-edge-functions プロジェクト PRを参照してください
  2. Edge Delivery Services サイトプロジェクトで、estimated-delivery (または作成したブランチ)からdev ブランチにPRを作成します。 私の場合、Frescopa サイトプロジェクト PRを参照してください
  3. 両方をレビューして結合します。

2つのPRは独立しています。 マージの順序はレビューには関係ありませんが、AEM Edge関数は、Edge Delivery Services ブロックの呼び出しがデプロイされたサイトで成功する前にデプロイする必要があります。ブロックは単にパスを呼び出すだけで、既に動作するコードを指しているCDN ルートに依存するからです。

ページを公開して公開

プレビューに公開すると、​ コードをプッシュしてブロック ​を作成し、作成したコンテンツをaem upおよびプレビューCDN ホストで利用できるようになります。 開発サイトのドメイン上のライブトラフィックには、Liveに公開したのと同じページが必要です。 AEM Sitesでページを開き、以前にプレビューに公開したのと同じようにライブに公開します。

設定パイプラインへのシークレットの追加

チュートリアルでは、実際の呼び出しにまだ値を使用していませんが、モックされたアップストリーム呼び出しはCATALOG_API_TOKENDELIVERY_API_TOKENからSecretStoreManager.getSecret()を読み取りました。 Edge Functionsで設定とシークレットを使用するconfig/edgeFunctions.yamlで、サイトごとに接頭辞が付いたCloud Manager パイプライン変数を参照して、両方をシークレットとして宣言します。 次の手順でパイプラインを実行する前に、対応する変数をCloud Managerに追加します。

設定パイプラインにシークレットを追加

CDN設定とAEM Edge機能のデプロイ

AEM Edge Functions プロジェクトのdev ブランチに変更内容が結合されたら、まずCDN設定をデプロイし、次にAEM Edge機能自体をデプロイします。

設定パイプラインの実行

Cloud ManagerでEdge Delivery設定パイプラインを実行し、CDN設定を確認してデプロイ ​します(パイプラインの​ Source Code ​のステップポイントをmainではなくdev ブランチで確認し、結合した設定を取得します)。 cdn.yamledgeFunctions.yamlはどちらも変更されたため、新しいオリジン セレクターのルールがプッシュされ、前の手順で追加した秘密参照が解決されます。

Cloud ManagerでEdge Delivery設定パイプラインを実行

AEM Edge関数のビルドとデプロイ

パイプラインが成功したら、関数自体をビルドしてデプロイします。AEM Edge Functions プロジェクト ​をビルドしてデプロイします。

$ cd myfrescopa-edge-functions
$ git checkout dev && git pull

# Confirm the CLI context targets the Dev site
$ aio aem edge-functions info

開発サイトドメインを確認するAEM edge-functions情報

ビルドおよびデプロイする前に、Site Domainが開発サイト (例:dev-myfrescopa.enablementadobe.com)と一致することを確認してください。

$ aio aem edge-functions build
$ aio aem edge-functions deploy my-edge-function
NOTE
このチュートリアルはCLIからデプロイされるので、手順は表示されたままになります。 実際のプロジェクトの場合は、CI/CDを使用してデプロイするので、トリガーが誰であろうと、すべてのデプロイは同じように実行されます。

エンドポイントの確認

AEM Edge関数が最初に直接応答することを確認します。

$ curl "https://dev-myfrescopa.enablementadobe.com/api/frescopa/estimated-delivery?sku=house-blend-medium-roast&postcode=90210"

次に、サイトを開き、Edge Delivery Services ブロック自体を実行します。

https://dev-myfrescopa.enablementadobe.com/dev/branches/estimated-delivery

フォームを送信し、デプロイされたAEM Edge関数からのライブデータでレンダリングされた結果を確認します。これは、​ ブロックをAEM Edge関数に接続する際のローカル応答ではありません。

ブラウザーの「DevTools Network」タブを開き、リクエスト URLがAEM Edge関数の生のデバッグドメインではなく、サイトの独自のドメインであることを確認します。 これにより、CDN オリジン セレクターが相対パス same-originをルーティングしていることが確認されます。これは、記述されている環境に適したURLを選択してください

CDN を介して同じオリジンをルーティングした推定配信リクエストを示す「ネットワーク」タブ

リクエストがここで失敗したがローカルで動作した場合は、最初にCDN オリジンのセレクタールール(パス、originName、およびパイプラインが実際に実行されたこと)を確認してから、AEM Edge関数のビルドおよびデプロイの出力でエラーが発生したことを確認します。

さらにプロモーションする

この機能をdevからstageおよびmainに移動するには、各サイトの結合、デプロイ、検証シーケンスを繰り返し、​ サイトを通じてコードを宣伝します。

概要

2つのアップストリーム呼び出しを結合するAEM Edge関数ハンドラーを実装し、それを呼び出すEdge Delivery Services ブロックを構築し、2つを環境対応URL切り替えとCORSで接続し、両方をライブサイトにデプロイしました。

その他のリソース

recommendation-more-help
experience-manager-learn-help-cloud-service