spatie/browsershotの設定の覚書

このライブラリは、Webページを画像又はPDFに変換します。
背後では、ヘッドレスのGoogle Chromeを扱うPuppeteerを使用しています。

Puppeteerは、JSから実行しますが、BrowsershotをインストールすることによりPHPからヘッドレスChromeを制御することができるようになります。

ここでいくつかはまったので覚書として残しておきます。

用件

下記がインストールされている必要があります。

• Puppeteer ･･･ ChromeまたはChrominiumを制御するNodeライブラリ
• Node7.6.x以降

設定環境

• AWS EC2
• Laravel 6.ｘ
• nvmを使用してnpmをインストール
  ※ここに今回の問題の原因があったのかも…

インストール

細かい説明は割愛します。

npm install puppeteer
composer require spatie/browsershot

使用法

下記のように簡単な記述で使用できるはずですが。。。

use Spatie\Browsershot\Browsershot;

// スクリーンショット
Browsershot::url('https://example.com')->save($pathToImage);

// PDF作成
Browsershot::url('https://example.com')->save('example.pdf');

最初のエラー

まずは下記を実行

Browsershot::url('http://www.yahoo.co.jp')->save('./test.pdf');

すると

The command "PATH=$PATH:/usr/local/bin NODE_PATH=`npm root -g` node '/var/www/vendor/spatie/browsershot/src/../bin/browser.js' '{"url":"http:\/\/www.yahoo.co.jp","action":"pdf","options":{"path":"\./test.pdf","args":[],"viewport":{"width":800,"height":600}}}'" failed.

Exit Code: 127(Command not found)

Working directory: /var/www/html

Output:
================


Error Output:
================
sh: npm: command not found
sh: node: command not found

上記から「npm」と「node」のコマンドが見つからないらしい。。。

色々調べたら下記の3つの方法でnodeのパスが確認できるということが分かったが、どれが本当なのか？

$ npm root -g
/home/ec2-user/.nvm/versions/node/v10.23.2/lib/node_modules

$ npm bin -g
/home/ec2-user/.nvm/versions/node/v10.23.2/bin

$ node
> global.module.paths
[ '/home/ec2-user/.npm/_logs/repl/node_modules',
  '/home/ec2-user/.npm/_logs/node_modules',
  '/home/ec2-user/.npm/node_modules',
  '/home/ec2-user/node_modules',
  '/home/node_modules',
  '/node_modules',
  '/home/ec2-user/.node_modules',
  '/home/ec2-user/.node_libraries',
  '/home/ec2-user/.nvm/versions/node/v10.23.2/lib/node' ]

様々確かめた結果、下記のような設定になった。

Browsershot::url('http://www.yahoo.co.jp')
                   ->setNodeBinary('/home/ec2-user/.nvm/versions/node/v10.23.2/bin/node')
                   ->save('./test.pdf');

そして実行したところ次のエラーが出た

2回目のエラー

local.ERROR: The command "PATH=/var/www/ NODE_PATH='/var/www/node_modules' /home/ec2-user/.nvm/versions/node/v10.23.2/bin/node '/var/www/app/Libs/browser.js' '{"url":"https:\/\/www.google.com\/?hl=ja","action":"pdf","options":{"path":"\/var\/www\/html\/test.pdf","args":["--no-sandbox","--disable-web-security"],"viewport":{"width":800,"height":600}}}'" failed.

Exit Code: 126(Invoked command cannot execute)

Working directory: /var/www/html

Output:
================


Error Output:
================
sh: /home/ec2-user/.nvm/versions/node/v10.23.2/bin/node: Permission denied

nodeを実行する権限が無いらしい…

nodeの実行権限を調べてみる。

$ ls -la /home/ec2-user/.nvm/versions/node/v10.23.2/bin/
合計 40260
drwxrwxr-x 2 ec2-user ec2-user       40  2月  8 08:44 .
drwxrwxr-x 6 ec2-user ec2-user      108  2月  8 08:42 ..
-rwxrwxr-x 1 ec2-user ec2-user 41226208  1月 27 00:59 node
lrwxrwxrwx 1 ec2-user ec2-user       38  2月  8 08:44 npm -> ../lib/node_modules/npm/bin/npm-cli.js
lrwxrwxrwx 1 ec2-user ec2-user       38  2月  8 08:44 npx -> ../lib/node_modules/npm/bin/npx-cli.js

特に問題はない。

一つずつ階層を上がってみる

$ ls -la /home/ec2-user/.nvm/versions/node/v10.23.2/
･･･
$ ls -la /home/ec2-user/.nvm/versions/node/
･･･
$ ls -la /home/ec2-user/.nvm/versions/
･･･
$ ls -la /home/ec2-user/.nvm/
･･･
$ ls -la /home/ec2-user/
･･･

nbsp;ls -la /home/ 合計 0 drwxr-xr-x 5 root root 55 1月 21 09:02 . dr-xr-xr-x 18 root root 257 2月 3 16:29 .. drwx------ 9 ec2-user ec2-user 293 2月 7 11:40 ec2-user

ここで初めて、ユーザーにしか実行権限がない状態を発見する。

確認のため、当フォルダーの「その他」の権限を変更してみる。

$ chmod 705 /home/ec2-user

フォルダの実行権限を変更し、プログラムを実行したところ、エラーがでなかった。

最後の処理が正しいかわからないが、そういうことだったらしい。

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

お問い合わせはこちら