追記: 2020/10/13
久しぶりに触ってみたら動かず、躓いてしまったので更新しました。
はじめに
headless chromeを使ってスクショを撮るまでの記録になります。
- サーバーのOSはCentOS7で試した
- puppeteerというライブラリを使用
- nodejsはバージョン8を使用
headless chromeではXvfbなどの仮想ディスプレイは必要ありません。
--headlessオプションを指定するだけでサーバー上でも動かす事ができました。
ちなみに、googleの方が言ってるようにやると失敗しました。
https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja
現在ではChromeLauncherが削除された？
知っている方いたら教えて欲しいです。
ドキュメント
ライブラリのインストール
ライブラリのインストールにはyarnを使っています。
キャッシュを使ってるので早いらしいけど、実際の所どうなのでしょうか。
npmが良ければそちらでも問題ありません。
chromeを動かす為の準備
実際にCentOS7で動かす為に色々インストールしていきます。
とりあえずyumでインストールしたパッケージをアップデート
$ yum update
rootじゃないとダメ！と言われたらsudoで実行するか、最悪updateしなくても問題ないかと思います。
nodejsのインストール
バージョン8を使用するのですが、yumでインストールしようとすると安定版がインストールされるのでまずは下記を実行してください。
$ curl -sL https://rpm.nodesource.com/setup_8.x | bash -
場合によってはsudoが必要になるかもしれません。その場合は↓
$ curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
これが完了したらnodejsをインストールします。
$ yum install nodejs
インストールができたか確認しましょう。
$ node --version
$ npm --version
バージョンが表示されたら問題ありません。
yarnのインストール
$ npm install -g yarn
chromeを動かす為のパッケージをインストール
今回はpuppeteerを使います。
ファイルを置くディレクトリに移動して下記を実行しましょう。
$ yarn add puppeteer
すると、node_modulesというディレクトリが生成されてその中にパッケージがインストールされました。
chromeをインストール
手動で/etc/yum.repos.d/の中にgoogle.chrome.repoというファイルを追加します。
ファイルの中身は下記のようにしてください。
[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
ファイルの追加が完了したらchromeをインストールします。
$ yum search google-chrome
これでインストールできる物を探すと
google-chrome-beta.x86_64 : Google Chrome (beta)
google-chrome-stable.x86_64 : Google Chrome
google-chrome-unstable.x86_64 : Google Chrome (unstable)
こんな風に色々出てくると思います（人によって微妙に違うかも）。
この中からgoogle-chrome-stableをインストールしましょう。
$ yum install google-chrome-stable
これでchromeのインストールは完了です。
ですが、このままだとスクショを撮った時などにページ内容が文字化けするはずなので、フォントもインストールしちゃいます。
$ yum install ipa-gothic-fonts
chromeのインストールでエラーが出た場合
Error: Package: google-chrome-stable-66.0.3359.139-1.x86_64 (google-chrome)
Requires: libappindicator3.so.1()(64bit)
もし上記のようなエラーが出て失敗した場合はメッセージ通りlibappindicatorをインストールします。
$ yum install epel-release
$ yum install libappindicator
これでchromeがインストールできるようになるかと思います。
ここまできたら動かしてみましょう
まずはnode_modulesがあるディレクトリに移動します。
そして、サンプルとして下記のjsファイルを用意しましょう。
const puppeteer = require("puppeteer"),
url = "https://www.yahoo.co.jp/";
puppeteer.launch({
args: [
'--no-sandbox',
'--disable-gpu'
],
ignoreHTTPSErrors: false,
headless: true, // ローカルの場合は false を指定する事で動作を確認できます
slowMo: 300
}).then(async browser => {
try {
const page = await browser.newPage();
await page.setViewport({width: 1200, height: 800});
await page.goto(url);
var pageSize = await page.evaluate(() => {
return {width: document.body.scrollWidth, height: document.body.scrollHeight};
});
await page.screenshot({
path: "./test.jpg",
type: "jpeg",
clip: {
x: 0,
y: 0,
width: pageSize.width,
height: pageSize.height
}
});
browser.close();
} catch(e) {
console.log("Error: Please check your code.");
console.log(e);
await browser.close();
process.exit(200);
}
});
このファイルを設置したらあとは実行するだけです。
$ node index.js
これでyahooのスクショが保存されるはず。。。
動かない場合（追記: 2020/10/13）
VPSサーバーにOSをインストールしなおして、動かそうと思ったら全く動かなくなりました。
同じような状態になった場合、依存関係をインストールすることで解決できるかもしれません。
puppeteerのトラブルシューティングに記載されていました。
こちらに記載されているとおりに、以下のパッケージをインストール。
$ yum install -y alsa-lib.x86_64 atk.x86_64 cups-libs.x86_64 gtk3.x86_64 ipa-gothic-fonts libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXrandr.x86_64 libXScrnSaver.x86_64 libXtst.x86_64 pango.x86_64 xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-fonts-cyrillic xorg-x11-fonts-misc xorg-x11-fonts-Type1 xorg-x11-utils
これらのインストールが完了したら、nssをアップデート。
$ yum update -y nss