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

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

情報

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

1. GitHubで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とその依存関係をインストールします（Google Chromeを使用するため、Chromiumはダウンロードしません）。
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: 共通フォントとライブラリをインストールしています..."
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: 検出されたアーキテクチャ: $ARCH"

if [ "$ARCH" = "amd64" ]; then
    # amd64 (x86_64)アーキテクチャの場合、Google Chromeをインストール
    echo "INFO: amd64用のGoogle Chromeをインストールしています..."
    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: arm64用のChromiumをインストールしています..."
    apt-get install -y chromium --no-install-recommends
    BROWSER_EXEC="chromium"

else
    echo "ERROR: サポートされていないアーキテクチャ: $ARCH" >&2
    exit 1
fi

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

# インストールされたブラウザ実行ファイルのパスを検索
chrome_path=$(which "$BROWSER_EXEC")

# ブラウザが正常にインストールされたかどうかを確認し、実行ファイルを移動
if [ -n "$chrome_path" ]; then
    echo "INFO: ブラウザ実行ファイルが次の場所にあります: $chrome_path"
    
    # --- 開始: 変更 ---
    # arm64では、JSコードとの互換性のために、'chromium'の名前を'google-chrome-stable'に変更します。
    # amd64では、これは単に'google-chrome-stable'を現在のディレクトリに移動するだけです。
    mv "$chrome_path" ./google-chrome-stable
    echo "INFO: 実行ファイルを./google-chrome-stableに移動しました"
    # --- 終了: 変更 ---

else
    echo "ERROR: ブラウザ実行ファイル'$BROWSER_EXEC'がPATHに見つかりません。" >&2
    exit 1
fi

echo "✅ セットアップが完了しました。ブラウザ実行ファイルは現在、./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ダッシュボードにアクセスし、[新規サービス]ボタンをクリックします。

[新規サービス]ページで、フォークしたリポジトリを選択します。

ヒント

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

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

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

3. サービス作成中に次の値を入力します

情報

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

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

sh prepare_puppeteer_env.sh && npm install

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

フィールド	値
ランタイム	Node.js (任意のバージョン)
ビルドコマンド	`sh prepare_puppeteer_env.sh && npm install`
開始コマンド	`npm run start`
ポート	`8080`

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

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

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

継続的デプロイメント

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

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

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

前提条件​

プロジェクト構造​

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

prepare_puppeteer_env.shの説明​

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

3. サービス作成中に次の値を入力します​

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

継続的デプロイメント​