追記: 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が削除された？
知っている方いたら教えて欲しいです。

ドキュメント

puppeteer

ライブラリのインストール

ライブラリのインストールには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.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ファイルを用意しましょう。

index.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のトラブルシューティングに記載されていました。

https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

こちらに記載されているとおりに、以下のパッケージをインストール。

$ 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

puppeteerを使ってCentOSでheadless chromeを動かす