본문 바로가기

Development Project/Puppeteer (Node JS)

퍼펫티어 (Puppeteer) Docker 사용 (2)

Docker 이미지 생성 및 간단한 실습

 

 

 

 

 

 

 

 

1. docker에서 node : lastext 을 실행 시킨다.

User ~ $ docker run -it node:latest /bin/bash
Unable to find image 'node:latest' locally
latest: Pulling from library/node
7919f5b7d602: Already exists
0e107167dcc5: Already exists
66a456bba435: Already exists
5435318a0426: Already exists
8494dd328465: Already exists
3b01939c6506: Already exists
aa34f14b8c8c: Pull complete
223f911f3cb0: Pull complete
2784b417d701: Pull complete
Digest: sha256:e30908d927bf35bf099e98c09e5467fd5187ecbf600b01003ca664ef885c8995
Status: Downloaded newer image for node:latest
root@8d28144427ab:/#

2. Node JS 초기설정
(vim 또는 nano 등을 이용한 작성)

  • vim 설치 방법
    본 문서는 vim 편집기를 이용해 문서를 편집하고 있다.
    vim 사용 방법은 : https://zeddios.tistory.com/122 참고
    • npm 초기화 및 puppeteer 설치
    • root@8d28144427ab:~# npm init (중략 ... ) root@8d28144427ab:~# npm install puppeteer (중략 ... )
    • package.json 수정
      → Node JS 코드 작성을 ES6 형태로 진행할 때 type : module 을 추가 한다.
      → 아래 에러 사항을 방지하기 위한 설정
      (package.json)
      {
      "type":"module",
      "name": "root",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
          "start":"node --experimental-json-modules index.js"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "puppeteer": "^5.5.0"
      }
      }
      ⇒ 관련 에러 사항
    • (node:424) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use `node --trace-warnings ...` to show where the warning was created) /root/index.js:1 import puppeteer from "puppeteer";
    • root@8d28144427ab:~# vim package.json
  • root@8d28144427ab:/# apt update (중략 ... ) root@8d28144427ab:/# apt install vim -y

3. 간단 코드 작성

root@8d28144427ab:~# vim index.js
import puppeteer from "puppeteer";
(async () => {
    const browser = await puppeteer.launch({
        ignoreHTTPSErrors : true,
        headless : true,
        args:['--no-sandbox','--disable-setuid-sandbox']
    });
    const page = await browser.newPage();
    await page.goto("https://dlwfp.tistory.com/category");
    const title = await page.evaluate(()=>{
        return document.querySelector("#content > div.inner > div > a > span.title").innerHTML;
    });
    console.log(title);

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

4. Node 소스코드 실행

root@8d28144427ab:~# npm start

- "libnss3.so: cannot open shared object file: No such file or directory" 에러 발생 Chrome Client 를 설치하지 않아서 발생하는 문제점 Chrome 관련 패키지 설치 및 설정

apt-get update \
     && apt-get install -y wget gnupg ca-certificates \
     && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
     && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
     && apt-get update \
     && apt-get install -y google-chrome-stable \
     && rm -rf /var/lib/apt/lists/* \
     && wget --quiet https://raw.githubusercontent.com/vishnubob/wait-for-it/master/wait-for-it.sh -O /usr/sbin/wait-for-it.sh \
     && chmod +x /usr/sbin/wait-for-it.sh

 

5. 다시 수행

root@8d28144427ab:~# npm start

> root@1.0.0 start
> node --experimental-json-modules index.js

[카카오 2019 겨울 인턴십] 크레인 인형뽑기 게임
root@8d28144427ab:~#

 

소스코드 진행 과정

  1. puppeteer 런처 ( chrome ) 을 하위 옵션을 적용해 생성
  2. page를 새로 연다 (새로운 탭이 생성)
  3. "https://dlwfp.tistory.com/category" 페이지에 접속한다.
  4. 웹 접속 후 화면에서 다음 Seletor 를 찾아 HTML 반환한다.  selector => "#content > div.inner > div > a > span.title"
  5. 반환된 데이터를 화면에 출력한다.
  6. 런처 브라우저를 닫는다.

 

puppeteer 공식 가이드를 통해 다양한 자동 프로그램을 작성 할 수 있다.

공식 페이지 : https://pptr.dev/

 

https://pptr.dev/

 

pptr.dev

 

 

Notion 에 정리해둔걸 올리는 중인데 마크다운 형태가 많이 다른듯 하다. ㅠ