반응형

1-1 에서 브라우저 실행, 탭 생성, 접속 까지 진행해보았다.

 

1-1. launch, newPage, goto

3줄 코딩으로 크롤링을 배울 수 있도록 간단하게 만드는 교육문서 입니다. 이해하기 쉽도록 파이썬의 자동화 브라우저는 pyppeteer를 이용하도록 하겠습니다. requests는 막히는 경우가 많아 자동화

moka-pome.tistory.com

 

1-2 에서는 닫기기능(close)과 기다리는 기능(sleep) 을 진행

 

import asyncio
import time
from pyppeteer import launch

async def main():
    browser = await launch(
        headless=False,
        executablePath=r"C:\Program Files\Google\Chrome\Application\chrome.exe"
    )
    page = await browser.newPage()
    await page.goto("https://www.naver.com")

    # 1-2
    # time.sleep(5)
    await asyncio.sleep(5)

    await page.close()

asyncio.run(main())

 

await page.goto("https://www.naver.com") 

까지 1-1에서 다루어보았다.

 

1. sleep

동기 sleep을 알아보기 위해서 import time 을 상단에 해준다.

- time.sleep(5) 

- await asyncio.sleep(5)

둘 다 동일하게 5초 동안 멈춘다.

두개의 차이는 

time.sleep은 모든게 멈춘다.

await asyncio.sleep은 멈춰있는 동안 이벤트 루프는 계속 돌아간다.

 

비동기 sleep을 사용해야 하는 이유는 WebSocket통신도 멈춰 브라우저 연결이 끊길 수 있기 때문이다.

 

2. close

우리는 상단에 newPage를 page에 담아 naver에 접속하였다

즉, naver가 열린 페이지가 page라는 이름의 탭

await page.close() 라는 것은 naver가 열린 탭을 닫겠다 라는 뜻이다.

 

탭만 닫는게 아닌 크롬 브라우저 자체를 닫고 싶으면

await browser.close() 로 고치면 된다.

 

결과화면

아래와 같이 5초 뒤 Naver가 열린 탭이 닫힌 것을 확인 할 수 있다.

 

반응형

'3줄 크롤링' 카테고리의 다른 글

1-1. launch, newPage, goto  (0) 2026.04.14
반응형

3줄 코딩으로 크롤링을 배울 수 있도록 간단하게 만드는 교육문서 입니다.

 

이해하기 쉽도록 파이썬의 자동화 브라우저는 pyppeteer를 이용하도록 하겠습니다.

 

requests는 막히는 경우가 많아 자동화 브라우저 사용으로 진행됩니다.


 

Python Version: 3.10.11

pyppeteer

pip install pyppeteer

 

 

import asyncio
from pyppeteer import launch

async def main():
    browser = await launch(
        headless=False,
        executablePath=r"C:\Program Files\Google\Chrome\Application\chrome.exe" 
    )
    page = await browser.newPage()
    await page.goto("https://www.naver.com")

asyncio.run(main())

 

import 부분은 자동화 브라우저와 자동화를 가져오기 위한 라이브러리 입니다.

 

1. browser = await launch()

Chrome 브라우저 실행

"browser"에 Chrome 브라우저를 담는다.

 

2. page = await browser.newPage()

새 탭을 열어 "page"에 담는다. 

 

3. await page.goto("https://www.naver.com")

담은 page에 Naver 주소로 접속한다.

 

 

headless=False,
executablePath=r"C:\Program Files\Google\Chrome\Application\chrome.exe" 

 

이 부분은 브라우저 실행 시 등록하는 브라우저 옵션이다. 

- headless: 화면이 True(안보이게), False(보이게)

True로 할 시 백그라운드에서 실행됨.

- executablePath: 지정한 크롬 실행 파일로 실행되도록 한다.

보통 윈도우 경로는 위와 같이 되어있다.

 

pyppeteer가 옛날 라이브러리이기 때문에 크로미움 버전도 많이 낮다.

executablePath를 명시하여 현재 설치된 크롬 버전으로 크롤링을 하는 것이 좋다.

 

- 옛날 버전으로 실행 시 최신 기능을 가져오지 못해 페이지 로드가 안될 수 있음

