操り人形と脚本家とのアズール機能におけるヘッド無しクロムの走行

Azure関数への最近のアップデートでは、現在Linuxの消費プランでヘッドレスクロームを実行することが可能です.これにより、以下のような人気のフレームワークを使用して、いくつかのサーバーレスブラウザの自動化シナリオを有効にしますPuppeteer and Playwright .

ブラウザの自動化を操り人形と脚本家

ブラウザの自動化は長い間、されています.セレンWebdriverは、このスペースのパイオニアだった.最近では、人形劇や劇作家の人気が高まっている.つのフレームワークは非常に似ています.GoogleはPantpeteerを維持します、そして、マイクロソフトは脚本家を維持します.これは面白いことには、一部の人々がPuppeteerに取り組んでいる今脚本に取り組んでいることに注意してください.
操り人形と脚本家は、それぞれ異なるブラウザーのセットを支持します.どちらも、クロムを自動化することができます.彼らは自動的にクロムをインストールし、余分な構成なしでそれを使用することができます.

ヘッドレスクロムのためのAzure関数のサポート

Azure関数(特に消費(Serverless)計画)でヘッドレスクロムを走らせることは、挑戦でした.今まで、それを実行する唯一の方法は、プレミアムプランにカスタムDockerイメージを使用しています.
最近では、ヘッドレスクロームを走らせるために必要な依存性がAzure関数のLinux消費環境に追加されました.これは、単にNPMは、ノードにPuppeteerまたは脚本家をインストールすることができますことを意味します.JS関数のアプリは、クロムと対話するためにそれらのフレームワークのいずれかを使用して起動します.

Azure関数における操り人形と脚本家の使用

Azure関数のいずれかの操り人形や脚本家を実行するのはかなり簡単です.NPMを使ってインストールします.実行時に必要なので、パッケージをプロダクション依存としてインストールする必要があります.下記の例では、Webページを開いてスクリーンショットを返すHTTPトリガ機能でヘッドレスクロムを使用してPitpeteer/Playwrightを使用します.

操り人形

# also installs and uses Chromium by default
npm install puppeteer

const puppeteer = require("puppeteer");

module.exports = async function (context, req) {
    const url = req.query.url || "https://google.com/";
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    const screenshotBuffer = 
        await page.screenshot({ fullPage: true });
    await browser.close();

    context.res = {
        body: screenshotBuffer,
        headers: {
            "content-type": "image/png"
        }
    };
};

劇作家

Note: Playwright 1.4.0 requires some dependencies that are not installed in the Linux Consumption plan. Use 1.3.0 until this issue is resolved.

# the default playwright package installs Chromium, Firefox, and WebKit
# use playwright-chromium if we only need Chromium
npm install [email protected]

const { chromium } = require("playwright-chromium");

module.exports = async function (context, req) {
    const url = req.query.url || "https://google.com/";
    const browser =  await chromium.launch();
    const page = await browser.newPage();
    await page.goto(url);
    const screenshotBuffer = 
        await page.screenshot({ fullPage: true });
    await browser.close();

    context.res = {
        body: screenshotBuffer,
        headers: {
            "content-type": "image/png"
        }
    };
};

完全なソースのために、見てくださいthis repo . 我々がローカルに機能アプリを実行するとhttp://localhost:7071/api/screenshot?url=https://bing.com/ , 我々は、ページのスクリーンショットを取り戻します.

アジュールへの配備

Linux環境に展開しているので、NPMをLinuxでインストールすることを確認しなければなりません.ありがたいことに、Azure関数はリモートビルドをサポートしていて、アプリケーションがMacOSまたはWindowsでローカルに開発されているかもしれないとしても、アプリケーションが配備中に正しいLinux環境に組み込まれています.

リモートビルドのためのVSコードの設定

If we are deploying using Azure Functions Core Tools, we can skip this step.

既定では、Azure関数対コード拡張子はローカルビルドを使用してアプリケーションを展開します.これはNPMをローカルで実行し、アプリケーションパッケージを配備することを意味します.リモートビルドのために、我々はアプリの更新.vscode/設定.有効にするJSONscmDoBuildDuringDeployment .

{
    "azureFunctions.deploySubpath": ".",
    "azureFunctions.projectLanguage": "JavaScript",
    "azureFunctions.projectRuntime": "~3",
    "debug.internalConsoleOptions": "neverOpen",
    "azureFunctions.scmDoBuildDuringDeployment": true
}

また、削除することができますpostDeployTask and preDeployTask 展開の前後にNPMコマンドを実行する設定ビルドをリモートで実行しているので、必要はありません.
NPMのインストールをリモートで実行しているのでnode_modules へ.関数これは、展開パッケージからNodeRuleモジュールフォルダを除外して、アップロードをできるだけ小さくします.

Linux消費関数アプリの作成

AzureポータルやVSコードなどのツールを使用してノードを作成できます.私たちは、アプリケーションを展開します.

クロムダウンロード場所の設定

デフォルトでは、PlayWrightはクロム関数のアプリケーションのフォルダの外の場所にダウンロードします.ためには、ビルドのアーティファクトにクロムを含めるには、我々はアプリのNodeRankモジュールのフォルダにクロムをインストールするPlayWrightを指示する必要があります.これを行うには、アプリケーションの設定を作成PLAYWRIGHT_BROWSERS_PATH 値の0 Azureの機能アプリで.この設定は、実行時にNodeRankモジュールでクロムを見つけるために脚本家によって使用されます.

アプリの公開

を使用する場合は、Azure関数を使用できます.コマンドは、アプリケーションを公開します.以前に設定した設定を認識し、リモートビルドを使用します.
Azure関数のコアツールを使用する場合、--build remote フラグ:

func azure functionapp publish $appName --build remote

そして、それ!我々は、クロムと対話するように操り人形や劇作家を使用して消費Azure機能アプリを展開しました!

資源

Puppeteer

Playwright

Sample code