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

---

追記: 2020/10/13

久しぶりに触ってみたら動かず、躓いてしまったので更新しました。

- [動かない場合](#%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E8%BF%BD%E8%A8%98-20201013)

---


# はじめに

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](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md)


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

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

```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
```


# 参考サイト

- [CentOS7にChromeをインストール](https://qiita.com/phos/items/b9884be437cdc3b34c59)
- [CentOSへ最新のNode.jsをインストールする](http://d.hatena.ne.jp/xlc/20170910/1505010764)
- [ヘッドレス Chromeを使ってみる](https://blog.e2info.co.jp/2017/10/06/headress-chrome/)