PhantomJS Screenshot Server on Heroku

Shinichi Tomita@stomita

PhantomJS Screenshot Server with Node.js, Socket.IO, and AWS S3

enqueue

(page_url)

connect

wait

dispatch

(page_url, sign)

render

open(page_url)

upload

(image_file, sign)notify

(page_url, image_url)

wait

.

.

.

(image_url)

(image_file)

Web Page to Capture

(page) (page)

Socket.IO

Web Server (Node.js)

• Socket.IO server

• request channel (clients: browsers)

- enqueue screenshot page URL

• render channel (clients: PhantomJS)

- dispatch page rendering work

- receive rendering result image URL

• Create S3 signature for browser post upload

Screenshot Server (PhantomJS)

• “Screenshot Server” => “Socket.IO Client”

• Run on PhantomJS buildpack(https://github.com/stomita/heroku-buildpack-phantomjs)

• Procfile:

renderer: phantomjs screenshot.js $PUSH_SERVER_URL

• Scaling server instance

$ heroku ps:scale renderer=4

Image Server (AWS S3)

• Storing rendered screenshot image file

• Directly uploaded from PhantomJS

- Browser Post upload (http://aws.amazon.com/articles/1434)

Reference

• Source:

- https://github.com/stomita/heroku-screenshot

• Deployed:

- http://heroku-screenshot-nodejs.herokuapp.com