CentOS7 puppeteerを実行してスクリーンショット画像を作成する

検証環境

検証日時

  • 2018/12/20

Node.jsのインストール

yum install -y gcc-c++ make
curl -sL https://rpm.nodesource.com/setup_8.x | bash -
yum install -y nodejs

2行目はcurlの実行結果を標準入力としてbashコマンドの引数に渡しています。「setup_8.x」はシェルスクリプトなので、bashコマンドの引数に渡すことでスクリプトが実行されます。*1 *2

Chromiumのインストール

yum install -y unzip

mkdir /home/chromium
cd /home/chromium
yum install -y git
git clone https://github.com/scheib/chromium-latest-linux .
./update.sh

update.shで最新のChromiumのzipをダウンロードしています。

unzipコマンドでzipを解凍したあと、latestディレクトリと解凍したディレクトリを紐付けるシンボリックリンクを作成します。*3

Chromiumの周辺パッケージをインストール

yum install -y pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc

フォントファイルなど。これらのパッケージをインストールすることで、puppeteerでスクリーンショット画像を作成したとき日本語が文字化けせずに表示されます。*4

puppeteerのインストール

mkdir /home/puppeteer
cd /home/puppeteer
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
npm install -y puppeteer 

実行ファイルを作成

/home/puppeteer/index.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({executablePath: '/home/chromium/latest/chrome', args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://hatenablog.com/');
  await page.screenshot({path: 'example.png', fullPage: true});

  await browser.close();
})();

node /home/puppeteer/index.js

index.jsを実行すると、はてなブログのトップページのスクリーンショット画像(/home/puppeteer/example.png)が作成されます。*5