WSL2でPuppeteer(headless:false)を動かすためのメモ書き

WSL2でPuppeteerを使うための環境設定メモです。

■wsl2(Ubunte)にpuppeteerをインストールする

とりあえず、wslにpuppeteerをインストールします。

参考:npm i -S puppeteer

・必要なライブラリのインストール

・puppeteerのインストール

これでヘッドレスモードでのpuppeteerは動くきますが、headless:false(ヘッドフルモード)で実行するとChromiumが起動できずにエラーがでます。
これだとデバッグがしづらいのでWSL2でヘッドフルモードのChromiumを起動できるようにします。

■wsl2でフルモードのChromiumを実行できるようにする

X環境を構築してWSL2(Ubunte)のGUIアプリケーションを実行できるようにします。

参考:PhpStorm on WSL2でWindowsに依存しない開発環境を作る - レガシー環境から脱却したい

以下は、上記参考サイト「X環境のインストール」の内容ほぼそのままなので、詳細はリンク先でご確認ください。

・ホスト側(Windows)にXサーバソフト(VcXsrv)をインストールする
VcXsrv Windows X Server download | SourceForge.net

VcXsrvを起動して設定する。
1. Multiple windows
2. star a program(端末起動時に実行する)
3. 三か所すべてにチェック
(Disable access control にチェックを入れないとwsl側からの接続に失敗するので注意)
以上でwindows側の設定は終了

・wsl側にクライアントをインストールする

xサーバ(ホスト)のipアドレスを取得してDISPLAYに設定するコマンドを、WSL2側の”.bashrc”に記述する

これで、headless:falseモードでもpuppeteerを実行できるようになりました。

テスト用サンプルコード

実行結果

カテゴリー: App