인형 배우와 극작가와 함께 Azure 기능에서 무두크롬을 운행하다

Azure 기능의 최신 업데이트에 따라 현재 Linux 소비 계획에서 headless Chrome을 실행할 수 있습니다.이로 인해 일부 서버 없는 브라우저 자동화 장면은 유행하는 프레임워크를 사용할 수 있다. 예를 들어 Puppeteer와Playwright.

브라우저 자동화와 인형 배우와 극작가

브라우저 자동화는 이미 오랫동안 존재해 왔다.Selenium WebDriver는 이 분야의 선구자입니다.최근 인형 배우와 극작가가 갈수록 인기를 끌고 있다.이 두 프레임은 매우 비슷하다.구글은 인형사, 마이크로소프트는 극작가를 보류한다.주의해야 할 것은 인형을 연구하는 사람들이 현재 극작가를 연구하고 있다는 것이다.
인형 배우와 극작가 모두 서로 다른 브라우저를 지원한다.그것들은 모두 크롬의 자동화를 실현할 수 있다.Chromium을 자동으로 설치하여 추가 구성 없이 사용할 수 있습니다.

Azure 기능은 헤드 크롬 없음

Azure 기능에서 headless Chrome을 실행하는 것은 도전이다. 특히 소비 (서버 없음) 계획에서 그렇다.지금까지 이를 실행하는 유일한 방법은 고급 계획에서 사용자 정의 Docker 이미지를 사용하는 것입니다.
최근 헤드리스 크롬을 실행하는 데 필요한 의존 항목이 Azure Functions Linux 소비 환경에 추가되었습니다.이것은 우리가 간단하게 npm를 하나의 노드에 설치할 수 있다는 것을 의미한다.js 함수 프로그램은 이 프레임워크 중 하나를 사용하여 Chromium과 상호작용을 시작합니다.

Azure 함수에서 인형사와 극작가 사용하기

Azure 함수에서 인형사나 극작가를 운행하는 것은 매우 간단하다.우리는 npm를 사용하여 그것을 설치합니다.운행할 때 그것을 필요로 하기 때문에, 우리는 이 가방을 생산 의존항으로 설치해야 한다.다음 예시에서 우리는 HTTP가 터치하는 함수에서 헤드크롬이 없는 인형 배우/극작가를 사용하여 웹 페이지를 열고 화면 캡처를 되돌려줍니다.

인형 배우

# 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/ 에 접근하면 페이지의 화면 캡처를 받을 수 있습니다.

Azure에 배포

Linux 환경에 배치하기 때문에, 배포 목표와 일치하는 Chromium 버전을 다운로드하기 위해 Linux에서 npm 설치를 실행해야 합니다.다행히도 Azure 기능은 macOS나 Windows에서 로컬 개발을 할 수 있더라도 배포 기간에 정확한 Linux 환경에서 응용 프로그램을 구축할 수 있도록 원격 구축을 지원합니다.

원격 구성 VS 코드 생성

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

기본적으로 Azure Functions VS Code extension은 로컬로 배포 프로그램을 구축합니다. 이것은 로컬에서 npm install을 실행하고 패키지를 배치한다는 것을 의미합니다.원격 구축에 대해 우리는 응용 프로그램을 업데이트합니다.vscode/설정.jsonscmDoBuildDuringDeployment을 사용합니다.

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

우리는 또한 배치 전후 npm 명령을 실행하는 postDeployTask 및 preDeployTask 설정을 삭제할 수 있다.원격으로 구축을 실행하고 있기 때문에 그것들은 필요 없습니다.
npm 설치를 원격으로 실행하고 있기 때문에, node_modules 에 추가할 수 있습니다.funcignore.배포 패키지에서 node_modules 폴더를 제거하여 업로드를 최소화합니다.

Linux 소비 함수 응용 프로그램 만들기

Azure 포털 또는 VS 코드와 같은 도구를 사용하여 노드를 생성할 수 있습니다.우리는 Azure에 응용 프로그램의 js12 Linux 소비 기능 응용 프로그램을 배치할 것이다.

Chromium 다운로드 위치 구성(극작가만 해당)

기본적으로 극작가는 크롬을 function 프로그램 폴더 이외의 위치로 다운로드합니다.구성 요소에 Chromium을 포함하기 위해서는 프로그램의 node\u modules 폴더에 Chromium을 설치하도록 극작가에게 지시해야 합니다.이를 위해 Azure의 함수 응용 프로그램에서 PLAYWRIGHT_BROWSERS_PATH 라는 응용 프로그램 설정을 만듭니다. 그 값은 0 입니다.극작가가 실행할 때도 이 설정을 사용하여 node_ 모듈의 Chromium을 찾습니다.

응용 프로그램 게시

VS 코드를 사용하면 Azure 기능: 기능 응용 프로그램에 배치할 수 있습니다...응용 프로그램의 명령을 발표합니다.이것은 우리가 이전에 설정한 설정을 식별하고 원격 구축을 사용할 것이다.
Azure Functions 핵심 도구를 사용하는 경우 --build remote 플래그를 사용하여 명령을 실행해야 합니다.

func azure functionapp publish $appName --build remote

이렇게!우리는 이미 소비 Azure 기능 응용 프로그램을 배치하여 인형이나 극작가와 Chromium을 사용하여 상호작용을 한다!

리소스

Puppeteer

Playwright

Sample code