헤드 없는 Chrome 노드를 설정하는 방법Docker의 js 서버

작성자 Tigran Bayburtsyan✏️
응용 프로그램 개발 과정에서 자동화 UI 테스트가 시작되면서 헤더 없는 브라우저가 유행하고 있다.수많은 사이트 파충류와 HTML 기반 콘텐츠 분석 용례도 있다.
99퍼센트의 경우, 완전히 자동화되어 있기 때문에 브라우저 GUI가 실제로 필요하지 않습니다.GUI를 실행하는 것은 Linux 기반 서버를 시작하거나 같은 마이크로서비스 집단을 뛰어넘어 간단한 Docker 용기를 확장하는 것보다 더 비싸다.
근데 주제에서 벗어났어요.즉, 유연성과 확장성을 극대화하기 위해 Docker 컨테이너를 기반으로 하는 헤더 없는 브라우저가 점점 중요해지고 있습니다.이 강좌에서는 노드에 헤더 없는 Chrome 브라우저를 설정하기 위해 Dockerfile을 만드는 방법을 보여 줍니다.js.

크롬 도금이 없고 노드가 있습니다.회사 명

노드js는 Google Chrome 개발팀이 사용하는 주요 언어 인터페이스로 거의 원본 통합 라이브러리로 Chrome과 통신하는 데 사용되며 Puppeter라고 부른다.js.이 라이브러리는 DevTools 인터페이스에서 WebSocket이나 시스템 파이프라인 기반 프로토콜을 사용합니다. 이 인터페이스는 캡처, 페이지 부하 지표 측정, 연결 속도와 다운로드 내용 크기 등 다양한 작업을 수행할 수 있습니다.다른 장치 시뮬레이션에서 사용자 인터페이스를 테스트하고 캡처할 수 있습니다.가장 중요한 것은 인형사가 GUI를 실행할 필요가 없다는 것이다.이 모든 것은 무두 모드에서 완성할 수 있다.

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

Screenshot('https://google.com');

async function Screenshot(url) {
   const browser = await puppeteer.launch({
       headless: true,
       args: [
       "--no-sandbox",
       "--disable-gpu",
       ]
   });

    const page = await browser.newPage();
    await page.goto(url, {
      timeout: 0,
      waitUntil: 'networkidle0',
    });
    const screenData = await page.screenshot({encoding: 'binary', type: 'jpeg', quality: 30});
    fs.writeFileSync('screenshot.jpg', screenData);

    await page.close();
    await browser.close();
}

위에 표시된 것은 머리 없는 크롬에서 캡처할 수 있는 간단한 조작 코드입니다.Puppeter의 NPM 모듈에 헤드 없는 Chrome 버전이 내장되어 있기 때문에 Google Chrome의 실행 가능한 경로를 지정하지 않았습니다.Chrome의 개발팀은 라이브러리의 사용이 매우 간단하고 필요한 설정을 최소화하는 데 매우 잘했다.이것 또한 Docker 컨테이너에 이 코드를 삽입하는 작업을 더욱 쉽게 합니다.

Docker 컨테이너의 Google Chrome

상기 코드를 바탕으로 용기에서 브라우저를 실행하는 것은 간단할 것 같지만 안전성을 소홀히 하지 않는 것이 중요하다.기본적으로 컨테이너의 모든 컨텐트는 루트 사용자 아래에서 실행되며 브라우저는 로컬에서 JavaScript 파일을 실행합니다.
물론 구글 브라우저는 안전하다. 사용자가 브라우저 기반 스크립트를 통해 로컬 파일에 접근하는 것을 허용하지 않지만 잠재적인 안전 위험이 존재한다.브라우저 자체의 특정 목적을 수행하기 위해 새 사용자를 만들면 이러한 위험을 최소화할 수 있습니다.구글은 외부 스크립트의 로컬 환경 접근을 제한하기 위해 샌드박스 모드를 기본적으로 사용했다.
다음은 구글 브라우저 설정을 담당하는 Dockerfile 예입니다.우리는 Docker 이미지로 사용할 공간이 가장 적기 때문에 Alpine Linux를 기본 용기로 선택할 것입니다.

FROM alpine:3.6

RUN apk update && apk add --no-cache nmap && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/community >> /etc/apk/repositories && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/main >> /etc/apk/repositories && \
    apk update && \
    apk add --no-cache \
      chromium \
      harfbuzz \
      "freetype>2.8" \
      ttf-freefont \
      nss

ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

....
....

run 명령 처리는 Chrome for Linux의 테두리 저장소를 가져오고 Chrome for Alpine을 실행하는 데 필요한 라이브러리입니다.까다로운 부분은 인형 프로그램에 삽입된 크롬을 다운로드하지 않도록 하는 것이다.이것은 용기 이미지에 있어서 쓸모없는 공간이다. 이것이 바로 우리가 환경 변수 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true 를 보존하는 이유이다.
Docker 구축을 실행하면 Chromium 실행 파일이 제공됩니다./usr/bin/chromium-browser.이것은 우리의 주요 인형 브라우저의 실행 가능한 경로일 것이다.
이제 JavaScript 코드로 이동하여 Dockerfile을 완료합니다.

노드를 결합합니다.js 서버 및 Chromium 컨테이너

우리가 계속하기 전에, 주어진 웹 사이트를 캡처하는 마이크로 서비스에 적합한 코드를 변경합시다.이를 위해 Express를 사용합니다.js는 기본 HTTP 서버를 회전합니다.

