puppeteer aws lambda에 배포하기

puppeteer는 크롬이나 파이어폭스에서 동작을 조작하기 위한 자바스크립트 라이브러리이다.
오늘은 이 puppeteer를 통해 웹스크래핑을 하여 장소 정보를 실시간으로 가져오고자 한다.
그리고 aws 람다를 통해 배포하는 과정을 담은 튜토리얼을 차근히 따라가면서 작업한 사항을 기록하고자 한다.

구글 place api를 사용하느라 30만 원어치 이상의 비용이 발생해서,
차선택으로 웹스크래핑한 정보를 가져와서 써보는 방향을 선택해 봤다.
물론 api에 비해서 응답 속도 등이 느려질 부분이 염려되지만 금액적으로 최선인 거 같고,
평소에 들어보기만 했던 lambda와 docker를 경험해 볼 좋은 경험 같아서 공부 삼아해 보기로 했다.

 

준비물

- aws 계정 : lambda에 배포

   - aws sam CLI (설치 링크) : SAM(Serverless application model)로 서버리스 애플리케이션을 빌드

   - access key ID와 secret key ID

- docker (설치 링크) : 배포 & 로컬에서 코드 테스트하기 위해

기본 세팅

npm init 으로 패키지를 초기화하고 다음과 같이 패키지들을 설치해 준다.

다른 버전으로 설치했을 경우 코드가 돌아가지 않을 수 있으므로 아래의 버전 이상들로 설치해줘야 한다.

"@sparticuz/chromium": "^130.0.0",

"cheerio": "^1.0.0",

"puppeteer-cluster": "^0.24.0",

"puppeteer-core": "^23.6.1"

 

index.js 파일을 생성해 주자.

그리고 lambda에 이미 설치된 chromium을 사용할 수 있도록 파일 최상단에 아래와 같이 작성해 주자.

lambda에 배포했을 때, chromium이 다시 다운로드되는 것을 방지하기 위해서다.

PUPPETEER_SKIP_CHROMIUM_DOWNLOAD = 1;

 

다음으로는 사용할 패키지들을 불러와 선언해 주자.

const chromium = require("@sparticuz/chromium");
const puppeteer = require("puppeteer-core");
const cheerio = require("cheerio");

exports.handler = async (event, context, callback) => {
// !!TODO 코드를 작성하기
}

 

외부에서 url을 받아오고 싶기 때문에 다음과 같이 event.json 파일을 생성하자.

테스트로 우리가 현재 받아올 예시 지역 정보는 경복궁이다. 

{ "url": "https://www.google.com/maps/search/경복궁"}

https://www.google.com/maps/search/${query}와 같은 형태로 url을 받으면 다음과 같이 페이지를 띠워주도록 하자.

만약 url을 제공하지 않는다면 400을 반환하도록 하자.

// ...생략...
// https://www.google.com/maps/search/${query}
const websiteUrl = event.url;
if (!websiteUrl) {
	return { statusCode: 400, body: "Please provide an URL" };
}

const executablePath = await chromium.executablePath();

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

const page = await browser.newPage();

await page.goto(websiteUrl, { timeout: 0, waitUntil: "networkidle0" });

const contents = await page.content();

// ...생략...

 

sam cli로 넘어가기 전에 먼저 docker desktop이 잘 설치되었는지 확인해 보자. 

일단은 signin 하지 않은 상태로 진행해도 된다. default 로 설정을 하고 설치가 잘 되었다면 다음과 같은 창이 뜨게 된다.

sam 명령어를 실행해 주기 전에 template.yml 파일을 생성해 주자.

다음과 같이 작성해 주자. puppeteer를 로드해줘야 하므로 메모리 크기는 512(최대)로 설정해 주도록 한다.

Timeout 설정을 해줘서 코드가 무한정 실행되는 것을 방지해 주자.

AWSTemplateFormatVersion: "2010-09-09"
Transform: AWS::Serverless-2016-10-31
Resources:
  MyFunction:
    Type: AWS::Serverless::Function
    Properties:
      Handler: index.handler
      Runtime: nodejs18.x
      CodeUri: .
      MemorySize: 512
      Timeout: 300

 

vscode 터미널로 들어와서 변경사항을 반영하기 위해 sam build를 해주자. (sam build는 변경사항을 반영하고자 할 때마다 실행해줘야 한다.)

