LoginSignup
14

More than 5 years have passed since last update.

Heroku で node-canvas を使ってみる

Last updated at Posted at 2015-04-20

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

参考: heroku-buildpack-cairo

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 から吐出された以下のような画像が表示されていれば無事完了です。

node-canvas on Heroku

DEMO: https://rocky-eyrie-7538.herokuapp.com/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14