Heroku에서 node-canvas 사용하기

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에서 토출된 다음과 같은 이미지가 표시되면 무사히 완료됩니다.



DEMO : htps : // 여 CKY-E Y REE-7538. 어리석은 p. 코m/