주요 콘텐츠로 건너뛰기

Leapcell에 Playwright 앱 배포하기 (Node.js / Python)

Leapcell에 Playwright 서비스를 배포하여 스크린샷, PDF를 생성하거나, 싱글 페이지 앱을 크롤링하거나, 프론트엔드 코드의 자동화된 테스트를 할 수 있습니다.

정보

계속하려면 GitHub 계정이 필요합니다. 계정이 없으면 GitHub 웹사이트에서 만들 수 있습니다.

1. GitHub에서 Playwright 크롤러를 포크하세요.​

레포지토리: Playwright 크롤러 (Node.js)

Python을 사용하는 경우 다음 버전을 사용해 볼 수 있습니다: Playwright 크롤러(Python)

다음은 Express 서버를 사용하여 작업을 제어하고 웹 페이지의 스크린샷을 생성하는 간단한 Playwright 스크립트입니다.

const express = require('express');
const app = express();
// Playwright의 Chromium 브라우저 가져오기
const { chromium } = require('playwright');
const bodyParser = require('body-parser');
const base64 = require('base64-js');

// EJS를 템플릿 엔진으로 설정
app.set('view engine', 'ejs');
// views 디렉토리 설정
app.set('views', __dirname + '/views');

// body-parser 미들웨어를 사용하여 form 데이터 파싱
app.use(bodyParser.urlencoded({ extended: true }));

// GET 요청 처리 및 초기 페이지 렌더링
app.get('/', (req, res) => {
  res.render('success', {
    url: 'https://news.ycombinator.com',
    screenshot_base64: '',
    links: [],
    page_title: null,
  });
});

// POST 요청 처리하여 스크린샷 생성
app.post('/', async (req, res) => {
  // 폼에서 URL 가져오기, 기본값은 Hacker News
  let url = req.body.url || 'https://news.ycombinator.com';
  // URL이 'http'로 시작하지 않으면 'https://' 추가
  if (!url.startsWith('http')) {
    url = 'https://' + url;
  }

  let browser;
  try {
    // 특정 인수를 사용하여 Chromium 브라우저 실행
    browser = await chromium.launch({
      headless: true,
      args: ['--single-process', '--no-sandbox', '--disable-setuid-sandbox'],
    });
    // 새 브라우저 페이지 만들기
    const page = await browser.newPage();
    // 지정된 URL로 이동
    await page.goto(url);
    // 페이지 스크린샷 찍기
    const screenshot = await page.screenshot();
    // 페이지 제목 가져오기
    const page_title = await page.title();

    // 모든 <a> 태그의 링크 및 텍스트 콘텐츠 추출
    const links_and_texts = await page.evaluate(() => {
      const anchors = document.querySelectorAll('a');
      return Array.from(anchors).map((anchor) => {
        const text = anchor.textContent.replace(/<[^>]*>/g, '').trim();
        return {
          href: anchor.href,
          text: text,
        };
      });
    });

    // 스크린샷을 base64 문자열로 변환
    const screenshot_base64 = base64.fromByteArray(screenshot);

    // 관련 데이터와 함께 성공 페이지 렌더링
    res.render('success', {
      url,
      page_title,
      screenshot_base64,
      links: links_and_texts,
    });
  } catch (e) {
    // 오류 발생 시 브라우저 닫기
    if (browser) {
      await browser.close();
    }
    // 오류 메시지와 함께 오류 페이지 렌더링
    res.render('error', { error_message: e.message });
  } finally {
    // 모든 작업 후 브라우저가 닫혀 있는지 확인
    if (browser) {
      await browser.close();
    }
  }
});

// 포트 설정, 환경 변수 PORT 사용 또는 기본값 8080
const port = process.env.PORT || 8080;
// 서버 시작
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

전제 조건​

애플리케이션을 실행하기 전에 Playwright 환경을 준비해야 합니다. 이렇게 하려면 다음 스크립트를 실행하세요.

sh prepare_playwright_env.sh

이것은 다음을 수행합니다:

  1. 지정된 버전으로 Playwright 및 해당 종속성(Chromium 포함)을 설치합니다.
  2. npm install을 실행하여 필요한 Node.js 모듈을 설치합니다.

프로젝트 구조​

.
├── LICENSE                           # 프로젝트 라이센스 파일
├── package.json                      # Node.js 프로젝트에 대한 메타데이터 및 종속성 포함
├── prepare_playwright_env.sh          # Playwright 환경 설정을 위한 스크립트
└── src
    ├── app.js                        # Express 및 Playwright를 사용하는 메인 애플리케이션 진입점
    └── views
        ├── error.ejs                 # 문제가 발생했을 때 표시되는 오류 페이지 템플릿
        ├── partials
        │   └── header.ejs            # 페이지 간에 공유되는 헤더 템플릿
        └── success.ejs               # 스크랩된 링크를 보여주는 성공 페이지 템플릿

애플리케이션 실행​

환경을 준비했으면 다음 명령으로 웹 서비스를 시작할 수 있습니다.

npm start

이 서비스는 http://localhost:8080에서 사용할 수 있으며 스크랩하려는 페이지의 URL을 입력할 수 있습니다. 해당 페이지의 모든 링크 목록을 반환합니다.

prepare_playwright_env.sh에 대한 설명​

이 스크립트는 Playwright가 실행하는 데 필요한 환경을 설정하는 역할을 합니다. 각 라인이 수행하는 작업에 대한 분석은 다음과 같습니다.

#!/bin/sh

# Playwright 및 해당 종속성 설치
npx -y playwright@latest install --with-deps chromium

# Node 모듈 설치
npm install
  • npx -y playwright@1.50.1 install --with-deps chromium: 이 명령은 Playwright 버전 1.50.1 및 필요한 종속성(Chromium 포함)을 설치합니다. 웹 스크래핑 작업을 위한 올바른 환경을 보장합니다.
  • npm install: package.json에 지정된 Node.js 모듈을 설치합니다.

2. Leapcell 대시보드에서 서비스 생성 후 레포지토리 연결​

Leapcell 대시보드로 이동하여 새 서비스 버튼을 클릭합니다.

"새 서비스" 페이지에서 방금 포크한 레포지토리를 선택합니다.

팁

레포지토리에 접근하려면 Leapcell을 GitHub 계정에 연결해야 합니다.

GitHub에 연결하려면 이 지침을 따르세요.

연결되면 리포지토리가 목록에 나타납니다.

3. 서비스 생성 시 다음 값 입력​

정보

Playwright에는 Chromiun, Webkit 및 Firefox와 같은 브라우저 엔진이 필요하므로 종속성을 설치해야 합니다. 설치 명령을 별도로 실행하는 것이 좋습니다.

다음은 최종 설치 명령입니다:

sh prepare_playwright_env.sh && npm install

이 예제에서는 Express 앱을 사용하여 Playwright 작업을 제어합니다. 시작 명령은 npm run start입니다.

필드값
런타임Node.js (모든 버전)
빌드 명령어sh prepare_playwright_env.sh && npm install
시작 명령어npm run start
포트8080

해당 필드에 이러한 값을 입력합니다.

4. 앱에 접속하기​

배포되면 배포 페이지에서 foo-bar.leapcell.dev와 같은 URL이 표시됩니다. 도메인을 방문하여 애플리케이션을 테스트합니다.

지속적인 배포​

연결된 브랜치에 대한 모든 푸시는 자동으로 빌드 및 배포를 트리거합니다. 실패한 빌드는 안전하게 취소되고, 다음 성공적인 배포까지 현재 버전이 라이브 상태로 유지됩니다.

지속적인 배포에 대해 자세히 알아보세요.

", // Translated markdown content