// server.js
const express = require('express');
const puppeteer = require('puppeteer');

const app = express();

// /?url=https://google.com
app.get('/', (req, res) => {
    const {url} = req.query;
    if (!url || url.length === 0) {
        return res.json({error: 'url query parameter is required'});
    }

    const imageData = await Screenshot(url);

    res.set('Content-Type', 'image/jpeg');
    res.set('Content-Length', imageData.length);
    res.send(imageData);
});

app.listen(process.env.PORT || 3000);

async function Screenshot(url) {
   const browser = await puppeteer.launch({
       headless: true,
       executablePath: '/usr/bin/chromium-browser',
       args: [
       "--no-sandbox",
       "--disable-gpu",
       ]
   });

    const page = await browser.newPage();
    await page.goto(url, {
      timeout: 0,
      waitUntil: 'networkidle0',
    });
    const screenData = await page.screenshot({encoding: 'binary', type: 'jpeg', quality: 30});

    await page.close();
    await browser.close();

    // Binary data of an image
    return screenData;
}

이것은 Dockerfile을 완료하는 마지막 단계입니다.docker build -t headless:node를 실행하면 노드가 있는 그림을 얻을 수 있습니다.js 서비스와 캡처용 헤드 없는 크롬 브라우저입니다.
캡처는 재미있지만 다른 용례는 무수히 많다.다행히도 상술한 과정은 거의 모든 사람에게 적용된다.대부분의 경우, 노드에 대해 비교적 작은 변경만 진행하였다.js 코드가 필요합니다.나머지는 상당히 표준적인 환경 설정이다.

크롬 도금이 없는 흔한 문제

Google Chrome은 실행 과정에서 대량의 메모리를 소모하기 때문에 헤더가 없는 Chrome도 서버에서 이렇게 하는 것은 이상할 것이 없다.브라우저의 열기 상태를 유지하고 같은 브라우저를 여러 번 다시 사용하면 서비스가 결국 붕괴됩니다.
가장 좋은 해결 방안은 연결, 브라우저 실례의 원칙을 따르는 것이다.이것은 모든 브라우저를 관리하는 여러 페이지보다 비싸지만, 한 페이지와 한 브라우저만 사용하면 시스템을 더욱 안정적으로 할 수 있다.물론 이 모든 것은 개인의 선호와 당신의 특정한 용례에 달려 있습니다.당신의 독특한 수요와 목표에 따라 중간 입장을 찾을 수 있습니다.
예를 들어 성능 모니터링 도구의 공식 사이트Hexometer.이 환경에는 수백 개의 빈 브라우저 풀이 있는 원격 브라우저 서비스가 포함되어 있습니다.그것들은 실행이 필요할 때 WebSocket을 통해 새로운 연결을 만들기 위한 것이지만, 웹 브라우저의 원칙을 엄격히 따른다.이것은 실행 중인 브라우저를 비울 뿐만 아니라 활력을 유지할 수 있는 안정적이고 효율적인 방법이 되었다.
WebSocket의 Puppeter 연결은 상당히 안정적입니다. 맞춤형 서비스browserless.io를 통해 유사한 기능을 실현할 수 있습니다.

...
...

const browser = await puppeteer.launch({
    browserWSEndpoint: `ws://repo.treescale.com:6799`,
});

...
...

이것은 같은 브라우저 관리 프로토콜을 사용하여 헤더 없는 Chrome DevTools 소켓에 연결됩니다.

결론

용기에서 브라우저를 실행하는 것은 매우 큰 유연성과 확장성을 제공한다.그것도 전통적인 가상 기기 기반의 실례보다 훨씬 싸다.이제 AWS Fargate나 Google Cloud Run과 같은 컨테이너 서비스를 간단하게 사용할 수 있습니다. 필요할 때만 컨테이너 실행을 촉발하고 몇 초 안에 수천 개의 실례로 확장할 수 있습니다.
가장 흔히 볼 수 있는 용례는 여전히 Jest와 Mocha를 사용하여 제작한다UI automated tests.하지만 실제로 Node로 전체 웹 페이지를 조작할 수 있다는 것을 감안하면js는 하나의 용기에서 용례는 상상력의 제한만 받습니다.

겨우 200‎✅: 모니터 실패 및 생산에 GraphQL 요청 표시

GraphQL은 디버깅 요청과 응답 기능을 갖추고 있지만, GraphQL이 생산 응용 프로그램에 자원을 안정적으로 제공하도록 확보하는 것은 더욱 어려워졌습니다.백엔드 또는 타사 서비스에 대한 네트워크 요청이 성공적으로 이루어졌는지 확인하려는 경우 try LogRocket.

LogRocket 인터넷 응용에 사용되는 디지털 녹화기와 같이 당신의 사이트에서 발생하는 모든 것을 기록합니다.문제의 원인을 추측하는 대신 문제가 있는 GraphQL 요청을 수집하고 보고하여 근본 원인을 신속하게 파악할 수 있습니다.또한 Apollo 클라이언트 상태를 추적하고 GraphQL 쿼리의 키 값 쌍을 확인할 수 있습니다.
LogRocket은 웹 페이지의 불러오는 시간, 첫 번째 바이트까지의 시간, 느린 네트워크 요청, 그리고 Redux, NgRx와 Vuex의 조작/상태를 기록하는 기기입니다.Start monitoring for free.
게시물How to set up a Headless Chrome Node.js server in Docker이 먼저 LogRocket Blog에 올라왔다.