LeapcellでPuppeteerアプリをデプロイする

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

以下の解決策で問題が解決しない場合は、Leapcell Discordコミュニティにご参加ください。

Join Discord

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

情報

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

1. GitHubでpuppeteer-crawlerをフォークする

リポジトリ: puppeteer-crawler

以下は、ウェブページのスクリーンショットを生成する簡単なPuppeteerスクリプトです。

const express = require('express');
const app = express();
// ブラウザ自動化のためのPuppeteerをインポート
const puppeteer = require('puppeteer');
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 {
    // 特定の引数を使ってヘッドレスChromeブラウザを起動
    browser = await puppeteer.launch({
      headless: true, // ブラウザをヘッドレスモードで実行
      args: [
        '--single-process',
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-gpu',
        '--no-zygote',
        '--disable-dev-shm-usage',
      ],
      // Chromeの安定版を使用
      // 既定のパスが機能しない可能性があるため、Chrome実行可能ファイルへの特定のパスを使用します
      // Chrome実行可能ファイルをダウンロードして、プロジェクトディレクトリに配置する必要があります
      executablePath: './google-chrome-stable',
    });
    // 新しいブラウザページを作成
    const page = await browser.newPage();
    // 指定されたURLに移動し、ネットワークがアイドル状態になるまで待機
    await page.goto(url, { waitUntil: 'networkidle2', timeout: 0 });
    // ページのスクリーンショットを撮る
    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}`);
});

前提条件

アプリケーションを実行する前に、Puppeteer環境を準備する必要があります。そのためには、以下のスクリプトを実行します。

sh prepare_puppeteer_env.sh

これにより、以下が行われます。

Puppeteerとその依存関係をインストールします（Chromiumはダウンロードしません。Google Chromeを使用します）。
Google Chromeをお使いの環境にインストールします。
Puppeteerを実行するために必要な依存関係を設定します。

プロジェクト構造

.
├── LICENSE                           # プロジェクトのライセンスファイル
├── package.json                      # Node.jsプロジェクトのメタデータと依存関係が含まれています
├── prepare_puppeteer_env.sh           # Puppeteer環境をセットアップするためのスクリプト
└── src
    ├── app.js                        # ExpressとPuppeteerを使用したメインアプリケーションのエントリポイント
    └── views
        ├── error.ejs                 # 何か問題が発生した場合に表示されるエラーページテンプレート
        ├── partials
        │   └── header.ejs            # ページ間で共有されるヘッダーテンプレート
        └── success.ejs               # スクレイピングされたリンクを表示する成功ページテンプレート

アプリケーションの実行

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

npm start

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

`prepare_puppeteer_env.sh` の説明

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

#!/bin/bash

# コマンドがゼロ以外のステータスで終了した場合、すぐに終了します
set -e

# --- 1. 共通設定 ---
# バンドルされたChromiumをダウンロードせずにPuppeteerをインストール
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install puppeteer

# aptリストを更新し、両方のブラウザに必要な共通フォントとライブラリをインストールします
echo "INFO: Installing common fonts and libraries..."
apt-get update
apt-get install -y \
    fonts-ipafont-gothic \
    fonts-wqy-zenhei \
    fonts-thai-tlwg \
    fonts-kacst \
    fonts-freefont-ttf \
    libxss1 \
    --no-install-recommends

# --- 2. アーキテクチャに基づいてブラウザをインストール ---
ARCH=$(dpkg --print-architecture)
echo "INFO: Detected architecture: $ARCH"

if [ "$ARCH" = "amd64" ]; then
    # amd64（x86_64）アーキテクチャの場合、Google Chromeをインストールします
    echo "INFO: Installing Google Chrome for amd64..."
    apt-get install -y wget gnupg
    wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
    echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
    apt-get update
    apt-get install -y google-chrome-stable --no-install-recommends
    BROWSER_EXEC="google-chrome-stable"

elif [ "$ARCH" = "arm64" ]; then
    # arm64アーキテクチャの場合、Chromiumをインストールします
    # Google Chromeはarm64では利用できないため、オープンソースバージョンのChromiumをインストールします
    echo "INFO: Installing Chromium for arm64..."
    apt-get install -y chromium --no-install-recommends
    BROWSER_EXEC="chromium"

else
    echo "ERROR: Unsupported architecture: $ARCH" >&2
    exit 1
fi

# --- 3. クリーンアップと検証 ---
# イメージサイズを小さくするために、aptキャッシュをクリーンアップします
echo "INFO: Cleaning up apt cache..."
rm -rf /var/lib/apt/lists/*

# インストールされているブラウザ実行可能ファイルのパスを見つけます
chrome_path=$(which "$BROWSER_EXEC")

# ブラウザが正常にインストールされたかどうかを確認し、実行可能ファイルを移動します
if [ -n "$chrome_path" ]; then
    echo "INFO: Browser executable found at: $chrome_path"
    
    # --- START: MODIFICATION ---
    # arm64では、JSコードとの互換性のために「chromium」の名前を「google-chrome-stable」に変更します。
    # amd64では、これは単に「google-chrome-stable」を現在のディレクトリに移動するだけです
    mv "$chrome_path" ./google-chrome-stable
    echo "INFO: Moved executable to ./google-chrome-stable"
    # --- END: MODIFICATION ---

else
    echo "ERROR: Browser executable '$BROWSER_EXEC' not found in PATH." >&2
    exit 1
fi

echo "✅ Setup complete. The browser executable is now available at ./google-chrome-stable"

PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install puppeteer: これにより、Google Chromeが代わりに使用されるため、ChromiumをダウンロードせずにPuppeteerがインストールされます。
後続のコマンドは、システムパッケージリストを更新し、必要なツール（wgetやgnupgなど）をインストールし、Google ChromeをインストールするためのGoogleの署名キーとリポジトリを追加します。
apt-get install -y google-chrome-stable: これにより、Puppeteerがブラウザで適切に実行されるようにするために、Google Chromeと必要なフォントおよびライブラリがインストールされます。
次に、スクリプトはインストールされた google-chrome-stable 実行可能ファイルを見つけて現在のディレクトリに移動し、Puppeteerで使用できるようにします。

2. Leapcellダッシュボードでサービスを作成し、リポジトリを接続する

Leapcellダッシュボードにアクセスし、New Serviceボタンをクリックします。

「New Service」ページで、フォークしたばかりのリポジトリを選択します。

ヒント

リポジトリにアクセスするには、LeapcellをGitHubアカウントに接続する必要があります。

GitHubに接続するには、これらの手順に従ってください。

接続されると、リポジトリがリストに表示されます。

3. サービス作成時に以下の値を入力する

情報

PuppeteerにはヘッドレスChromiumブラウザが必要なため、依存関係をインストールする必要があります。インストールコマンドを個別に実行することをお勧めします。

最終的なインストールコマンドは次のとおりです。

sh prepare_puppeteer_env.sh && npm install

この例では、Expressアプリを使用してPuppeteerの操作を制御します。開始コマンドは npm run start です。

Field	Value
Runtime	Node.js (任意のバージョン)
Build Command	`sh prepare_puppeteer_env.sh && npm install`
Start Command	`npm run start`
Port	`8080`

これらの値を対応するフィールドに入力します。

4. アプリにアクセスする

デプロイされると、デプロイメントページに foo-bar.leapcell.dev のようなURLが表示されます。ドメインにアクセスしてアプリケーションをテストします。

継続的デプロイメント

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

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

1. GitHubでpuppeteer-crawlerをフォークする​

前提条件​

プロジェクト構造​

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

prepare_puppeteer_env.sh の説明​

2. Leapcellダッシュボードでサービスを作成し、リポジトリを接続する​

3. サービス作成時に以下の値を入力する​

4. アプリにアクセスする​

継続的デプロイメント​