Heroku で node-canvas を使って Hello World してみます。
事前準備
事前に Heroku のアカウント取得と Heroku Toolbelt をインストールしてコマンドラインから Heroku コマンドを使えるようにしておきます。
また、ローカルで開発も行えるように Macでnode-canvasをインストールする方法 を参考にローカル環境に Cairo をインストールしておきます。
Node.js でアプリケーションを作るためのひな形を clone する
git clone https://github.com/heroku/node-js-getting-started.git
cd node-js-getting-started
npm install
参考: Getting Started with Node.js on Heroku
アプリケーションを新規作成
heroku create
node-canvas をインストール
npm を使って node-canvas をインストールします。
npm install --save canvas
Cairo をインストールする
node-canvas を利用するためには Cairo が必要となるので、
custom buildpack を使ってインストールするための準備をします。
heroku buildpacks:set https://github.com/ddollar/heroku-buildpack-multi.git
cat << EOF > .buildpacks
https://github.com/mojodna/heroku-buildpack-cairo.git
https://github.com/heroku/heroku-buildpack-nodejs.git
EOF
Hello World するために index.js を書き換えておく
そのままデプロイしても node-canvas が使えるようになったのかがわからないので、プロジェクトルートに置かれている index.js に Node-canvas の処理を書き加えて Hello World ができるようにしておきます。
index.js
var express = require('express');
var app = express();
var Canvas = require('canvas');
var canvas = new Canvas(200,200);
var ctx = canvas.getContext('2d');
ctx.font = '30px Impact';
ctx.rotate(.1);
ctx.fillText("Hello World!", 50, 100);
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
app.get('/', function(request, response) {
response.send('<img src="' + canvas.toDataURL() + '" />');
});
app.listen(app.get('port'), function() {
console.log("Node app is running at localhost:" + app.get('port'));
});
アプリケーションをデプロイする
add .
git commit -m "node-canvas on Heroku"
git push heroku master
アプリケーションを実行する
remote: Verifying deploy... done.
というログが表示されていれば無事でデプロイが完了していますので、アプリケーションを実行させます。
heroku ps:scale web=1
アプリケーションにアクセス
heroku open
ブラウザが立ち上がって,node-canvas から吐出された以下のような画像が表示されていれば無事完了です。
