アマゾンPA-API FaaSを使いリアルタイムで商品情報を取得

$ mkdir paapiFunction
$ cd paapiFunction
$ npm init

$ npm install amazon-paapi --save

$ mkdir -p netlify/functions

// URLを https://ドメイン名/paapi/「asin」とし、asinをパラメーターとして
// 関数本体へ渡す
export const config = {
    path: "/paapi/:asin+",
};

const amazonPaapi = require("amazon-paapi");

const commonParameters = {
    AccessKey: "アクセスキー",
    SecretKey: "シークレットキー",
    PartnerTag: "アソシエイトID",
    PartnerType: "Associates",
    Marketplace: "www.amazon.co.jp",
};
const requestParameters = {
    ItemIds: ["B09MCRYG2Y"],
    ItemIdType: "ASIN",
    Condition: "New",
    Resources: [
        "Images.Primary.Medium",
        "ItemInfo.Title",
        "Offers.Listings.Price",
    ],
};
const allowed_origins = [ // 許可するドメイン
    "https://bchari.com",
    "https://www.bchari.com",
    "https://6266051941055901697_df38389a483f423c9cb61ef4566b352b55a5f72d.blogspot.com",
    "https://draft.blogger.com",
];
// 関数本体 リクエストのパラメーター asin をアマゾンPA-APIに問い合わせ、
// PA-APIからのレスポンスにAccess-Control-Allow-Originヘッダーを付ける
export default async (req, context) => {
    const origin = req.headers.get("Origin");
    console.log(context.params);
    console.log(origin);
    const asins = context.params.asin.split("/");

    requestParameters.ItemIds = asins;
    let res = "";

    /** Promise */
    await amazonPaapi
        .GetItems(commonParameters, requestParameters)
        .then((data) => {
            res = JSON.stringify(data);
        })
        .catch((error) => {
            console.log(error);
            res = null;
        });

    let header;
    if (allowed_origins.includes(origin)) {
        header = {
            "Access-Control-Allow-Origin": origin,
        };
    }
    return new Response(res, {
        status: 200,
        statusText: "Netlify functions ppapi returned",
        headers: header,
    });
};
// URLを https://ドメイン名/paapi/「asin」とし、asinをパラメーターとして
// 関数本体へ渡す
export const config = {
    path: "/paapi/:asin+",
};

$ npm nstall netlify-cli -g

$ netlify login

$ netlify dev

$ git init
$ git add *
$ git commit -m"my first function"
$ git remote add origin https://github.com/ユーザ/[作成したリポジトリ].git
$ git git push origin master

<div class="pa-ad-unit" data-asin="B089X1S162"></div>
<div class="pa-ad-unit" data-asin="B0B35C211B"></div>
<div class="pa-ad-unit" data-asin="B0BXP4VT3Y"></div>

<template id="tpl"
  ><div class="paapi5-pa-ad-unit">
    <div class="paapi5-pa-product-container">
      <div class="paapi5-pa-product-image">
        <div class="paapi5-pa-product-image-wrapper">
          <a
            class="paapi5-pa-product-image-link"
            href=""
            title=""
            target="_blank"
            ><img
              class="paapi5-pa-product-image-source"
              src=""
              alt=""
              width=""
              height=""
          /></a>
        </div>
      </div>
      <div class="paapi5-pa-product-details">
        <div class="paapi5-pa-product-title">
          <a
            class="paap5-pa-product-title-link"
            href=""
            title=""
            target="_blank"
          ></a>
        </div>
        <div class="paapi5-pa-product-list-price">
          <span class="paapi5-pa-product-list-price-value"></span>
        </div>
        <div class="paapi5-pa-product-prime-icon">
          <span class="icon-prime-all"></span
          ><a
            class="paap5-pa-product-title-link"
            href=""
            title=""
            target="_blank"
            ><span class="buy-on-amazon">Amazonで買う</span></a
          >
        </div>
      </div>
    </div>
  </div>
</template>

async function getItems(asins) {
    const params = asins.join("/");
    try {
        const response = await fetch(
            `https://sumicfunctions.netlify.app/paapi/${params}`,
            {
                mode: "cors",
            },
        );
        if (!response.ok) {
            throw new Error("Network response was not OK");
        }
        const items = await response.json();
        return items;
    } catch (err) {
        console.log(err, "Fetch error");
        return null;
    }
}
async function renderItems() {
    const ads = document.querySelectorAll(".pa-ad-unit");
    const asins = [];
    ads.forEach((elem) => {
        const asin = elem.dataset.asin;
        asins.push(asin);
    });
    const res = await getItems(asins);
    ads.forEach((ad) => {
        const template = document.querySelector("#tpl");
        const clone = template.content.cloneNode(true);
        const link = clone.querySelectorAll(".paap5-pa-product-title-link");
        const item = res.ItemsResult.Items.find(
            (elem) => elem.ASIN === ad.dataset.asin,
        );
        link.forEach((elem) => {
            elem.href = item.DetailPageURL;
            elem.title = item.ItemInfo.Title.DisplayValue;
            if (elem.innerText === "") {
                elem.innerText = item.ItemInfo.Title.DisplayValue;
            }
        });
        const img_a = clone.querySelector(".paapi5-pa-product-image-link");
        const img = img_a.firstChild;
        img_a.href = item.DetailPageURL;
        img_a.title = item.ItemInfo.Title.DisplayValue;
        img.src = item.Images.Primary.Medium.URL;
        img.alt = item.ItemInfo.Title.DisplayValue;
        img.width = item.Images.Primary.Medium.Width;
        img.height = item.Images.Primary.Medium.Height;
        clone.querySelector(".paapi5-pa-product-list-price-value").innerText =
            item.Offers?.Listings[0].Price.DisplayAmount ?? "";
        ad.replaceWith(clone);
    });
}
document.addEventListener("DOMContentLoaded", renderItems);