- 버전을 감지하여 자동화 브라우저로 판단될 수 있음

 

결과 화면

 

크롬 창 자체가 브라우저 browser = await launch()

NAVER 가 열린 탭은 page = await browser.newPage()


참고 (읽지 않아도 됩니다.)

 

자동화 브라우저를 비동기(async, await)로 해야하는이유

 

  1. Chrome한테 "naver.com" 전송
  2. DNS 조회 (naver.com → IP 변환)
  3. TCP 연결
  4. HTTP 요청
  5. HTML 수신
  6. HTML 파싱
  7. CSS 파일 요청/수신
  8. JS 파일 요청/수신
  9. JS 실행
  10. 이미지 요청/수신
  11. "로딩 완료" 이벤트 → pyppeteer에 응답

 

위와 같은 과정이 브라우저 내부에서 이루어지기 때문에 동기로 처리 할 시 다른 작업을 진행 할 수 없기 때문

반응형

'3줄 크롤링' 카테고리의 다른 글

1-2. close, sleep  (0) 2026.04.14
반응형

저번글에서 Hyper-V 로 Rocky 세팅하는 방법을 다루어보았다.

하지만 스케줄러를 사용하려면 터미널 기반의 Cron을 써야하는데,

작업 상태를 실시간 대시보드로 직접 확인하지 못한다는 불편함이 있음.

이를 해결하기 위해 Cronicle 이라는 cron 전용 웹 대시보드를 구축하는 방법을 다뤄보려고 한다.

 

서버환경

  • OS: Rocky Linux 9.7 (Blue Onyx)
  • Node.js: v20.20.0
  • npm: 10.8.2
  • Virtual: Hyper-V
  • Cronicle: Latest

 

- Node.js 설치 

 

sudo dnf module list nodejs

 

설치 가능한 node 목록 확인

 

sudo dnf module reset nodejs -y

 

다른 버전 활성화 되어 있는 경우 충돌 방지를 위해 노드 모듈 설정 초기화

 

sudo dnf module enable nodejs:20 -y

 

node 20버전 활성화

 

sudo dnf install nodejs -y

 

node 설치

node -v && npm -v

 

설치 확인

 

- 가상환경 Cronicle 설치

 

먼저 편리한 작업을 위해 터미널 실행

가상환경 컴퓨터에서

ip addr

 

입력 후 inet 뒤의 ip를 가져온다.

 

그 후 본 컴에서 아래와 같이 입력 (가상환경에서 나온 ip를 입력)

ssh root@{ip}

 

기본 네트워크(Default Switch)로 설정했다면 hyper-V 가상환경 IP인 172로 시작할 것이다.

root 비밀번호 입력 후 ssh 연결

 

sudo mkdir -p /opt/cronicle && cd /opt/cronicle

 

Cronicle 설치할 전용 폴더 생성 및 이동

 

sudo curl -L https://github.com/jhuckaby/Cronicle/archive/master.tar.gz | sudo tar zxvf - --strip-components 1

 

최신 Cronicle 소스 파일 다운로드 및 압축해제

--strip-components 1 → 불필요한 상위 폴더 구조 제거 및 실제 파일 추출

 

sudo npm install

 

Node.js 라이브러리 설치

 

sudo node bin/build.js dist

 

웹 UI화면을 구성하는 자바스크립트 스타일 시트 빌드

 

sudo /opt/cronicle/bin/control.sh setup

 

관리자 계정(admin)과 내부 데이터 보관을 위한 초기 데이터베이스 구조 설정

 

sudo chmod -R 755 /opt/cronicle

 

웹 서버가 설치된 폴더 및 파일 권환 일괄 설정

 

sudo /opt/cronicle/bin/control.sh start

 

실행 시 접속 되는 것을 확인

 

이후 외부에서 작업을 할 수 있도록 가상 스위치 관리자를 설정해주어야 한다.


- Hyper-V 외부 가상 스위치(Bridge) 설정

가상머신의 내부IP (172.x.x.x) 는 본체와 분리된 망이기 때문에 접속이 안됨.

이를 본체와 같은 망 (192.x.x.x) 으로 합쳐주는 작업이 필요함.

 

