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

Other languages:English|日本語|한국어|Deutsch

아래 방법으로 문제가 해결되지 않으면 Leapcell Discord 커뮤니티에 참여하여 추가 지원을 받으세요.

Join Discord

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

정보

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

1. GitHub에서 Playwright Crawler를 포크하세요

Repo: Playwright Crawler (Node.js)

Python을 사용하는 경우 이 버전을 사용해 보세요: Playwright Crawler (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');
// 뷰 디렉토리 설정
app.set('views', __dirname + '/views');

// body-parser를 사용하여 폼 데이터 파싱
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

이렇게 하면 다음이 수행됩니다.

지정된 버전으로 Playwright 및 해당 종속성 (Chromium 포함)을 설치합니다.
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에는 Chromium, 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이 표시됩니다. 도메인을 방문하여 애플리케이션을 테스트합니다.

지속적인 배포

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

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

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

전제 조건​

프로젝트 구조​

애플리케이션 실행​

prepare_playwright_env.sh에 대한 설명​

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

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

4. 앱에 액세스​

지속적인 배포​