Edge Delivery ServicesでのAEM Edge関数の設定

Cloud Managerにログインし、Edge Delivery Services アドオンでプログラムを開きます。 プログラムの概要で、「Edge Delivery」タブが表示されていることを確認します。

Edge Delivery タブで、Edge Delivery To Do リスト​に入力します。 主な手順は次のとおりです。

1. Edge Delivery サイトを追加:

   • サイト名: Frescopa
   • Edge Deliveryの生成元: https://main--frescopa--sachinmali.aem.live/

   形式はhttps://<branch>--<site-name>--<organization-name>.aem.live/です。<branch>、<site-name>および<organization-name>はそれぞれ、Edge Delivery Services サイトプロジェクトのブランチ、サイト名および組織名です。

   Edge Delivery Services サイトプロジェクトのdev ブランチを設定することをお勧めします。ただし、アドビのデモサイトについては、以下のスクリーンショットを参照してください。

   

2. ドメインを追加:

   • ドメイン名: myfrescopa.enablementadobe.com

   Edge Delivery Services サイトプロジェクトの開発ブランチにマッピングされた開発サイトを使用する場合でも、AEM Edge Functions プロジェクトをデプロイするには、カスタムドメイン名を設定する必要があります。

3. SSL証明書を追加:

   • 証明書の種類：顧客管理（OV/EV）
   • 証明書の名前: enablementadobe.com
   • 証明書: -----BEGIN CERTIFICATE-----から-----END CERTIFICATE-----までの署名済み証明書ファイルの内容
   • 秘密鍵: -----BEGIN PRIVATE KEY-----から-----END PRIVATE KEY-----までの秘密鍵ファイルの内容
   • 証明書チェーン: -----BEGIN CERTIFICATE-----と-----END CERTIFICATE-----の間の証明書チェーンファイルコンテンツ

   

   Adobe管理（DV）証明書も使用できます。チュートリアルの目的では、例として、顧客管理（OV/EV）証明書を使用しています。

4. DNS レコード​をmyfrescopa.enablementadobe.comのDNS ホスティング サービスに追加します。

5. Adobeが管理するCDNにドメイン myfrescopa.enablementadobe.comをマッピングします。

   へのドメインのマッピング

Edge Delivery Sites テーブルにサイトが表示されることを確認します。 デモ Frescopa サイトはhttps://myfrescopa.enablementadobe.com/にアクセスできます。

GitHubのaem-edge-functions-boilerplateに移動します。

右上隅で、このテンプレートを使用 > 新しいリポジトリを作成​を選択します。

リポジトリ名（例：frescopa-edge-functions）を指定し、説明を追加して、表示を​ プライベート ​に設定し、リポジトリを作成​を選択します。

package.jsonには、プロジェクトの依存関係が含まれています。 @fastly/js-computeの依存関係に注意してください。 詳しくは、Compute Platform上のJavaScriptを参照してください。

src/index.jsは関数のエントリ ポイントであり、プロジェクトのメイン ロジックが含まれています。 Fastly ComputeのaddEventListener("fetch", ...) パターンを使用します。 すべての着信リクエストはhandleRequest関数を通じてフローされます。この関数では、ルートマッチングロジックを追加します。 例えば、次のコードはボイラープレートからのものです。

// src/index.js
addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));

async function handleRequest(event) {
    const req = event.request;
    const url = new URL(req.url);

    let finalResponse;

    try {
        // Route matching logic
        if (url.pathname === "/" && req.method === "GET") {
            finalResponse = new Response("Hello World from the edge!", { status: 200 });
        } else if (url.pathname === "/hello-world" && req.method === "GET") {
            finalResponse = new Response("Hello World from the edge!", { status: 200 });
        } else if (url.pathname === "/weather" && req.method === "GET") {
            finalResponse = await weatherHandler(req, event.client);
        } else {
            finalResponse = response.notFound();
        }
    } catch (err) {
        finalResponse = new Response("Internal Server Error", { status: 500 });
    }

    return finalResponse;
}

1つのAEM Edge関数は、handleRequestのif ステートメントを通じて複数のルートを処理できます。

fastly.tomlはローカル開発サーバーを構成します。 詳しくは、Fastly.toml リファレンス ​を参照してください。

config/には、AEM Edge Function サービスとCDN ルーティング ルールの設定ファイルが含まれています。 これらのファイルは、Cloud ManagerのEdge Delivery設定パイプラインを通じてデプロイします。 ステップ 6では、このプロセスを説明します。

Adobe リポジトリ：プログラム用にCloud Managerで新しいリポジトリを作成します。

プライベートリポジトリ：既存のGitHub リポジトリをCloud Managerにリンクします。

Cloud Managerで、Repositories​を開き、Add Repository​を選択します。

リポジトリを追加 ダイアログで、プライベートリポジトリ​を選択し、リポジトリ名、URLおよびタイプを指定します。 「保存」を選択します。

プライベートリポジトリ所有権の検証 ダイアログの手順を完了します。

1. Cloud Managerにリポジトリへのアクセス権を付与します。

   

2. AEM Edge Functions プロジェクトリポジトリに検証秘密鍵を保存します。

   

プログラムの概要ページで「Edge Delivery」タブを開きます。 パイプライン​で、Edge Delivery パイプラインを追加​を選択します。

Edge Delivery パイプラインを追加 ダイアログで、名前を入力し、続行​を選択します。

Source コード​の手順で、追加したプライベートリポジトリ、main ブランチ、および/configをコードの場所として選択します。 「保存」を選択します。

パイプライン名の横にある​ … ​を選択してパイプラインを実行し、実行​します。