1. Hyper-V 관리자 -> 우측 가상 스위치 관리자 클릭

 

 

외부(External)  -> 가상 스위치 만들기 -> 이름 작성 후 확인

 

2. Hyper-V 관리자 -> 가상 컴퓨터 -> 자신의 가상 머신 우클릭 -> 설정

 

가상 스위치 관리자에서 생성한 것으로 변경 (Default Swtich -> ExternalSwich)

 

3. 인터페이스 이름 확인

 

ssh 연결 or rocky의 터미널에 들어가 아래 명령어를 입력

nmcli connection show

 

출력되는 결과를 확인하면 보통 eth0, lo 가 있음.

 

sudo nmcli connection down [이름]
sudo nmcli connection up [이름]

 

ex) eth0인 경우 sudo nmcli connection up eth0

 

ip addr

 

Name이 파란색으로 나오는 것을 확인 inet ip가 변경되면 성공

 

- 방화벽 (보안 설정)

1. 3012 포트 개방

sudo firewall-cmd --permanent --add-port=3012/tcp
sudo firewall-cmd --reload

 

2. SELinux 완화: (웹 리소스 로딩 차단 방지)

sudo setenforce 0

 

3. 본 컴퓨터에서 접속 확인

 

- 주소창에 http://[ip addr로 확인한 ip]:3012 입력

ex. http:192.x.x.x:3012 입력 후

admin, admin 으로 로그인 시 성공!

 

외부에서 접속하고 싶으면 포트포워딩을 통해서 지금까지 해준 포트와 아이피를 통해서 열어주면 된다.

끝!

반응형

'Server' 카테고리의 다른 글

windows에서 hyper-v로 Rocky(리눅스) 가상환경 세팅  (0) 2026.03.04
반응형

기본 윈도우 서버에서 리눅스 서버를 구축하게 되었다.

ubuntu VS Rocky 를 비교하다보니 기업전용에 안정을 택하게 되어 Rocky로 세팅하게 되었다.

 

https://rockylinux.org/ko-KR/download

 

Download - Rocky Linux

다운로드 최신 로키 리눅스 설치 관련 있는 Rocky Linux를 다운로드하고 사용하면서 Rocky Enterprise Software Foundation은 기여자로서 커뮤니티의 일원이 되도록 초대합니다. 문서화, QA, 테스트부터 SIG의

rockylinux.org

  

 

먼저 Rocky ISO 파일을 Download 한다.

Minimal ISO로 다운로드 해야함.안정화 버전을 위해 9.7 버전으로 진행

 

Windows 기능 켜기/끄기 에서 Hyper-V를 설정하면 재부팅 되니 ISO 파일을 다운로드 한 후 재부팅!

 

 

windows 기본 제공 기능 hyper-v 로 Rocky 가상환경 세팅

 

제어판 → Windows 기능 켜기/끄기 접속 후

 

Hyper-V 체크 후 재부팅

 

검색 창에 Hyper-V 관리자 검색

 

이름 지정

 

2세대 선택

 

메모리 할당(자신의 컴퓨터 램 사양에 맞게 나누면 됩니다. default 4GB)

작업관리자 → 성능에서 확인

 

네트워킹 구성(Defult Switch로 설정)

 

하드 디스크 설정(가상 컴퓨터의 저장공간)

이것도 자신의 환경과 가상 컴퓨터의 용도에 맞게 설정

 

설치 옵션 (Rocky의 ISO 파일을 Download)

 

 

그 후 Hyper-V 관리자로 접속

가상 컴퓨터란에 본인이 설정한 이름으로 가상 컴퓨터가 생성됨.

우클릭 후 설정 클릭

 

우클릭 후 설정 클릭

 

펌웨어 탭: DVD 드라이브, 네트워크 어댑터, 하드 디스크 순인지 확인 후 

보안 탭: 본인 컴퓨터 용도에 따라서 보안 부팅 사용 체크 or 해제 (템플릿: Microsoft UEFI 인증 기관)

메모리 탭: 동적 메모리 사용 체크해제 (램 설정 용량 확인) 