만약 터미널에서 sam 명령어를 입력했는데 붉은 글씨라면 sam cli install 과정에서 문제가 있었거나 설치를 해주지 않았을 수 있다. (설치 링크)

 

로컬로 테스트를 하고 싶다면 도커를 실행시키고, 다음과 같이 명령어를 터미널에서 실행하면 된다.

sam local invoke --event ./event.json

 

(접은 글은 구글 지도 검색 페이지에서 데이터를 가져오는 코드다.)

// 	생략
  const contents = await page.content();

  const $ = cheerio.load(contents);
  const results = [];

  const ifUndefinedReturnNull = (item) => {
    if (item == null || item == "") {
      return null;
    } else {
      return item;
    }
  };

  const container = $(".m6QErb.DxyBCb.kA9KIf.dS8AEf.XiKgde.ecceSd > div");

  // Results라고 안나오고 바로 리스트가 주어지는 경우
  if (
    (container.html() != null && $("h1").text(),
    ifUndefinedReturnNull($("h1").text()) == null)
  ) {
    let tags = null;
    let info = null;
    let address = null;
    let placeName = null;
    let openCloseInfo = null;
    let otherInfo = [];
    let price = null;

    container.children().each((i, el) => {
      const item = $(el).find(".Nv2PK.Q2HXcd.THOPZb");
      const tempPlaceName = item.find(".fontHeadlineSmall").text();
      if (tempPlaceName != null) {
        placeName = tempPlaceName;
      }
      const tempTags = item
        .find(".fontBodyMedium > .W4Efsd > .AJB7ye > span")
        .eq(1)
        .text();

      if (tempTags != null) {
        tags = tempTags;
      }

      const tempPrice = item
        .find(".fontBodyMedium > .W4Efsd > .AJB7ye > span")
        .eq(2)
        .find("span")
        .last()
        .text();

      if (tempPrice != null) {
        price = tempPrice;
      }

      const tempInfo = item
        .find(".fontBodyMedium > .W4Efsd > .W4Efsd > span")
        .eq(0)
        .find("span")
        .text();

      if (tempInfo != null) {
        info = tempInfo;
      }

      const tempAddress = item
        .find(".fontBodyMedium > .W4Efsd > .W4Efsd > span")
        .eq(1)
        .find("span")
        .last()
        .text();

      if (tempAddress != null) {
        address = tempAddress;
      }

      const tempOpenCloseInfo = item
        .find(".fontBodyMedium > .W4Efsd > .W4Efsd")
        .last()
        .find("span > span > span")
        .text();

      if (tempOpenCloseInfo != null) {
        openCloseInfo = tempOpenCloseInfo;
      }

      const tempOtherInfo = item
        .find(".qty3Ue > .fontBodySmall > .Ahnjwc.fontBodyMedium ")
        .text();

      if (tempOtherInfo != null) {
        otherInfo = tempOtherInfo;
      }

      if (placeName != null && placeName != "") {
        results.push({
          placeName,
          tags: ifUndefinedReturnNull(tags),
          price: ifUndefinedReturnNull(price),
          info: ifUndefinedReturnNull(info),
          address: ifUndefinedReturnNull(address),
          openCloseInfo: ifUndefinedReturnNull(openCloseInfo),
          otherInfo: ifUndefinedReturnNull(otherInfo),
        });
      }
    });

    const response = {
      statusCode: 200,
      contents: results,
    };

    return response;
  }

  //  단일 검색 결과
  else if (ifUndefinedReturnNull($(".DUwDvf.lfPIob").text().trim()) != null) {
    const searchResults = $(
      "div.w6VYqd > div.bJzME.tTVLSc > div.k7jAl.miFGmb.lJ3Kh > div.e07Vkf.kA9KIf > div.aIFcqe > div.m6QErb.WNBkOb.XiKgde"
    );

    let img = null;
    let tags = null;
    let info = null;
    let address = null;
    let placeName = null;
    let openCloseInfo = null;
    let otherInfo = [];
    let price = null;

    if (searchResults != null) {
      searchResults.children().each((index, element) => {
        const imgs = $(element)
          .find(".ZKCDEc > .RZ66Rb.FgCUCc > button > img")
          .attr("src");
        if (ifUndefinedReturnNull(imgs) != null) {
          img = imgs;
        }

        const tempPlaceName = $(element)
          .find(".TIHn2 > .tAiQdd > .lMbq3e > div > h1")
          .text()
          .trim();

        if (ifUndefinedReturnNull(tempPlaceName) != null) {
          placeName = tempPlaceName;
        }

        const tempTag = $(element)
          .find(
            ".TIHn2 > .tAiQdd > .lMbq3e > div.LBgpqf > div.skqShb > div.fontBodyMedium.dmRWX > div.F7nice"
          )
          .text()
          .trim();

        if (ifUndefinedReturnNull(tempTag) != null) {
          tags = tempTag;
        }

        const tempPrice = $(element)
          .find(
            ".TIHn2 > .tAiQdd > .lMbq3e > div.LBgpqf > div.skqShb > div.fontBodyMedium > span > span > span > span"
          )
          .not(".google-symbols")
          .not(".fjHK4")
          .text()
          .trim();

        if (ifUndefinedReturnNull(tempPrice) != null) {
          price = tempPrice;
        }

        const tempInfo = $(element)
          .find(
            ".TIHn2 > .tAiQdd > .lMbq3e > div.LBgpqf > div.skqShb > div.fontBodyMedium > span > span > .DkEaL"
          )
          .not(".google-symbols")
          .not(".fjHK4")
          .text()
          .trim();

        if (ifUndefinedReturnNull(tempInfo) != null) {
          info = tempInfo;
        }

        const tempAddress = $(element)
          .find(".Io6YTe.fontBodyMedium.kR99db.fdkmkc")
          .eq(0)
          .text()
          .trim();

        if (ifUndefinedReturnNull(tempAddress) != null) {
          address = tempAddress;
        }

        const tempOpenCloseInfo = $(element).find(".ZDu9vd").text().trim();

        if (ifUndefinedReturnNull(tempOpenCloseInfo) != null) {
          openCloseInfo = tempOpenCloseInfo;
        }

        $(element)
          .find(".E0DTEd")
          .children("div.LTs0Rc")
          .each((_, el) => {
            const tempOtherInfo = $(el).attr("aria-label");
            if (ifUndefinedReturnNull(tempOtherInfo) != null) {
              otherInfo.push(tempOtherInfo);
            }
          });
      });

      const response = {
        statusCode: 200,
        contents: [
          {
            placeName,
            tags,
            price,
            info,
            address,
            img,
            openCloseInfo,
            otherInfo: otherInfo.join(" · "),
          },
        ],
      };

      return response;
    }
  } else {
    // w6VYqd > bJzME tTVLSc >  k7jAl miFGmb lJ3Kh PLbyfe > e07Vkf kA9KIf > aIFcqe > m6QErb WNBkOb XiKgde > m6QErb DxyBCb kA9KIf dS8AEf XiKgde ecceSd
    const searchResults = $(
      "div.w6VYqd > div.bJzME.tTVLSc > div.k7jAl.miFGmb.lJ3Kh.PLbyfe > div.e07Vkf.kA9KIf > div.aIFcqe > div.m6QErb.WNBkOb.XiKgde > div.m6QErb.DxyBCb.kA9KIf.dS8AEf.XiKgde.ecceSd > div.m6QErb.DxyBCb.kA9KIf.dS8AEf.XiKgde.ecceSd"
    );

    const results = [];

    if (searchResults != null) {
      // Iterate through each matching element
      searchResults.children().each((index, element) => {
        const result = $(element)
          .find("div > div")
          .not(".JrN27d.SuV3fd.Zjt37e.TGiyyc") // Results (여러개의 검색 결과)
          .not(".m6QErb.XiKgde.z7i0C"); // Convert the element to a Cheerio object
        const img = $(result).find("img").attr("src");
        const placeName = $(result).find(".fontHeadlineSmall").text();

        const tags = $(result)
          .find(".fontBodyMedium > span")
          ?.attr("aria-label");

        const price = $(result)
          .find(".AJB7ye > span")
          .eq(2)
          ?.find("span")
          ?.eq(1)
          .text()
          .trim();

        const info = $(result)
          .find(".W4Efsd > .W4Efsd > span > span")
          .eq(0)
          .text()
          .trim();

        const address = $(result)
          .find(".W4Efsd > .W4Efsd")
          .eq(0)
          .find("span")
          .not(".google-symbols")
          .last()
          .text()
          .trim();

        const openCloseInfo = $(result)
          .find(".W4Efsd > span > span > span")
          .not(".doJOZc")
          .text()
          .trim();

        const otherInfo = $(result).find(".qty3Ue").text().trim();

        if (placeName != null && placeName != "") {
          results.push({
            placeName,
            tags: ifUndefinedReturnNull(tags),
            price: ifUndefinedReturnNull(price),
            info: ifUndefinedReturnNull(info),
            address: ifUndefinedReturnNull(address),
            openCloseInfo: ifUndefinedReturnNull(openCloseInfo),
            img: ifUndefinedReturnNull(img),
            otherInfo: ifUndefinedReturnNull(otherInfo),
          });
        }
      });
    }
    const response = {
      statusCode: 200,
      contents: results,
    };

    return response;
  }
  
  // 	생략

