정보실

웹학교

정보실

javascript Netlify (AWS Lambda) 함수에서 Puppeteer를 사용하는 방법

본문

How to use Puppeteer in a Netlify (AWS Lambda) function 


필자는 최근 JAMstack_conf 샌프란시스코에서 Puppeteer를 통해 헤드리스 크롬과 Cloudinary를 사용하여 대화식 캐니 우스 임베드의 스크린 샷을 캡처 하는 방법에 대해 이야기했습니다. 자바 스크립트를 실행할 수 없는 경우와 같이 삽입을 로드할 수 없는 경우에 사용할 대체 이미지를 사용하기 위해 이 작업을 수행했습니다.


YouTube에서 볼 수 있는 제 이야기는 Puppeteer로 스크린 샷을 캡처하고 스크린 샷을 Cloudinary에 업로드하기 위해 작성한 코드에 중점을 두었습니다. 10 분짜리 대화였기 때문에 서버 측 코드가 호스팅 되는 곳인 Netlify에 갈 시간이 없었습니다.


Netlify 함수에서 Puppeteer를 사용하려면 몇 가지 추가 고려가 필요하므로 이 기사에서는 모든 작업을 수행하는 방법에 대한 예제를 보여 드리고자 합니다.


Puppeteer 101 


이것의 Netlify 부분으로 들어가기 전에 Puppeteer로 우리가 이루고자 하는 것을 간단히 살펴 보자. Puppeteer를 사용하여 지정된 URL의 스크린 샷을 만들려면 다음 네 단계를 거쳐야 합니다.

  1. 새로운 브라우저를 시작하십시오
  2. 새 페이지를 여십시오
  3. 주어진 URL로 이동
  4. 스크린 샷 캡처

그 모습은 다음과 같습니다.


const puppeteer = require('puppeteer');

