如何在 Azure 云服务或 Azure Functions 中运行 Headless Chrome? [英] How to run Headless Chrome in Azure Cloud Service or Azure Functions?

问题描述

我正在尝试使用 Headless Chrome 从复杂的 HTML 文件(包含图像、SVG 等)生成 PDF 文件.我可以在云服务(Windows)上使用 wkhtmltopdf.exe 来生成简单的 PDF 文件，但我真的需要 Chrome 来生成尽可能接近 HTML + SVG + 图像的 PDF.

I am trying to use Headless Chrome to generate a PDF file from a complex HTML file (contains images, SVGs, etc.). I am able to use wkhtmltopdf.exe on Cloud Service (Windows) to generate simple PDF file, but I really need Chrome to produce PDFs as close as possible to the HTML + SVG + Image.

我希望能够在 Azure 云服务或 Azure Functions 中运行 Headless Chrome，但我无法让它工作.我想这是由于对 GDI 的限制.我能够在我自己的机器上的 Azure 模拟器中运行我的代码和 Headless Chrome，但是一旦部署它就没有任何效果.

I was hoping to be able to run Headless Chrome in Azure Cloud Service or Azure Functions, but I cannot get it to work. I suppose this is due to restrictions on GDI. I was able to run my code and Headless Chrome in the Azure Emulator on my own machine, but once it is deployed nothing works.

以下是我目前在 Azure Functions(适用于 Windows)中运行的代码.我正在使用 Puppeteer 截取 example.com 的屏幕截图.如果我能做到这一点，我想生成 PDF 会变得容易.

Below is the code I am currently running in Azure Functions (for Windows). I am using Puppeteer to take a screenshot of example.com. If I can get this to work, I suppose that generating PDF will become easy.

const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');
const os = require('os');

module.exports = function (context, req) {
    function failureCallback(error) {
        context.log("--> Failure = '" + error + "'");
    }

    const chromeDir = path.normalize(__dirname + "/../node_modules/puppeteer/.local-chromium/win64-508693/chrome-win32/chrome.exe");
    context.log("--> Chrome Path = " + chromeDir);

    const dir = path.join(os.tmpdir(), '/screenshots');

    if (!fs.existsSync(dir)){
        fs.mkdirSync(dir);
    }

    const screenshotPath = path.join(dir, "example.png");
    context.log("--> Path = " + screenshotPath);

    let browser, page;
    puppeteer.launch({ executablePath: chromeDir, headless: true, args: [ '--no-sandbox', '--single-process', '--disable-gpu' ] })
        .then(b => {
            context.log("----> 1");
            browser = b;
            return browser.newPage();
        }, failureCallback)
        .then(p => {
            context.log("----> 2");
            page = p;
            return p.goto('https://www.example.com');
        }, failureCallback)
        .then(response => {
            context.log("----> 3");
            return page.screenshot({path: screenshotPath, fullPage: true});  
        }, failureCallback)
        .then(r => {
            browser.close();

            context.res = {
                body: "Done!"
            };

            context.done();            
        }, failureCallback);
};

以下是尝试执行脚本时的日志.

Below is the log when trying to execute the script.

2017-12-18T04:32:05  Welcome, you are now connected to log-streaming service.
2017-12-18T04:33:05  No new trace in the past 1 min(s).
2017-12-18T04:33:11.400 Function started (Id=89b31468-8a5d-43cd-832f-b641216dffc0)
2017-12-18T04:33:20.578 JavaScript HTTP trigger function processed a request.
2017-12-18T04:33:20.578 --> Chrome Path D:homesitewwwroot
ode_modulespuppeteer.local-chromiumwin64-508693chrome-win32chrome.exe
2017-12-18T04:33:20.578 --> Path = D:localTempscreenshotsexample.png
2017-12-18T04:33:20.965 --> Failure = 'Error: spawn UNKNOWN'
2017-12-18T04:33:20.965 ----> 2

错误Failure = 'Error: spawn UNKNOWN'"不清楚.我使用 Kudu 和 PowerShell 确保我使用的路径是正确的.

The error "Failure = 'Error: spawn UNKNOWN'" is not clear. I made sure that the path I am using is correct using Kudu and PowerShell.

我正在寻找一种在 Azure 云服务和/或 Azure Functions 上运行 Chrome 的方法(对于 Windows - 以便使用我现有的应用服务计划).有人也尝试过在 Azure 中运行 Headless Chrome 吗?我愿意接受任何可以帮助我让这个脚本工作的想法?

I am looking for a way to run Chrome on Azure Cloud Service and/or Azure Functions (for Windows - in order to use my existing App Service plan). Anybody has also attempted to run Headless Chrome in Azure? I am open to any ideas which would help me to get this script to work?

推荐答案

我会推荐使用 https://www.browserless.io/ 这样您就不必在应用服务中运行 chrome.exe.

I would recommend to use https://www.browserless.io/ so you don't have to run the chrome.exe in the app service.

将 puppeteer.launch 替换为 puppeteer.connect

Replace puppeteer.launch with puppeteer.connect

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

这篇关于如何在 Azure 云服务或 Azure Functions 中运行 Headless Chrome?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！