성공적으로 데이터를 가져오면 다음과 같이 확인가능하다.

 

하지만 일일이 이 긴 명령어를 실행하기 귀찮으므로 

package.json에 작성해 주자. 이제 npm run test 로 로컬에서 실행가능하다.

 // 생략
{
 	"scripts": {
        "build": "sam build",
        "test": "sam local invoke --event ./event.json",
}
// 생략

 

aws cli 설치를 완료헀다면 이제 설정을 해주자. 

(access키와 secret 키가 노출되지 않기 위해 해당 이미지는 튜토리얼 영상의 스크린숏으로 대체했습니다.)

준비해 둔 aws access key와 secret access 를 입력해 주자. 

region은 지역 정보(ap-northeast-2)를 입력해 주면 된다. 

output format은 따로 지정하지 않아도 된다.

 

터미널에서 sam deploy 를 해주자.

Deploy this changeset 문구가 나오면 'y'를 입력해 주자.

aws lambda페이지로 들어가면 다음과 같이 function이 만들어진다.

 

배포된 lambda function을 실행하기 위해서는 두 가지 방법이 있는데, 더 편한 걸로 하면 된다.

1. 터미널에서
2. cli로

터미널에서 실행하기 위해서는 Funciton ARN을 복사해 주자.

터미널로 다시 돌아와서 다음을 입력해 주자.

sam remote invoke ARN복사붙여놓기 --event-file ./event.json

 

ARN을 항상 복사해 오는 번거로운 일 대신,  package.json에 명령어를 추가해 주자.

 // 생략
"build": "sam build",
"deploy": "sam deploy",
"test": "sam local invoke --event ./event.json",
// 추가해주기
"prod": "sam remote invoke ARN_복사붙여놓기 --event-file ./event.json"
// 생략

 

이제 npm run prod으로 배포가 가능하다.

 

여기서부터는 튜토리얼 영상 없이 진행되는 내용입니다.

 

두 번째 방법으로는 sam cli을  사용하는 것이다.

다음과 같이 Test tab에 들어가면 

다음과 같이 param을 변경하여 배포된 lambda function을 테스트할 수 있다.

성공적으로 데이터를 가져오면 다음과 같은 화면을 확인할 수 있다.

 

다른 검색어 '한라산'으로 변경 후 다시 test를 돌리면 다음과 같이 성공적으로 정보를 가져온다.

{
  "statusCode": 200,
  "contents": [
    {
      "placeName": "한라산",
      "tags": "4.7(729)",
      "price": null,
      "info": "산봉우리",
      "address": "서귀포시",
      "img": "https://lh5.googleusercontent.com/p/AF1QipOAkhVKrq3broFnCMCx4sdqm45jxANDfoC2k3bi=w426-h240-k-no",
      "openCloseInfo": null,
      "otherInfo": ""
    }
  ]
}

---

마치면서

첫 lambda 함수 만들어/맛보기!
처음에는 vercel로 배포해서 사용하려고 했으나 hobby 플랜이어서 그런지
개발환경에서 잘만 배포되고 돌아가던 코드가 돌아가지도 못해서 좌절했었다. 기껏 puppeteer까지 써가면서 해뒀더니 ㅜㅜ
성공적이어서 프로젝트에 붙였지만 아쉬운 점은
이렇게 하나의 검색 결과를 반환하는 데에도 시간이 많이 걸리는데, 
여행 일정을 짜기 위해 여러 (최소 3군데)를 찾는 데 걸리는 시간을 어떻게 줄일 수 있을지.
원래는 puppeteer cluster를 사용해보려고 했다가 버전 이슈때문인지 실패..
아쉽지만 일단 만들고 개선하는 방향을 생각해 보기로 했다.

---

References

https://www.youtube.com/watch?v=INlCCRdOfj4