web-dev-qa-db-ja.com

Azure CloudServiceまたはAzureFunctionsでヘッドレスChromeを実行する方法は？

ヘッドレスChromeを使用して複雑なHTMLファイル（画像、SVGなどを含む）からPDFファイルを生成しようとしています）を使用できます単純なPDFファイルを生成するためのクラウドサービス（Windows）上のwkhtmltopdf.exe、しかし私は本当にChrome HTML + SVGにできるだけ近いPDFを生成する必要があります+画像。

ヘッドレスChromeをAzureCloudServiceまたはAzureFunctionsで実行できることを望んでいましたが、動作させることができません。これはGDIの制限によるものと思われます。実行できました。私のコードとヘッドレスChromeは、自分のマシンのAzure Emulatorにありますが、展開すると何も機能しません。

以下は、Azure Functions（Windows用）で現在実行しているコードです。私はPuppeteerを使用してexample.comのスクリーンショットを撮ります。これを機能させることができれば、PDFの生成が簡単になると思います。

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);
};

以下は、スクリプトを実行しようとしたときのログです。

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:\home\site\wwwroot\node_modules\puppeteer\.local-chromium\win64-508693\chrome-win32\chrome.exe
2017-12-18T04:33:20.578 --> Path = D:\local\Temp\screenshots\example.png
2017-12-18T04:33:20.965 --> Failure = 'Error: spawn UNKNOWN'
2017-12-18T04:33:20.965 ----> 2

エラー「Failure = 'Error：spawnUNKNOWN'」は明確ではありません。 KuduとPowerShellを使用して、使用しているパスが正しいことを確認しました。

Azure CloudServiceやAzureFunctions（Windowsの場合-既存のApp Serviceプランを使用するため）でChromeを実行する方法を探しています）。Headless=を実行しようとした人もいます。 Chrome Azureの場合？このスクリプトを機能させるのに役立つアイデアはありますか？

google-chromeazureazure-functionsazure-cloud-servicesgoogle-chrome-headless
7
Martin

アプリサービスでchrome.exeを実行する必要がないように、 https://www.browserless.io/ を使用することをお勧めします。

Puppeteer.launchをpuppeteer.connectに置き換えます

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

ヘッドレスChromeの使用法についてはよくわかりませんが、Azure Functionsが実行される sandbox には、いくつかのGDI制限のため、HTMLからPDFを生成する際に問題があります。

Linux上のAzure Functions でタスクを試すことを検討してください。これはまだプレビュー中ですが、サンドボックスを利用していないため、ヘッドレスchromeで作業できる場合は、PDF =世代。

2
Connor McMahon

AzureはNodeJSを許可します：

phantomを使用してNodeJSでそれを行うことができます（ブラウザにアクセスできないため、chromeの代わりに-Azure Webアプリで実行することもできません））例を参照してください-ホストされていますgoogle firebaseにありますが、NodeJSプロジェクトに簡単に適用できます。

https://stackoverflow.com/a/51828577/6306638

Azure上のIISサーバーVMは、Chromeが必要な場合の唯一の代替手段です。

これについてサポートが必要な場合はお知らせください。

0
Sagar Patel