リモートでPuppeteerを起動してローカルのブラウザを操作する

VSCodeのリモート開発機能が便利すぎて、手元のMac上でWebサーバーやDocker、VMなどを稼働させる機会がめっきり減りました。

このままMacはデスクトップアプリケーションを動かすだけのシンクライアントにしようと考えてます。そして各種開発ツールのARM対応が進行中のM1をもう買っちゃう！

その中で解決したかった課題のひとつが、headlessではないPuppeteerをどうするかでした。ブラウザGUIを普通に起動しておき、自動操縦の過程を見たり、フロントエンドをデバッグしたいことがあります。

開発サーバー上でで Node.js + Puppeteer を動かして、ローカル(Mac)のブラウザを操作する方法です。

SSHポートフォワードで解決

何の変哲もない方法ですが、

1. リモートデバッグポートを開いてブラウザを起動する。
2. リモートデバッグポートへのトンネルを掘って開発サーバーに接続する。
3. 開発サーバーからトンネルを経由してブラウザを操作する。

具体的には

~/.ssh/configで開発サーバー接続時にポート19222のリモートトンネルを掘っておきます。

Host dev
  RemoteForward 19222 localhost:19222

次に Chrome や Chromium を --remote-debugging-port 19222 で起動します。

/Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=19222

サーバー上で Puppeteer を使います。このとき、 launch ではなく connect でローカルのブラウザに接続します。

const Puppeteer = require('puppeteer-core')

async function main() {
  const browser = await Puppeteer.connect({
    browserURL: 'http://localhost:19222',
  })
  const page = await browser.newPage()
  await page.goto('https://www.ideamans.com/')
}

main()

予定通り動いたよというレポートと、自分用メモでした。