ソース

前回、puppeteer-clusterで同時起動の制御をしたはずだったのだが、
書き方が悪いのか同時アクセスすると暴走してVPSの応答がなくなってしまうので、vercelに分離した。

vercelとは

vercel

herokuと同じようにサーバサイドのプログラムをデプロイできるサービス。
netlifyはフロントエンド特化。

OGPサーバの用途

• パワプロ風画面ジェネレータを作ってみた
• バえない機能のつくりかた

ルーティングに苦戦

vercelはnow.jsonでルーティングを記述している。
正規表現で各メソッドにreq.query.idを渡す場合の記述の仕方はこんな感じ。

 "routes": [
        { "src": "/cap-baseball/(?<id>[^/]*)", "dest": "/screenshotCap.js?id=$1" },
        { "src": "/(?<id>[^/]*)", "dest": "/screenshot.js?id=$1" }
    ]

puppeteerでスクリーンショット

このあたりは前回の記事で説明しているので不要かなと思う。
cluster使わない書き方に戻してます。

const browser = await puppeteer.launch({
    args: chrome.args,
    executablePath: await chrome.executablePath,
    headless: chrome.headless,
  });
  const page = await browser.newPage();
  await page.goto("https://pawapro-gen.netlify.app/view/" + id);
  await page.setCacheEnabled(false);
  await page.waitForSelector("#main");
  const fullPage = await page.$("#main");
  const fullPageSize = await fullPage.boundingBox();
  const VIEWPORT = { width: 600, height: 450, deviceScaleFactor: 1 };
  await page.setViewport(
    Object.assign({}, VIEWPORT, { height: fullPageSize.height })
  );
  await page.waitFor(5000);

  const elements = await page.$$("#main");
  let img;
  for (const [index, element] of elements.entries()) {
    img = await element.screenshot();
  }
  await page.close();
  await console.log("screenshot done.");
  return img;