빠른 시작: 연결하기

이 장에서는 간단한 스크립트를 사용하여 지정된 Mbbrowser 환경을 시작하고 코드를 통해 제어권을 얻는 방법을 시연합니다.

실전 스크립트

start.js라는 이름의 파일을 만들고 다음 코드를 복사하여 넣으세요.

javascript

const puppeteer = require('puppeteer-core');
const axios = require('axios'); // npm install axios 실행 필요

async function startProject() {
  // 1. 구성 정보 설정
  const API_URL = 'http://127.0.0.1:8186'; // ApiServer 주소
  const SESSION_ID = '373808cb37bd63f5f7d92415e736e85f'; // 사용자의 환경 ID

  try {
    // 2. Mbbrowser 인터페이스를 호출하여 환경 시작
    console.log('Mbbrowser 환경 시작 중...');
    const response = await axios.post(`${API_URL}/api/v1/browser/start`, {
      Session_ID: SESSION_ID
    });

    if (response.data.code === 0) {
      // 3. WebSocket 연결 주소 획득
      const wsEndpoint = response.data.data.ws;
      console.log('환경이 성공적으로 시작되었습니다. 제어권을 획득하는 중...');

      // 4. Puppeteer를 사용하여 이 환경에 연결
      const browser = await puppeteer.connect({
        browserWSEndpoint: wsEndpoint,
        defaultViewport: null // 브라우저의 기본 창 크기 사용
      });

      // 5. 새 페이지 열기 및 탐색
      const page = await browser.newPage();
      await page.goto('https://www.mbbrowser.com', { waitUntil: 'networkidle2' });

      console.log('현재 페이지 타이틀:', await page.title());

      // 6. 작업 후 연결 해제 (중지 인터페이스를 호출하지 않는 한 환경은 계속 실행됨)
      await browser.disconnect();
      console.log('자동화 작업 완료!');
      
    } else {
      console.error('환경 시작 실패:', response.data.message);
    }
  } catch (error) {
    console.error('연결 오류:', error.message);
  }
}

startProject();

주요 개념 통찰

axios.post: 먼저 ApiServer에 요청을 보내 환경을 열어야 합니다. 환경이 실행되지 않으면 Puppeteer가 연결할 대상이 없습니다.
wsEndpoint: 성공 시 반환되는 "고유 키"입니다. Puppeteer는 이 주소를 통해 브라우저 내부로 진입합니다.
puppeteer.connect: 새 브라우저를 시작하는 launch가 아니라 기존 브라우저에 연결하는 connect임에 주목하세요. 이것이 핑거프린트 브라우저 자동화의 핵심 차이점입니다.
browser.disconnect: 스크립트 작업이 완료되면 연결을 해제하는 것이 좋습니다. 이렇게 하면 스크립트가 종료되어도 브라우저 창은 데스크톱에 남아 관찰이나 후속 수동 조작이 가능합니다.

TIP

환경 제어권을 얻는 방법을 마스터하셨나요? 다음 장 핵심 API 레퍼런스에서는 브라우저가 더 복잡한 명령을 수행하도록 하는 방법을 배웁니다.

빠른 시작: 연결하기 ​

실전 스크립트 ​

주요 개념 통찰 ​

빠른 시작: 연결하기

실전 스크립트

주요 개념 통찰