(async () => {

    // 1. Launch a new browser
    const browser = await puppeteer.launch();

    // 2. Open a new page
    const page = await browser.newPage();

    // 3. Navigate to the given URL
    await page.goto('https://bitsofco.de');

	  // 4. Take screenshot
    const screenshot = await page.screenshot({encoding: 'binary'});

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


거기에서 스크린 샷 변수로 원하는 것을 할 수 있습니다. 이 과정에서 Cloudinary로 전환 한 방법에 관심이 있다면 Puppeteer에서 Cloudinary로 스크린 샷을 업로드하는 방법에 대한 다른 기사를 읽어보십시오.


Netlify functions 101 


이제 Netlify 기능에 대해 이는 프론트 엔드 웹 사이트에서 호출 할 수 있는 노드 함수입니다. 실제로 완전히 새로워진 API를 실제로 만들고 유지 관리 할 필요 없이 백엔드 서버의 성능을 제공합니다. 우리가 해야 할 일은 함수 파일 (예 : take-screenshot.js)을 만드는 것 뿐이며 프론트 엔드에서 URL /.netlify/functions/take-screenshot을 요청하여 해당 함수를 호출 할 수 있습니다.


그 모습은 다음과 같습니다. 먼저 take-screenshot.js 함수 파일을 만듭니다. 이것은 일반적으로 Netlify 프로젝트의 함수 디렉토리에 있습니다. 

functions / 테이크 스크린 샷 / 테이크 스크린 샷 .js

exports.handler = async (event, context) => {
    /* do stuff here */
}

파일은 하나의 함수를 내 보내며, 함수에 대한 요청이 있을 때 호출됩니다. 이벤트 변수에 전달 된 모든 인수에 액세스 할 수 있습니다. 예를 들어, cloudinary로 스크린 샷을 캡처 할 페이지의 URL을 정의하는 pageToScreenshot 문자열을 예상하는 경우 event.body에서 해당 페이지에 액세스 할 수 있습니다.

functions/take-screenshot/take-screenshot.js

exports.handler = async (event, context) => {
    const params = JSON.parse(event.body);
    const pageToScreenshot = params.pageToScreenshot;
}

프론트 엔드에서 이 함수를 호출하려면 특수 Netlify 함수 경로 인 /.netlify/functions/take-screenshot을 요청하면 됩니다. 함수 파일의 이름은 URL에서 사용됩니다.

public/script.js

const options = {
    method: "POST",
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    },
    body: JSON.stringify({
        pageToScreenshot: "https://bitsofco.de"
    })
};

fetch("/.netlify/functions/take-screenshot", options);


Putting it all together 


다음으로 우리는 그것을 모두 합쳐야 합니다. Puppeteer 논리를 Netlify 함수 파일로 이동하는 것만 큼 간단해야 하지만 몇 가지 주의 해야 할 사항이 있습니다.


Gotcha 1: Puppeteer vs Puppeteer Core 


Netlify 기능의 최대 파일 크기는 50MB입니다. 이는 실제 Puppeteer 노드 라이브러리가 너무 커서 실제로 사용할 수 없음을 의미합니다. 대신 헤드리스 브라우저가 설치되어 있지 않은 꼭두각시 코어를 사용해야 합니다. 그런 다음 대신 사용할 크롬의 라이트 버전을 추가해야 합니다.

필요한 두 가지 패키지는 꼭두각시 코어와 chrome-aws-lambda입니다.

functions/take-screenshot/take-screenshot.js 

const puppeteer = require('puppeteer-core');
const chromium = require('chrome-aws-lambda');

또한 브라우저 구성 방법을 약간 변경해야 합니다. 브라우저를 시작할 때 executablePath 옵션을 전달해야 하므로 Puppeteer는 사용할 브라우저를 알고 있습니다.

functions/take-screenshot/take-screenshot.js

const puppeteer = require('puppeteer-core');
const chromium = require('chrome-aws-lambda');

exports.handler = async (event, context) => {

    /* ... */

    const browser = await puppeteer.launch({
        // Required
        executablePath: await chromium.executablePath,

        // Optional
        args: chromium.args,
        defaultViewport: chromium.defaultViewport,
        headless: chromium.headless
    });
}


크롬 패키지가 위에 표시된 것처럼 정의하는 다른 선택적 확인 옵션을 전달할 수도 있습니다.


Gotcha 2: Local development 


알아야 할 또 다른 사항은 아마도 로컬에서 작동하지 않을 것입니다. 이는 로컬에서 작업 할 때 chromium.headless 부울이 false를 반환 할 가능성이 높기 때문에 chromium. executablePath가 null을 반환하기 때문입니다.

이 문제를 해결하는 가장 좋은 방법은 chrome-aws-lambda Wiki 페이지에 설명되어 있습니다. 다음과 같은 변경 사항을 제안합니다.

  • 전체 puppeteer 패키지를 개발 종속성으로 설치
  • 퍼펫 티커 코어 및 chrome-aws-lambda를 프로덕션 종속성으로 설치
  • 크롬 패키지를 통해 Puppeteer에 액세스하면 사용할 Puppeteer 패키지가 결정됩니다.

그 모습은 다음과 같습니다. 먼저 패키지를 설치합니다.

npm install puppeteer --save-dev
npm install puppeteer-core chrome-aws-lambda --save-prod


다음으로 크롬 패키지를 통해 Puppeteer에 액세스하면 사용할 Puppeteer 패키지를 결정합니다.

functions/take-screenshot/take-screenshot.js

const chromium = require('chrome-aws-lambda');

exports.handler = async (event, context) => {

    /* ... */

    const browser = await chromium.puppeteer.launch({ /* ... */ });
}


따라서 두 개의 다른 Puppeteer 패키지를 기능 프로젝트의 package.json에 설치하고 저장하더라도 두 패키지에 직접 액세스하지는 않습니다.


Putting it all together (again) 


마지막으로 완료되었습니다! 최종 take-screenshot.js 함수 파일은 다음과 같습니다.

functions/take-screenshot/take-screenshot.js

const chromium = require('chrome-aws-lambda');

exports.handler = async (event, context) => {

    const pageToScreenshot = JSON.parse(event.body).pageToScreenshot;

    const browser = await chromium.puppeteer.launch({
        executablePath: await chromium.executablePath,
        args: chromium.args,
        defaultViewport: chromium.defaultViewport,
        headless: chromium.headless,
    });

    const page = await browser.newPage();

    await page.goto(pageToScreenshot);

    const screenshot = await page.screenshot({ encoding: 'binary' });

    await browser.close();

    return {
        statusCode: 200,
        body: JSON.stringify({
            message: `Complete screenshot of ${pageToScreenshot}`,
            buffer: screenshot
        })
    }

}


모든 것이 어떻게 작동하는지 설명하기 위해 간단한 웹 사이트를 만들어 이 모든 것을 시연했습니다.

How to use Puppeteer in a Netlify (AWS Lambda) function 


netlify-puppeteer-screenshot-demo.netlify.com 사이트를 방문하여 GitHub에서 소스 코드를 볼 수 있습니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 18회 ]  작성일19-10-29 14:15

웹학교