メインコンテンツへスキップ

LeapcellにPlaywrightアプリをデプロイする (Node.js / Python)

LeapcellにPlaywrightサービスをデプロイして、スクリーンショット、PDFの生成、シングルページアプリのクロール、またはフロントエンドコードのテストの自動化を行うことができます。

情報

続行するには、GitHubアカウントが必要です。お持ちでない場合は、GitHubのウェブサイトで作成できます。

1. GitHubでPlaywright Crawlerをフォークする​

リポジトリ: 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

これにより:

  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               # スクレイピングされたリンクを表示する成功ページテンプレート

アプリケーションの実行​

環境を準備したら、次のコマンドでWebサービスを開始できます。

npm start

サービスはhttp://localhost:8080で利用可能になり、スクレイピングするページのURLを入力できます。そのページのすべてのリンクのリストが返されます。

prepare_playwright_env.shの説明​

このスクリプトは、Playwrightが実行するために必要な環境をセットアップする役割を担います。各行が何をするかの内訳は次のとおりです。

#!/bin/sh

# playwrightとその依存関係をインストール
npx -y playwright@latest install --with-deps chromium

# node modulesをインストール
npm install
  • npx -y playwright@1.50.1 install --with-deps chromium: このコマンドは、Playwrightバージョン1.50.1とその必要な依存関係（Chromiumを含む）をインストールします。これにより、Webスクレイピングタスクの正しい環境が保証されます。
  • 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が表示されます。ドメインにアクセスして、アプリケーションをテストします。

継続的デプロイメント​

リンクされたブランチへのすべてのプッシュは、自動的にビルドとデプロイをトリガーします。失敗したビルドは安全にキャンセルされ、次のデプロイが成功するまで、現在のバージョンがライブのままになります。

継続的デプロイメントの詳細をご覧ください。