프로세서 탭: 가상 프로세서 수 확인 리소스 컨트롤은 유지

 

실행 후 연결하면 검은화면에

install rocky lunux minimal 9.7

test this media & install rocky linux minimal 9.7

install rocky linux minima 9.7 in FIPS mode

troubleshooting -->

 

네가지 선택지가 나온다.

맨 위 install rocky lunux minimal 9.7 선택 후 엔터 

 

설정하다보면 root 비밀번호 설정하라고 나온다.

이건 root권한 윈도우로 따지면 관리자 권한이라고 생각하면 된다.

SSH 연결은 웬만하면 체크! 가상환경 컴퓨터가 본컴이랑 호환이 안되서 불편함 ㅜㅜ

리눅스는 관리자 권한 시 비밀번호가 필요하기 때문에 꼭 설정

 

그 후 리눅스 화면 GUI가 필요하면 다운로드 하면된다.

(단, GUI 적용 시 재부팅 필요)

 

 

끝!

 

 

반응형

'Server' 카테고리의 다른 글

Crontab 웹 대시보드 Cronicle 설치 및 Hyper-V 설정  (1) 2026.03.09
반응형

인텔리제이로 학생 라이센스를 받아서 사용하는 중이었는데 지원이 중단됨..

 

한 3~4번 갱신했던거로 기억하는데 이번에 학교에서 지원이 끊긴건지 잘 모르겠다...

 

학창시절 vscode는 이론 공부용으로 잠깐..찍먹해보고 실무공부로 이클립스 반년 사용하다 인텔리제이로 쭉 정착했다

아무래도 파이참이나 여러 유용한 프로그램들이 젯브레인에서 통일되어있고 편하기도해서 쭉 사용하게 되었다.

VS Code -> Eclipse -> IntelliJ

 

어쨌든 나의 코딩 IDE 변천사는 이런식이었는데 vscode는 기억도 안난다..

 

그렇다고 이클립스는 너무 옛날 프로그램이라서 VS Code 확장을 이용해서 꾸미기? 커스텀?을 해보려고 한다.

 

 

1. Font

일단 폰트먼저..

아래 사이트에서 폰트를 다운받는다

그럼 fonts -> webfonts 아래에 여러 폰트들이 있는데 설치를한다.

 

그러고 Vscode에서 왼쪽 상단에

파일 -> 기본설정 -> 설정 -> 텍스트편집기 -> 글꼴

을 찾아서 Font Family에 다운받은거 적용한다.

저는 Jetbrains Mono 이걸로 했습니다.

설정에서 안하시고 VsCode가 능숙하신 분은 settings.json에서 직접 반영하시는게 편합니다.

 

"editor.fontWeight": "normal"

"editor.fontSize": 15

"window.zoomLevel": 1

 

적용해서 저는 좀 크고 굵은 글씨를 선호하는 편

 

https://www.jetbrains.com/ko-kr/lp/mono/

 

JetBrains Mono: A free and open source typeface for developers

Try JetBrains Mono in your IDE. Its simple forms and attention to every detail make coding a nice experience for developers’ eyes, no matter which IDE you choose.

www.jetbrains.com

 

이렇게 원하는 글씨체 설정하면 끝!

 

이런 느낌? 인텔리제이랑 비슷?하죠? 들여쓰기 색 넣는건 많으니 취향에 맞게 사용하시면 됩니다~

제가 사용한 건 

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

 

indent-rainbow - Visual Studio Marketplace

Extension for Visual Studio Code - Makes indentation easier to read

marketplace.visualstudio.com

 

저런 들여쓰기나 그런건 extension에 검색해보면 많이 있으니까 취향에 맞게 하시면 될 것 같습니다.

 

2. Theme

이것도 많이 취향이 갈리긴 하는데 그나마 제 기준 인텔리제이 테마랑 제일 비슷한거 뽑자면

 

https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai

 

One Monokai Theme - Visual Studio Marketplace

Extension for Visual Studio Code - A cross between Monokai and One Dark theme

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme

 

Palenight Theme - Visual Studio Marketplace

Extension for Visual Studio Code - An elegant and juicy material-inspired theme for Visual Studio Code.

