はじめに

信頼性の高いスクリーンショットサービスを構築することは、見た目以上に困難です。私たちが SiteSnapshot を始めたとき、Puppeteerのインスタンスをいくつか立ち上げるだけで済むと思っていました。しかし、それは間違いでした。

課題

最新のウェブページのレンダリングは、リソースを大量に消費します。

• ヘッドレスブラウザにおけるメモリリーク。
• タイムアウトやゾンビプロセスの処理。
• 複数のリージョンにまたがる水平スケーリング。

この記事では、私たちがこれらの問題をどのように解決したかを掘り下げます。

アーキテクチャ

私たちは、モノリシックなCronベースのシステムから、分散ワーカーモデルへと移行しました。

// ワーカーキュー処理の例
async function processQueue(jobId) {
  const browser = await getBrowserInstance();
  try {
    const page = await browser.newPage();
    await page.goto(job.url);
    await page.screenshot({ path: job.path });
  } finally {
    await browser.close();
  }
}

主要コンポーネント

1. Queue Manager: ジョブを公平に分散します。
2. Worker Nodes: スキャンを実行するステートレスなコンテナです。
3. Storage Layer: メタデータにはSupabase、画像にはS3を使用します。

結論

スケジューラーを実行層から分離することで、99.9%の信頼性を達成しました。

サイトを視覚的に監視したいですか？ 今すぐ無料で始めましょう。