[Puppeteer] 퍼펫티어를 이용해 File Upload 하기[Puppeteer] 퍼펫티어를 이용해 File Upload 하기

Posted at 2020. 5. 29. 21:26 | Posted in Node.js/Puppeteer
반응형





■ 퍼펫티어를 이용해 파일 업로드하기






퍼펫티어를 통한 사무자동화 작업중 사이트의 파일 업로드를 해야하는 경우가 발생하였다.


문제는 헤드리스 모드( 작업화면이 사용자에게 보이지않는 ) 상황으로 완성품을 만들기위해서는.


업로드 버튼을 누르고 → 파일을 찾고 → 이미지를 업로드 하는 과정을


컴퓨터 화면을 보지 않고 진행을 해야한다는 것이다.









다행이 퍼펫티어에서는 waitForFileChooser( ) 메서드를 통해


해결할 수 있는 방법을 제공한다.


아래 코드를 통해 관련 작업을 진행해 보자.




# 소스코드 - node.js

 fileUpload.php

const puppeteer = require( "puppeteer" );


// 사용시 인위적인 딜레이를 주기위한 함수

function delay( timeout ) {

    return new Promise(( resolve ) => {

      setTimeout( resolve, timeout );

    });

}


puppeteer.launch({

      headless : false          // 헤드리스모드의 사용여부를 묻는다.

    , devtools : false          // 개발자 모드의 사용여부를 묻는다.

    , slowMo : 50          // 지정된 시간(ms)만큼 Puppeteer 작업 속도를 낮춘다.

}).then(async browser => {


    const page = await browser.newPage();

    await page.goto( "http://localhost/fileUpload.php", { waitUntil : "networkidle2" } );


    const [fileChooser] = await Promise.all( [

        page.waitForFileChooser( ),

        page.click( "#upFile" )         // 파일을 올릴 input type = "file" 태그를 지정

    ] );


    await fileChooser.accept( [ "puppeteer.png" ] );


    // 3초간딜레이를 준다.

    await delay( 3000 );


    page.waitForNavigation( ),page.click( "#upBtn" );


    // await browser.close( );

});




해당 포스팅은 운영중인 어느 사이트가 아닌


업로드 기능을 가진 페이지를 기준으로 테스트를 진행하려 한다.


아래 파일을 업로드할 웹 페이지를 간단히 제작하자.




# 소스코드 - PHP

 fileUpload.php

<?php

    echo "<pre>";

    print_r( $_FILES );

    echo "</pre>";

?>

<html>

<head>

<title>:: Puppeteer 업로드 속성 ::</title>

<script type="text/javascript">

    function fileUpload() {

        document.getElementById("upFrm").action = "./fileUpload.php";

        document.getElementById("upFrm").submit();

    }

</script>

</head>

<body>

    <form enctype="multipart/form-data" id="upFrm" method="post">

        <input type="file" id="upFile" name="upFile" accept="image/*">

        <br/><br/>

        <input type="button" onClick="fileUpload();" id="upBtn" value="업로드">

    </form>

</body>

</html>





# 출력결과




그럼 위의 이미지와 같이, 지정한 이미지를 자동으로 업로드 해주는 모습을 확인 할 수 있다.







반응형
저작자표시

'Node.js > Puppeteer' 카테고리의 다른 글

