我无法在Heroku上使用Puppeteer截屏

Question

我正在尝试在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://stackoverflow.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

只有在逐个发送请求时才起作用。

- Israel Martins

---

我在想是否应该将浏览器放在顶层，函数之外... - Andy Hayden

Answer 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'
      ],
    });

- Israel Martins