過去に2回ほどGAE/Nodeの記事 これ と これ を書きましたが、もともとはこのHeadless ChromeをAppengine上で利用したかったのでそれを試したかったため。
Headless Chromeを利用することで、Webページのスクリーンショットだったり、JavaScriptが動いていないとデータの取得が難しいSPA的なページのクローリングを行ったりすることができる。
基本的には こちら のドキュメントをなぞって進めます。
というわけで早速スクリーンショット取得を試してみましょう！
node projectの初期設定を行う
nodeのプロジェクトを作成するディレクトリへ移動し、以下のコマンドを実行します。
npm init
基本的にはすべて エンター で進めて良いと思います。
npm startのスクリプトを追加する
以下の値を package.json 内に追加します
"scripts": { "start": "node app.js" }
expressとpuppetterを依存モジュールとして追加する
以下のコマンドを実行し、インストールされるのを待ちます。
npm install express puppeteer --save
app.jsファイルを作成し処理を記述する
app.js ファイルを作成し、以下の内容を記述します
const express = require('express'); const puppeteer = require('puppeteer'); const app = express(); app.use(async (req, res) => { const url = req.query.url; if (!url) { return res.send('Please provide URL as GET parameter, for example: <a href="/?url=https://example.com">?url=https://example.com</a>'); } const browser = await puppeteer.launch({ args: ['--no-sandbox'] }); const page = await browser.newPage(); await page.goto(url); const imageBuffer = await page.screenshot(); browser.close(); res.set('Content-Type', 'image/png'); res.send(imageBuffer); }); const server = app.listen(process.env.PORT || 8080, err => { if (err) return console.error(err); const port = server.address().port; console.info(`App listening on port ${port}`); });
ローカルでテスト実行する
以下のコマンドを実行し、ローカルでテスト用サーバを起動します。
npm start
起動したコンテンツには http://localhost:8080/?url=https://example.com という形のURLでアクセスします。
キャプチャした画像が画面に表示されれば成功です。
作成したアプリケーションをデプロイする
デプロイする際には app.yaml が必要です
Headless Chromeを利用する場合には多くのメモリを必要とするため、以下のように instance_class を指定することが推奨されているようです。
ただし、インスタンスクラスを上げることで無料枠が減るので注意しましょう。
runtime: nodejs8 instance_class: F4_1G
Appengineにデプロイします
app.yaml が配置されたディレクトリで以下のコマンドを実行します。
gcloud app deploy --project {PROJECT_ID}
デプロイしたサービスを確認する
以下のコマンドを実行するとブラウザが起動します
gcloud app browse --project {PROJECT_ID}
http://YOUR_PROJECT_ID.appspot.com/?url=https://example.com のようにアクセスすると、example.comにアクセスしたスクリーンショットが表示されます。
これでいろいろ楽しいことができそう！
enjoy!