퍼펫티어 request, response ( 작성중 )  (3) 2020.05.29
[Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절  (0) 2020.05.29
[Puppeteer] evaluate() 페이지 데이터 추출  (0) 2020.05.27
[Puppeteer] evaluate() 함수에 변수 전달하기  (0) 2019.09.30
[Puppeteer] Cheerio 모듈을 활용한 데이터 스크랩핑  (0) 2019.06.20
//

[Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절[Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절

Posted at 2020. 5. 29. 15:23 | Posted in Node.js/Puppeteer
반응형




■ 퍼펫티어 창 크기 조절하기





퍼펫티어를 이용한 작업을 진행하다 보면


화면에 표시되는 영역의 크기가 작아서 답답한 경우가 발생한다.






브라우저의 크기를 아무리 늘려도 출력되는 페이지의 크기는 변화가 없다.


실제 서비스하는경우는 headless : true로 설정하여 보이지 않게 하고 작업을 진행하겠지만.


서비스 개발중에는 종종 답답한 경우가 발생한다. 


setViewport( ) 설정을 통해 이런 답답한 점을 해결해보자.




# 소스코드

 puppeteer.viewport.js

const puppeteer = require("puppeteer");


puppeteer.launch({

      headless : false // 헤드리스모드의 사용여부를 묻는다.

    , devtools : false // 개발자 모드의 사용여부를 묻는다.

    , slowMo : 0            // 지정된 시간(ms)까지 Puppeteer 작업속도를 느리게 한다.


}).then(async browser => {


    const page = await browser.newPage();


    await page.setViewport({

          width : 1280               // 페이지 너비

        , height : 720                // 페이지 높이

        , deviceScaleFactor : 1     // 기기 배율 요소를 지정 DPR( Device Pixel Resolution )

        , isMobile : false            // 모바일

        , hasTouch : false           // 터치 이벤트 발생여부

        , isLandscape : false        //

    });


    await page.goto( "https://github.com/puppeteer/puppeteer/blob/master/docs/api.md", { waitUntil : "networkidle2" } );

});





# 출력 결과

 $ node puppeteer.viewport.js



위와같이 출력화면이 브라우저 가득 커져서 나오는 것을 확인 할 수 있다.








반응형
저작자표시

'Node.js > Puppeteer' 카테고리의 다른 글

퍼펫티어 request, response ( 작성중 )  (3) 2020.05.29
[Puppeteer] 퍼펫티어를 이용해 File Upload 하기  (0) 2020.05.29
[Puppeteer] evaluate() 페이지 데이터 추출  (0) 2020.05.27
[Puppeteer] evaluate() 함수에 변수 전달하기  (0) 2019.09.30
[Puppeteer] Cheerio 모듈을 활용한 데이터 스크랩핑  (0) 2019.06.20
//

[Puppeteer] evaluate() 페이지 데이터 추출[Puppeteer] evaluate() 페이지 데이터 추출

Posted at 2020. 5. 27. 13:54 | Posted in Node.js/Puppeteer
반응형





■ evaluate( )를 이용하여 페이지내의 데이터 가져오기




티스토리 블로그에 로그인을 하려면


로컬 스토리지의 tistoryFingerprint 값이 필요하다.






샘플로예제로 위 데이터를 가지고와 보자.




# 소스코드

 evaluate_get.js

const puppeteer = require("puppeteer");


// 사용시 인위적인 딜레이를 주기위한 함수

function delay( timeout ) {

  return new Promise(( resolve ) => {

    setTimeout( resolve, timeout );

  });

}


puppeteer.launch({

          headless : false // 헤드리스모드의 사용여부를 묻는다.

, devtools : true // 개발자 모드의 사용여부를 묻는다.


}).then(async browser => {


    const page = await browser.newPage();


    await page.goto( "https://www.tistory.com/auth/login", { waitUntil : "networkidle2" } );


    await page.setRequestInterception(true);


    const pageGetData = await page.evaluate(() => {

        const jsonData = {

            "fingerPrint" : localStorage.getItem( "tistoryFingerprint" )

        };

        return jsonData;

    });


    console.log( pageGetData.fingerPrint );

});



이제 실행해보면 tistoryFingerprint값을 가져올 수 있는 모습을 확인 할 수 있다.



# 출력결과

 $ node evaluate_get.js 











반응형
저작자표시

'Node.js > Puppeteer' 카테고리의 다른 글

[Puppeteer] 퍼펫티어를 이용해 File Upload 하기  (0) 2020.05.29
[Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절  (0) 2020.05.29
[Puppeteer] evaluate() 함수에 변수 전달하기  (0) 2019.09.30
[Puppeteer] Cheerio 모듈을 활용한 데이터 스크랩핑  (0) 2019.06.20
[Puppeteer] 페이지 클릭 및 입력 이벤트  (0) 2019.05.10
//

[Node.js] HTTPS 서버 구현하기[Node.js] HTTPS 서버 구현하기

Posted at 2020. 5. 20. 18:22 | Posted in Node.js
반응형




※ 해당 포스팅은 AWS EC2 서버에서 node.js v14.3.0 버전으로 테스트한 내용입니다.




참고 : https://nodejs.org/api/https.html

참고 : https://mylko72.gitbooks.io/node-js/content/chapter7/chapter7_5.html

참고 : https://lahuman.github.io/cet_key_to_pem







node.js의 socket.io를 이용한 통신을 해야하는 경우가 생겼다.


문제는 https 서버에서 socket통신을 이용하는 경우 "혼합된 컨텐츠 차단", "크로스 도메인 이슈" 에러가 발생하여


해결을 위해 이 경우 HTTPS 서버를 구현하여 해결하였다.






■ HTTPS란?




하이퍼텍스트 전송 프로토콜 보안( HTTPS, Hypertext Transfer Protocol Secure )은 HTTPS 클라이언트와 서버간에 안전한 통신을 제공하는 통신 프로토콜이다.


HTTPS는 보안 기능을 확보하기 위해 전송층 보안( TLS, Transport Layer Security ) / 보안 소켓층( SSL, Secure Sockets Layer ) 프로토콜 위해 HTTP를 구현한 것이다.




HTTPS는 두 가지 방식으로 보안 기능을 제공한다.


첫번째로 단기간에 사용되는 세션 키 교환을 위해 장기간 사용되는 공개 키와 비밀 키를 사용해 클라이언트와 서버간 데이터 암호화를 진행한다.


또한 인증 기능을 통해 접속하련느 웹 서버가 의도한 서버가 맞는지 확인해 중간자 공격을 방지할 수 있다.







■ HTTPS 서버와 HTTPS 클라이언트를 구현





#01. https 모듈 설치



먼저 https 모듈을 설치해야 한다.


 $ npm install https





#02. crt, key 파일을 pem 파일로 변환하기



※ 해당 cert, key 파일은 AWS EC2에서 제공되는 cert, key 파일을 사용하였다.

    ( 참고 :  )



HTTPS 인증서를 node.js에서 바로 사용하기 위해서는 pem 파일 형식으로 변환하는 작업이 꼭 필요하기에


아래와 같이 작업을 진행해 보도록 하자.




01) KEY 파일 변경하기

 $ openssl rsa -in  custom.key -text > agent-key.pem



02) CRT 파일 변경

 $ openssl x509 -inform PEM -in custom.crt > agent-cert.pem 




#03. HTTPS 서버 실행



# 소스코드

 https.server.app.js

const https = require( "https" );

const fs = require( "fs" );


// HTTPS 클라이언트 생성

const options = {

      hostname : "wickedmiso.com"

    , port : 443                                                                              

    , path : "/"

    , method : "GET"

    , key : fs.readFileSync( "/etc/pki/tls/private/agent-key.pem", "utf8" )

    , cert : fs.readFileSync( "/etc/pki/tls/certs/agent-cert.pem", "utf8" )

    , agent : true

};


options.agent = new https.Agent( options );


// HTTPS 서버 생성

https.createServer( options, ( req, res ) => {

    res.writeHead( 200 );

    res.end( "HTTPS, Hypertext Transfer Protocol Secure\n" );

}).listen( 52273, function() {

    console.log( "Server Running at https://localhost:52273" );

});






// 도메인 주소

// https 기본 포트 443



// key 옵션은 SSL을 위한 개인키를 지정한다.

// cert값은 사용할 x509 공개키를 지정한다.

// 크로스 브라우저 처리를 위한 userAgent 프로퍼티



// 맞춤형 Agent 객체를 생성한다.

// agent : false인경우 주석처리하여 비활성화 한다.



# 출력결과






반응형
저작자표시

'Node.js' 카테고리의 다른 글

[Node.js] 디렉토리내의 파일 정보 가져오기  (0) 2020.09.07
[Node.js] exceljs를 이용하여 Excel 파일 읽기  (0) 2020.08.20
[Node.js] socket 통신으로 파일 업로드 하기  (0) 2020.05.14
[Noe.js] 실행시 값 입력하기  (0) 2020.05.04
[Node.js] Email 발송하기  (0) 2020.05.01
//

티스토리툴바