marketplace.visualstudio.com

 

인텔리제이에서도 확장테마를 사용했었어서 제가 사용한건 2번째꺼랑 제일 비슷하더라고요

 

https://marketplace.visualstudio.com/items?itemName=trinm1709.dracula-theme-from-intellij

 

Darcula IntelliJ Theme - Visual Studio Marketplace

Extension for Visual Studio Code - A Darcula Theme inspired by IntelliJ

marketplace.visualstudio.com

 

오리지널이 좋으시다면 이걸로~

 

3. Exploere

제일 문제가 바로 이건데 

진짜 VS Code 탐색기 너무 못쓰겠다...

 

파일 검색하려면 Ctrl+Shift+F 로 검색해서 해야하는데 트리구조도 보이지 않고 어느 위치에 있는지도 한 눈에 보기 어렵다.

이런식으로 마우스를 올려야 볼 수 있는데... 이게 너무 불편했다.

 

특히 프론트 개발자는 더더욱 불편함이 더 크게 느껴질거라고 생각한다.

컴포넌트가 어디서 재사용되고 공용인지 특정 페이지인지 상태는 어떤지 보통 트리구조 보고 판단하지 않나 싶은데

프로젝트마다 다르겠지만 커다란 프로젝트 일수록 트리구조에 대한 시각적 의존도는 더 커질 것 이라고 본다.

 

백엔드는 그래도 MVC의 레이어드 아키텍쳐 덕분에 흐름만 따라가도 연결되기 때문에 그나마 좀 덜 할 것 이라고 생각된다.

(참고로 본인은 백엔드)

 

그래서 그런 트리구조가 보이는 탐색기 extension을 찾아보는데...

없다...

하는 수 없이 내가 만들어보기로 했다. 결국 내 확장프로그램 홍보글 같게 됐지만

나와 같은 고민인 사람들이 꽤나 있을거라고 생각한다.

 

https://marketplace.visualstudio.com/items?itemName=kmin.intellij-explorer-with-file-icons

 

TreeLens Explorer - Visual Studio Marketplace

Extension for Visual Studio Code - Fast fuzzy filtering project explorer with file icons for VS Code

marketplace.visualstudio.com

 

 

내가 만든 인텔리제이 스타일 탐색기 extension이다.

 

다운받으면 저렇게 왼쪽에 폴더 모양 버튼이 나오게 된다.

자세한 설명은 저 확장프로그램 안에 정리 해두었고 기능들만 여기서 자세하게 다뤄보려고 한다.

 

- 검색

제일 중요한 기능이다. CTRL + ALT + F 를 누르면 검색창으로 포커싱 된다.

위와 같이 나오게 되며 검색하는 즉시 저렇게 highlight로 한눈에 볼 수 있다.

 

초기화: esc나 검색창 오른쪽에 x를 누르면 초기화

화살표: 활성화된 파일 선택 (키보드 방향키가능)

단, 검색어 입력 후 엔터 시(검색창 깜빡이 사라짐) 키보드 방향키로 조작하는경우 선택 값 상관없이 이동

Expand All: 전체 하위폴더 열기(파일이 많은 경우 One Level 이용)

Expand One Level: 한 depth 씩 열리게 됨

Collapse All: 초기화면(루트에서 한 단계 열린 상태)

 

아래줄을 보면 View States가 있다.

이 기능을 넣은 이유가 매일 출근해서 폴더를 펼치는게 너무 귀찮은것이다..

그래서 현재 폴더가 열린 상태를 저장하려고 만들게 되었다.

Save State를 누르고 이름을 입력하면

 

 

이렇게 내가 열어 둔 상태로 로드가 된다!

또 이런 상태가 여러개 있을 수도 있어서

 

 

우클릭을 하면 저렇게 나온다. 저 설정을 해두면 VS Code 시작 시 초기화면이 저 설정값으로 적용된다.

 

설정 된 것을 초기화 하고 싶으면 설정 된 값에서 우클릭 후 Clear 선택 하면 Default(루트에서 한 단계)로 적용된다.

삭제를 원하면 우측에 x를 누르면 된다.

 

