heroku 及びec2でnodejsのpuppeteerでheadless chromeを動かす時の注意点

ローカルでは動くのに何故かHerokuでは期待した要素のデータを取得してくれないため1日程度手間がかかった。同じように困っている人のためのtips。herokuで動かないのでawsでec2インスタンスを構築して、同様の問題が起こるのを確認してから修正したため、ec2インスタンスでも同様の問題が発生する。

ビルドパックをちゃんと入れているか？

https://github.com/jontewks/puppeteer-heroku-buildpack/issues/128
https://github.com/jontewks/puppeteer-heroku-buildpack

ビルドパックの読み込み順は正しいか？

https://stackoverflow.com/questions/52225461/puppeteer-unable-to-run-on-heroku

Heroku用の環境変数の判定を入れているか？

https://zenn.dev/mkt_engr/articles/heroku-nest-puppeteer

オプションを設定してるか？

https://github.com/CoffeeAndCode/puppeteer-heroku-buildpack
https://stackoverflow.com/questions/23407425/how-do-i-uninstall-this-buildpack-in-heroku

ドキュメント読み込みをしているか？

https://blog.local-c.com/archives/3275

postbuild（これは不要だった。

https://nairihar.medium.com/how-to-use-puppeteer-in-heroku-9de2ab31bc11

環境変数が設定されているか？

環境変数PUPPETEER_SKIP_CHROMIUM_DOWNLOADが設定されていて、trueに設定されていることを確認してください。これはHerokuでPuppeteerを使用する際に重要な設定です。

Copy code
heroku config:set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

これらの確認と修正を行った後、アプリケーションを再デプロイしてエラーが解消されるかどうかを確認してください。また、デバッグ情報を得るために、Puppeteerの起動オプションでdumpio: trueを設定することも検討してみてください。これにより、ブラウザプロセスからのすべての入出力がstdoutとstderrにダンプされます。

waitforsecondで要素を待つ

https://qiita.com/hnw/items/a07e6b88d95d1656e02f

UserAgentを設定する（これが一番重要だった）

await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134');

ViewPortで画面サイズを設定する

  await page.setViewport({
    width: 1440,
    height: 680,
    deviceScaleFactor: 1,
  });