为什么 puppeteer 在 azure webapp 上不起作用

Question

I have used Nodejs and try to takes the screenshot of given URL. It works perfect on local but After deploy to Azure have problems on create puppeteer.

Code

exports.getScreenShot = async function (req, res) {
    const requesturl = req.param('url');
    if (!requesturl) {
        return res.send(400, 'Missing url');
    }
    const parsedUrl = url.parse(requesturl);
    if (!parsedUrl.protocol) {
        return res.send(400, 'Invalid url, missing protocol');
    }
    if (!parsedUrl.hostname) {
        return res.send(400, 'Invalid url, missing hostname');
    }

    const options = {
        'width': req.param('width'),
        'height': req.param('height'),
        'delay': req.param('delay'),
        'userAgent': req.param('userAgent'),
        'full': (req.param('full') === 'true')
    };

    options.width = options.width || 1024;
    options.height = options.height || 768;
    options.delay = options.delay || 200;    
    const browser = await puppeteer.connect({
        browserWSEndpoint: 'wss://chrome.browserless.io/'
    });

    let page = await browser.newPage();
    await page.goto(requesturl);
    await page.waitFor(parseInt(options.delay));
    let imageName = parsedUrl.hostname.replace(/\W/g, '_');
    let pathName = parsedUrl.pathname.replace(/\W/g, '_').replace(/_$/, '');
    if (pathName) {
        imageName += pathName;
    }
    imageName = `${imageName}.png`;
    var tempPath = temp.path({ suffix: '.png' });
    await page.setViewport({ width: parseInt(options.width), height: parseInt(options.height) });
    await page.screenshot({
        path: tempPath,
        fullPage: options.full
    });
}

Answer 1

Refer to the SO Tag Info for puppeteer , as below.

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium .

Whatever Chrome or Chromium with headless or non-headless, they all require GDI support. However, on Azure App Services on Windows, it conflicts with Win32k.sys (User32/GDI32) Restrictions , as the figure below.

And other frameworks like PhantomJS/Selenium also be restricted by it, see below.

So you can not use puppeteer within Azure WebApp on Windows. The workaround solution is to use Azure VM or Azure WebApp on Linux. Essentially, this issue is duplicated with your other SO thread Chrome driver is not working on azure web apps .

Hope it helps.

Answer 2

How to run Headless Chrome in Azure Cloud Service or Azure Functions

Replace puppeteer.launch with puppeteer.connect

const browser = await puppeteer.connect({  browserWSEndpoint: 'wss://chrome.browserless.io/'

});