Vercel2026-06-18
【クラウドインフラ】サーバーレス環境でPuppeteerを安定スケーリングする、Vercel Sandboxの活用法
サーバーレス環境と「ブラウザオートメーション」の相性の悪さ
B2B業務の自動化（RPA）において、外部のSaaS管理画面からCSVデータをダウンロードしたり、特定の商用ポータルサイトへログインして情報を登録したりする「ブラウザの自動操作（Headless Browser Automation）」は避けて通れません。
これらを構築する際、TypeScript開発者であれば Puppeteer や Playwright を利用するのが一般的です。しかし、Vercelなどのサーバーレス（FaaS）環境でこれらを動かそうとすると、以下のような深刻な制約に直面します。
- タイムアウト制限: 通常のAPIルート（Serverless Functions）は最大秒数（例: ホビーで10秒、プロで15秒〜最大30分）の実行上限があり、数分かかる重いクローリング処理は途中で強制終了されます。
- バイナリサイズとメモリの枯渇: Chromium（ブラウザ本体）は起動するだけで数百MBのメモリを占有するため、ファンクションのメモリ上限（通常1024MB〜3008MB）を圧迫し、ランタイムエラー（Out of Memory）を誘発します。
- コールドスタート: 毎回ブラウザインスタンスを白紙からロードするため、初回アクセス時の遅延が大きく、リアルタイムな処理に耐えられません。
これらの問題を解決するために、Vercelが提供する分離・永続実行環境である Vercel Sandbox 上でブラウザを動かすという設計が極めて有効です。
2. 課題解決のビフォー・アフター
| 項目 | 通常のServerless Functions（Before） | Vercel Sandbox（After） |
|---|---|---|
| 実行時間 | 10秒〜数分でタイムアウトが発生 | タイムアウトのない長時間のバッチ処理が稼働可能 |
| ブラウザメモリ | メモリ制限により同時に複数タブを起動できない | 割り当てられた独立リソースで安定動作 |
| 起動オーバーヘッド | コールドスタートで毎回起動が遅延 | バックグラウンドでコンテナがウォームアップ状態を維持 |
| IPローテーション | クラウドプロバイダの固定IP制限 | Sandbox固有のIPまたはプロキシ割り当てで回避 |
3. 具体的な実装例：Vercel SandboxでのPuppeteer実行
Vercel Sandbox（永続Node.jsコンテナ）を活用し、安全にスクレイピングや画面操作を実行するためのコアとなるTypeScriptコード例です。
import puppeteer from "puppeteer-core";
// Vercel Sandbox環境下での実行を想定
export async function runBrowserAutomationTask(targetUrl: string) {
let browser = null;
try {
// ローカルまたはSandbox上の安定したChromiumバイナリを指定
browser = await puppeteer.launch({
args: [
"--no-sandbox",
"--disable-setuid-sandbox",
"--disable-dev-shm-usage", // メモリのオーバーフローを回避
"--disable-gpu",
],
executablePath: process.env.CHROMIUM_PATH || "/usr/bin/chromium-browser",
headless: true,
});
const page = await browser.newPage();
// ビューポートサイズやタイムアウト値を明示
await page.setViewport({ width: 1280, height: 800 });
await page.setDefaultNavigationTimeout(60000); // 60秒の猶予
console.log(`Navigating to: ${targetUrl}`);
await page.goto(targetUrl, { waitUntil: "networkidle2" });
// 特定の要素のローディングを待つ
await page.waitForSelector("#dashboard-report", { timeout: 15000 });
// ポータル内のデータを取得
const reportData = await page.evaluate(() => {
const title = document.querySelector("h1")?.innerText;
const count = document.querySelector(".report-count")?.textContent;
return { title, count };
});
return { success: true, data: reportData };
} catch (error) {
console.error("Browser automation failed:", error);
return { success: false, error: (error as Error).message };
} finally {
if (browser) {
await browser.close();
}
}
}
4. HadayaLabのブラウザオートメーション開発
HadayaLabでは、手作業でログインと転記を行っている「ポータル操作」「データ回収」を、完全に人の手を介さない自動処理（Touchless）へ変換する支援を行っています。
- SaaS管理画面のクローリング: 外部の発注システムや請求ポータルから、毎朝自動でPDF請求書やCSVデータを取得。
- Google Drive / DB連携: 取得したデータをGoogle DriveやUpstash Redisへ自動的に流し込み、SlackやDiscordへ完了レポートを送信。
- Vercel Sandboxを用いたスケーリング設計: アクセス集中時にも、インフラが自動的にスケールアウトする安全なサーバーレスコンテナ設計。
人の手でルーティンワークとして行っているブラウザ操作をお持ちの企業様は、ぜひHadayaLabの「ブラウザ自動化プラン」をご相談ください。