그리고 외부에서 파일을 생성 시 제대로 적용되지 않는 문제가 있었다. 이건 새로고침 버튼으로 해결했다.

이렇게 외부 복사 시 폴더가 파일로 표시된다 내부에서 생성 시는 괜찮은데 외부가 문제라...

이건 나중에 차차 업데이트를 해야 할 것 같다.

어쨌든 reload버튼을 누르면 제대로 표시된다! 그리고 폴더가 아닌 파일들은 외부에서 생성되도 제대로 되는 듯 하다.

(폴더만 문제..)

 

업데이트로 현재는 해결 됨 !

 

당 연 히

잘라내기 복 붙 삭제 다중선택 Ctrl선택 Shift선택 기본적인 기능은 구현되어있다.

 

이렇게 마우스를 가져다대면 미리보기도 나온다

설정에서 줄 개수나 preview on/off 설정이 가능하다

 

 

검색 시 선택되는 highlight color나

에디터에서 파일 선택 시 위치를 따라가는 기능도 구현되어 있어 한층 편하게 코딩이 가능할 것이라고 예상된다!

 

그 밖에는 확장프로그램 readme.md에 정리해두었으니 참고하면 좋다.

 

많이 이용해주시고 버그나 문의도 제보해주시면 감사드리겠습니다.

 


 

 

vscode에서 온 메일..

요약하면 '비슷한 이름과 아이콘을 가진 확장프로그램이 있으니 2월 3일까지 바꿔라'

라고 왔네요 ㅜㅜ

하는 수 없이 이름과 아이콘 수정...

개발보다 이런게 제일 어렵다.

 

https://marketplace.visualstudio.com/items?itemName=kmin.intellij-explorer-with-file-icons

intellij-explorer-with-file-icons → TreeLens Explorer 로 변경했다.

변경해도 주소 Name에서는 고유 확장 프로그램 ID라서 변경이 안되는 듯 하다.

반응형
반응형

Google 검색 자료를 크롤링 할 일이 생겼지만 구글 내부의 봇 탐지 기능 때문에 어려워졌다.

 

크롤링을 자주 접하고 해보았더라면 다들 한 번 쯤은 겪는 현상이다.

코드적인 실력보다 bot 탐지를 우회하는 여러 방법을 아는 것이 크롤링 실력 향상에 도움이 되는 것이라고 생각한다.

 

우회? 방법이라기 보단 자동화 Chrome을 일반 사용자가 접속하는 것 처럼 위장하는 느낌이다.

즉 완벽한 방법은 아니니 나와 같은 문제를 겪는 중이라면 시도해보는 것도 좋다.

 


 

Chrome 실행 과정 (결과만 보고 보고 싶으신 분들은 맨 아래로)

 

1. Chrome 실행 (launch 부분)

- 실행 시점에 명령어를 전달

--enable-automation
--disable-blink-features=AutomationControlled

 

2. Browser Proceess 생성(browser 객체)

- 실행 환경 관리자 역할

- 옵션 목록 저장

- Renderer 생성 시 그대로 전달

 

3. 탭 열림 → Renderer Process 생성 (browser.newPage())

- 1번에서 전달한 명령어를 Renderer에 그대로 전달받음

- disable-blink는 탭마다 다시 적용됨

 

4. disable-blink 작동

- Renderer Process 시작 후 내부 초기화 시작

  • ① 옵션 읽기
  • ② Blink 초기화 
  • ③ V8 chrlghk
  • ④ Blink, V8 연결

disabled-blink 적용 지점 = Blink 초기화

- 초기화 시 Blink가 체크 하는 부분: "AutomationControlled 확인"

- 현재 HTML, JS, navigator 없는 상태

 

5. Blink가 navigator 환경을 결정

ex) navigator.webdriver의 true/ undefined 여부 결

현재 JS 실행 전, 구조 설계 단계

 

6. V8(JS 엔진) 준비

- V8은 JS 문법 실행

- navigator 접근 시 Blink에게 요청

 

7. WebIDL로 연결

Blink(C++) ↔ WebIDL ↔ V8(JS)

 

JS 에서 navigator 가 보이기 시작

 

8. HTML 로드 → JS 실행

V8은 navigator.webdriver 요청

