我无法在 heroku 中使用 puppeteer 进行截图

Posted 2023-03-07

【中文标题】我无法在 heroku 中使用 puppeteer 进行截图

【英文标题】：I cannot screenshot with puppeteer in heroku

【发布时间】：2018-10-10 19:52:17

【问题描述】：

我正在尝试使用 heroku 服务器中的 puppeteer 将屏幕截图应用程序用于我的作品集。

server.js

(async() => 
        const browser = await puppeteer.launch(
            args: ['--no-sandbox', '--disable-setuid-sandbox']
        );

        const page = await browser.newPage();

        await page.goto(urlToScreenshot,timeout:60000);

        await page.waitFor(3000);


        await page.screenshot().then(function(buffer) 
            res.setHeader('Content-Disposition', 'attachment;filename="' + urlToScreenshot + '.png"');
            res.setHeader('Content-Type', 'image/png');
            res.send(buffer);
        );

        await browser.close();
    )();

testscreenshot.html

<div>

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://google.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://yahoo.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://facebook.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://twitter.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://reddit.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://youtube.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://vimeo.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://***.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https:/github.com/">

   <img class="port container-fluid lazy" style="height:226px;" src="https://url2screenshot-imm.herokuapp.com/?url=https://bbc.co.uk/">

</div>

但是当我打开 testscreenshot.html 时，会出现服务器日志

at=error code=H12 desc="Request timeout" method=GET path="/?url=https://facebook.com/" host=url2screenshot-imm.herokuapp.com request_id=e37b3748-d543-4435-ae69-7460263e750a fwd="186.247.177.201" dyno=web.1 connect=25ms service=30000ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.216789+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://google.com/" host=url2screenshot-imm.herokuapp.com request_id=a2d17f7a-4988-4414-864b-f916d26f05e6 fwd="186.247.177.201" dyno=web.1 connect=1ms service=30000ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.283300+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://reddit.com/" host=url2screenshot-imm.herokuapp.com request_id=73b70dad-851f-4e8b-a06b-4c647b7aa02f fwd="186.247.177.201" dyno=web.1 connect=0ms service=30000ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.283055+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://twitter.com/" host=url2screenshot-imm.herokuapp.com request_id=786dc9a0-4048-4fce-b9a5-96c2caf63c8d fwd="186.247.177.201" dyno=web.1 connect=3ms service=30001ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.254133+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://yahoo.com/" host=url2screenshot-imm.herokuapp.com request_id=f5dc9005-f655-4ef9-9172-893d105480e4 fwd="186.247.177.201" dyno=web.1 connect=15ms service=30000ms status=503 bytes=0 protocol=https

2018-04-30T15:15:30.358536+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/?url=https://youtube.com/" host=url2screenshot-imm.herokuapp.com request_id=926f7516-f270-4de1-9aa4-f2a9d63b36bc fwd="186.247.177.201" dyno=web.1 connect=0ms service=30000ms status=503 bytes=0 protocol=https

只有在我一一提出请求时才有效

【问题讨论】：

我想知道您是否应该将浏览器设置在函数之外的顶层...

【参考方案1】：

我在这里找到了答案https://github.com/heroku/heroku-buildpack-google-chrome/issues/37。 Heroku 没有任何交换空间，因此导致崩溃。添加 --disable-dev-shm-usage 和 --single-process 标志修复它。

const browser = await puppeteer.launch(
      headless: true,
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--single-process'
      ],
    );