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

[追記]

Windows 11では、inuxのGUIアプリをシームレスに利用できる「WSLg」という機能が追加されます。Puppeteerに内蔵されているchromiumも X環境を構築しなくても起動できるようになります。

puppeteer内蔵のchromiumも headless:false で普通に開く。
個人的にはこれが特にありがたいかな。
VcXsrvを使うより気軽に使えてデバッグしやすくなった。
イメージビューアーなんかもWSLから開けるのよい。
ちょっとしたことだけど、作業効率は上がりそう。 pic.twitter.com/6EwQbCu3jt
— 清水正行 (@_shimizu) July 4, 2021

以下、元の記事。

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

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

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

参考：Installing Puppeteer on an Ubuntu AWS EC2 Instance

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

sudo apt update && sudo apt install -y gconf-service libgbm-dev libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

sudo apt update && sudo apt install -y gconf-service libgbm-dev libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

・puppeteerのインストール

npm install puppeteer --save

1	npm install puppeteer --save

これでヘッドレスモードでの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側にクライアントをインストールする

sudo apt update && sudo apt upgrade -y
sudo apt install -y xfce4-terminal xfce4-session xfce4

1 2	sudo apt update && sudo apt upgrade -y sudo apt install -y xfce4-terminal xfce4-session xfce4

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

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0.0

1	export DISPLAY=$(cat /etc/resolv.conf \| grep nameserver \| awk '{print $2}'):0.0

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

テスト用サンプルコード

const puppeteer = require('puppeteer');


async function run() {
    const browser = await puppeteer.launch({
        headless: false,
        args: ['--no-sandbox',"--lang=ja"]
    });
    const page = await browser.newPage();
    await page.goto('https://google.com');
    await page.screenshot({
        path: 'example.png'
    });

    //await browser.close();
}

run();

const puppeteer = require('puppeteer');

async function run() {

const browser = await puppeteer.launch({

headless: false,

args: ['--no-sandbox',"--lang=ja"]

});

const page = await browser.newPage();

await page.goto('https://google.com');

await page.screenshot({

path: 'example.png'

});

//await browser.close();

}

run();

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

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

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

テスト用サンプルコード

実行結果

投稿者: shimizu