Blink 입장에서는 첫 명령어를 받은 시점에 disabled처리를 했기 때문에 undefined 반환

8-1. Browser Process
     → google.com으로 HTTP 요청

8-2. 서버 응답
     → HTML 내려옴

8-3. Renderer Process (Blink)
     → HTML 파싱 시작

8-4. <script> 태그 발견
     → V8에서 JS 실행

 

이후

  • DOM 생김
  • window, document 접근 가능⊙
  • navigator 접근 가능

※ 정리

chrome.exe 실행
 → 옵션 전달
 → Browser Process
 → Renderer Process
 → Blink 초기화 (disable-blink 적용)
 → navigator 구조 결정
 → V8 초기화
 → JS 실행

 

frontend 개발자라면 이해하기 좀 더 수월 할 듯 하다.

 

어쨌든 주요 포인트는 bot 탐지를 우회하는 방법이다 위와 같이 첫 실행 옵션에서 설정을 해주면 우회가 가능하다는 것을 알 수 있다.

 


 

 

◈ pyppeteer 예시

browser = await launch(
        executablePath=chrome_path,
        headless=False,
        args=[
            '--window-size=1200,800',
            
            # 자동화 제어 플래그 숨김 (navigator.webdriver 탐지 방지)
            '--disable-blink-features=AutomationControlled',
            # "Chrome이 자동화 소프트웨어에 의해 제어되고 있습니다" 정보바 숨김
            # '--disable-infobars',
        ],
        # 자동화 관련 기본 인자 제거 (navigator.webdriver = true 방지)
        # ignoreDefaultArgs=['--enable-automation'],
    )

 

저 코드를 사용해서 실행해보면

 

위와 같이 bot 탐지에 걸리지 않고 Blink에 전달 되었던 대로 접속 되는 것을 볼 수 있다.


이런 것들이 귀찮다?

undetected_chromedriver

import undetected_chromedriver as uc
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys


def main():
    # Chrome 옵션 설정
    options = uc.ChromeOptions()
    options.add_argument('--window-size=1200,800')
    options.add_argument('--lang=ko-KR')

    # undetected-chromedriver 실행
    driver = uc.Chrome(options=options)

    driver.get('https://www.google.com')
    print("Google.com 접속")

 

selenium 기반이지만 이거 사용하시면 됩니다. 웬만한 옵션은 추가 되어 있습니다.

 

[권장사항] executablePath 적용

라이브러리에서 기본 제공하는 Chromium은
User-Agent, JS 엔진 동작, Blink feature set이 구형인 경우가 많아
해당 요소를 기반으로 탐지되는 웹사이트가 간혹 존재

이는 엔진 레벨(브라우저 엔진[Blink·V8·Network stack] 내부 동작 영역)에서 판별되는 영역이므로
JS 우회만으로는 대응이 불가능

executablePath를 지정하지 않을 경우 오래된 Chromium 기반으로 실행될 수 있으므로,
본인 환경에 설치된 최신 Chrome 경로를 지정하여 실행하는 것을 권장

반응형
반응형

local 환경에서 결제 시스템을 구축 중 웹훅을 받기 위해 ngrok 을 사용 중

다음 날 테스트해보니 웹훅이 날라오지 않아 의아하여 문제점을 파악

 

일단 테스트 요청을 보내보니 ngrok 터미널 창에서는 HTTP Requests가 분명 200 으로 날라오지만 전혀 출력은 안되는 상황

 

결과 값에 Invalid Host header 이 나오게 되었다. 분명 어제까진 잘 됐는데?... 뭐지..?

 

그래서 GPT랑 삽질 중

 

원인이 localhost:3000이 외부 접속을 막고 있다는 답변이 나옴

그래서 HOST:0.0.0.0 을 설정하여 모든 연결을 허용하여 똑같이 해보았다.

 

 

결과는 동일함.

애초에 연결이 막혔으면 200이 나오지 않았을까 싶기도 했다.

 

 

일단 Invalid Host header 에러에 대한 설명이다.

  • 이 에러는 개발 서버가 수신 허용하는 Host 헤더와 실제 요청의 Host 헤더가 다를 때 발생합니다. 주로 다음과 같은 상황에서 발생합니다:
    1. localhost 대신 IP 주소 또는 도메인으로 접속할 때
    2. 프록시나 리버스 프록시(Nginx, Caddy 등)를 사용하는 경우
    3. 외부 장치(다른 컴퓨터나 모바일)에서 개발 서버에 접근할 때

 

https://stackoverflow.com/questions/45425721/invalid-host-header-when-ngrok-tries-to-connect-to-react-dev-server

 

Invalid Host Header when ngrok tries to connect to React dev server

I'm trying to test my React application on a mobile device. I'm using ngrok to make my local server available to other devices and have gotten this working with a variety of other applications. How...

stackoverflow.com

ngrok http 8080 --host-header="localhost:8080"

 

위 링크에서 방법을 발견했다.

 

 

ngrok http 8080

 

 

나의 기존 실행 방식은 이러했다. 문제점은 수신 허용 Host가 실제 요청 Host 헤더와 다른 경우로 생각된다.

 

ngrok http 3000 이렇게 단독 실행으로 실행하게 되면 Host의 헤더는 https://xxxx.ngrok-free.app 로 생성된다고 한다.

 

즉, 외부에서 요청은 이렇게 전달된다.

Host: xxxx.ngrok-free.app

 

내부서버 로컬서버는 localhost만 신뢰하기 때문에 이러한 오류가 발생된 것으로 판단된다.

 

 

 --host-header="localhost:8080"

이 코드는 ngrok이 들어오는 요청의 헤더를 로컬서버에서 받을 수 있게 localhost로 강제 설정

 

즉, Browser → ngrok 나의 로컬서버 로 연결될 때 localhost로 들어온 것처럼 처리 하는 것이다.

반응형

'Python > 오류해결' 카테고리의 다른 글

mysql caching_sha2_password에러  (0) 2024.02.28
반응형
자동화 브라우저 다운로드 저장 위치 설정

 

 

  • 현재 상황

- chrome에서는 설정에서 다운로드 저장위치를 설정 할 수 있다.

 

1. 오른쪽 상단 ... 클릭

2. 설정

3. 다운로드에서 경로 설정

해서 내 크롬 프로필에 상태를 저장할 수 있다.

 

위 상태가 나의 프로필에 저장되는것 그래서 그 프로필(계정)으로 다운로드를 진행하면 정해진 폴더로 다운로드가 진행됨.

 



나의 경우 다운로드를 많이 진행해야 하며 서버마다 크롤러를 설정해야하는 상황 그래서 정적인 위치설정은 의미가 없음

(서버마다 저장 위치가 다르기 때문)

 

- 여기서 의문은 서버마다 프로필을 생성하면 되지 않느냐? 라고 물어볼 수 있다.

 

대답은

다운로드의 파일마다 위치를 다르게 하고 싶은 경우에는 프로필을 100개 1000개 생성 하는 건 그냥 노가다이기 때문에 이것도 고려하여 방법을 찾아보았다.

 

 

이것을 해결하기 위해 CDP(Chrome DevTools Protocol)  를 사용

 

https://chromedevtools.github.io/devtools-protocol/

 

Chrome DevTools Protocol

Chrome DevTools Protocol - version tot

chromedevtools.github.io

 

 

python 기준으로 설명하며 chromium 기반의 라이브러리에 사용이 가능하다

 

await page._client.send("Page.setDownloadBehavior", {
    "behavior": "allow",
    "downloadPath": download_folder
})

 

위 코드가 chrome 다운로드 경로 위치를 설정하는 코드이다.

기본 경로로 다운로드 설정이 되어있어도 위 코드가 먼저 동작하도록 되어있다.

downloadPath에 사용자의 환경에 맞게 (파일이름, 번호, 특성 등) 파일위치를 자유롭게 설정할 수 있다.

 

서버마다 위치가 다른 문제도 해결 가능하며,

파일 특성 마다 저장 위치를 유동적으로 다르게 설정할 수 있어 자동화 브라우저를 통해 다중 다운로드를 하는 경우에 유용하게 사용할 수 있는 기능이다.

반응형

+ Recent posts