node.jsをpivotal.ioにデプロイしよう

pivotal.ioのデプロイはgitを使わず、CF CLIという独自ツールを使うので、ちょっと特殊である。
使い方が分からなかったので備忘録メモ。
ローカル環境はCentOS 6.5とする。
 

CF CLIのインストール

参考文献:Set Up Your PWS Account and Download the CF CLI
上記の参考文献を参考にCentOS用のrpmをダウンロードしてインストール。
 

CF CLIにログイン

CentOSの端末から下記の通り入力する。

$ cf login -a https://api.run.pivotal.io
Email: user@example.com
Password: ••••••••

 

manifest.ymlの作成

参考文献:
Tips for Node.js Applications Application Bundling
PaaS基盤「Cloud Foundry V2」内部で使われるBuildpack、Wardenコンテナの仕組みとは?(前編)

デプロイしたいアプリのカレントディレクトリにmanifest.ymlを作成する。
内容は下記の通り。

---
applications:
- name: my-app
  buildpack: https://github.com/cloudfoundry/heroku-buildpack-nodejs.git
  command: node server/app.js

my-appはアプリ名である。urlにも使われるので他のアプリとかぶらない名前を付ける必要がありそう。
buildpackはこのURLで固定。
commandはnodeで立ち上げたいソースコードを指定。
 

.cfigunoreの作成

デプロイに含めたくないファイルがある場合は.cfigunoreに書き込む。
.gitigunoreの書式と全く同じ。
以下に例を示す。

.git
.sass-cache
.tmp
.idea
/dist
/e2e
/node_modules/bower
/node_modules/*grunt*
/node_modules/open
/node_modules/*jshint*
/node_modules/*karma*
/node_modules/requirejs
/node_modules/supertest
/node_modules/should
/node_modules/*imagemin*
/public
/.buildignore
/.editorconfig
/.gitattributes
/.gitignore
/.travis.yml
/.yo-rc.json
/.cfignore
/Gruntfile.js
/karma.conf.js
/protractor.conf.js
/manifest.yml

 

デプロイ

デプロイしたいアプリのカレントディレクトリから下記の通り入力する。

cf push my-app

下記のように処理が進めば成功。

Using manifest file /home/user/my-app/manifest.yml

Updating app my-app in org user-name / space development as user@exsample.com...
OK

Uploading my-app...
Uploading app files from: /home/user/my-app
Uploading 25.8M, 4613 files
Done uploading               
OK

Starting app my-app in org user-name / space development as user@exsample.com...
-----> Downloaded app package (13M)

...(node_modules内のパッケージなどをインストール)

1 of 1 instances running

App started


OK

App my-app was started using this command `node server/app.js`

Showing health and status for app my-app in org user-name / space development as user@exsample.com...
OK

requested state: started
instances: 1/1
usage: 1G x 1 instances
urls: my-app.cfapps.io
package uploaded: Sun Jan 18 01:10:58 +0000 2015

     state     since                    cpu    memory      disk   
#0   running   2015-01-18 10:11:53 AM   0.0%   77M of 1G   59.1M of 1G   

あとはmy-app.cfapps.ioにアクセスするとアプリが表示される。
 

おまけ:環境変数の設定

環境変数の設定が必要な場合は、pivotal.ioのコントロールパネルからアプリを指定してEnv Variablesタブから設定する。
 


0

node.jsが使えるレンタルサーバー比較

Node Hostingから候補のサーバーのベンチマークをとってみた。
候補条件は独自ドメインでSSLが使えるプランである。
ベンチマークは開発中のサイトグルチャを動かしたときのユーザーページの表示速度である。
ベンチマークの結果は以下の通り。

サーバー プラン 料金(月) ベンチマーク
heroku SSL Addon $20=2334円 8秒
evennode 768MB RAM 3 instance €13=1757円 8秒
お名前.com vps メモリ2GBプラン 1315円(税抜),1420円(税込) 測定していないがめちゃ遅かった
AWS EC2 t2.small $13.14=1531円(バージニア1年間前払いなし) 30秒
Microsoft Azure 西日本Basic A0 1428円 30秒
openshift Bronze 3 Small gears 0円 30秒
bluemix 128MB RAM 1 instance 0円 30秒
Cloud Foundry 128MB RAM 1 instance $2.7=314円 1分30秒
NodeNinja 無料 0円 動かず
MODULUS 396MB RAM $14.4=1680円 動くがリロードで404エラー
Pogoapp 256MB RAM $5=583円 使い方分からず

為替レートは以下の通りの本日のレートで計算した。
$1=116.563702円
€1=135.232545円

サーバー コメント
heroku 独自ドメインSSL無しか、herokuサブドメインでSSL有りなら無料で使えるので最高の選択だろう。ただし、SSL Addonを入れると月$20かかってくる。
evennode 独自ドメインSSL有りでherokuより安くなり、速度もherokuと同等である。グルチャevennodeを使っている。
お名前.com vps 計測していないがめちゃ遅かった。30秒はかかっていただろう。あとSSL使う場合、別途初年度24,000円(税抜)かかるようだ。
AWS EC2 t2.smallでも30秒かかるので遅い。これより一段上のプランであるt2.mediumは3年間全前払いでも$16.86=1968円かかるのでevennodeより高くなるのでベンチマーク対象外とした。
Microsoft Azure 30秒かかった。ちなみに西日本StandardA0(1632円)、A1(5508円)、A7(78336円)も試してみたが速度は同じ。また、Microsoft Azure WebsitesのFREEを試してみたが、ブラウザのコンソールにwebsocketsのサーバー確立エラーが表示される。しかし、Azure Website での Socket.IO を使用する Node.js チャット アプリケーションの構築ではwebsocketが使えると書いてあるし、設定でもwebsocketを有効にしているのだが。
openshift 無料でSSLも使えるので非常に魅力的だったが速度が遅い。一段上のプランであるsmall.highcpuは$18.25=2130円かかるのでevennodeより高くなるのでベンチマーク対象外とした。
bluemix IBMが提供するCloud Foundryと同じシステムのPaaSである。Node Hostingには載ってないが、node.js使えるので使ってみたが、30秒かかるので遅い。
Cloud Foundry 最低$2.7は魅力的だが、めちゃ遅い。1GBも試してみたが同じ速度だった。SSLは使えない。ドキュメントにはCLOUD FLARE使いましょうと書いてあった。無料でSSLが使えるらしい。ってか、heroku + CLOUD FLAREで完全無料でSSL使えるんじゃね?
NodeNinja 無料で魅力的だがグルチャが動かなかった。SSLにできるかも不明。
MODULUS 動くには動くが、トップページの読み込みが異常に長いうえにリロードすると404エラーになってしまう。トップページさえ読み込めれば、他のページは速かった。SSLは無料で使える。
Pogoapp $5でSSLが使えるのでかなり魅力的だったが使い方が分からなかった。ドキュメントのページが404エラーになる。デプロイ用のgitもアドインで入れるっぽい。操作が特殊なので使うのを断念。

なお、各サーバーのデプロイ方法は下記のリンク参照。
node.jsをevennodeにデプロイしよう
node.jsをpivotal.ioにデプロイしよう
AWS EC2にnode.jsサーバーを構築しよう
angular-fullstackをherokuにデプロイする方法

他のサーバーのベンチマークをとらなかった理由は下記の通り。

サーバー 理由
appfog SSL有りが月$50するので高い
Baidu App Engine ホームページが中国語で分からない。中国国家の検閲が入って突然使えなくなっても困るし
clever cloud SSLが使えるか明記されていない。最低でも€14.4かかりevennodeより高いのでベンチマーク取らず
cloudnode ベータ版につき無料っぽいが、BaaSっぽい。SSLは使えるらしい。登録しようとしたが、短縮URLが表示されるだけで登録できない
dotCloud SSL付きだと$30.24するので高い。お試し期間もなさそう
exoscale apps リンク先エラー。PaaSは止めたっぽい
nodejitsu 最低でも月$25と高い。お試し期間もなし
JSApp.US Web IDE?ブラウザでコーディングする必要有り。プロプライエタリとして使うにはセキュリティが心配。
NAE(CN) リンク先エラー。どっちにしろ中国だし
RoseHosting 最低でも月$19.95するので高い。2CPUs 1GB RAM 30GB SSDは魅力的だが。SSL使えるかは不明

0

AWS EC2にnode.jsサーバーを構築しよう

環境は以下の通り。
・サーバーはAWS EC2
・サーバーのOSはAMI Linux
・ローカルのOSはCentOS 6.5
・ローカルにはnode.jsサーバーのソースコードがあるものとする

説明内容は以下の通り。
・サーバーにnode.jsをインストール
・サーバーにgitサーバーを立てる
・サーバーにnode.jsサーバーのソースコードをデプロイする
・サーバーのnode.jsサーバーを起動する

AWS EC2でのサーバー構築方法はsimtterができるまで(サーバー取得と設定)を参照して欲しい。
EC2からのリモートコントロールにはTera Termを使う。
Tera Termの使い方はchat.acができるまで(statusnetをインストール)を参照して欲しい。
ただし、今回インストールするOSはubuntuではなくAMI Linuxとする。
AMI Linuxのユーザー名はec2-userになる。

では、OSまで入った前提で以降を説明する。
 

node.jsをインストール

参考文献:
node.jsをyumでインストールする(centos6.5)
Amazon Linux AMI に関するよくある質問
Tera Termから下記コマンド実行。

sudo yum install nodejs npm --enablerepo=epel

 

gitサーバーを立てる

参考文献:自宅のCentOSにGitサーバを構築してみた
Tera Termから下記コマンド実行。

sudo yum install git git-deamon git-all xinetd
sudo chkconfig xinetd on
sudo vi /etc/xinetd.d/git-daemon

 
内容は

service git
{
        disable         = no
        socket_type     = stream
        wait            = no
        user            = nobody
        server          = /usr/libexec/git-core/git-daemon
        server_args     = --base-path=/home --export-all --user-path=ec2-user --syslog --inetd --verbose
        log_on_failure  += USERID
}

 
xinetd を起動

sudo service xinetd start

 
リポジトリ作成

cd ~
mkdir test.git
cd test.git
git --bare init --shared

 
gitグループを作成してユーザをそのグループに追加

sudo groupadd git
sudo usermod -G wheel,git ec2-user
sudo chown -R root:git ~/test.git

 

node.jsサーバーをデプロイする

ローカルのgitにはすでに何らかのソースコードをコミットしているものとする。
ローカルから下記コマンドを実行する。
 
リモートリポジトリの登録

git remote add origin ssh://ec2-user@[Public IP]:/~/test.git

※ [Public IP]はAWS EC2に割り当てられたIPアドレスを指定する。独自ドメインを設定している場合はドメイン名でも良い。
※ ssh 用の鍵ペアはTera Termでの通信で使う鍵と同じである。
 
リモートリポジトリに push

git push origin master

 

node.jsサーバーを起動する

サーバーで下記コマンドを実行する。
 
クローン作成

cd ~
git clone test.git

 
node.jsサーバー起動

cd test
node app.js

※ app.jsは自分が起動したいソースファイルに適宜読み替えること。


0

画像を縮小してからサーバーへアップロードしよう

サーバーへ画像をアップロードしたい場合、クライアント-サーバー間の通信量軽減のため、クライアント側で画像を縮小してからサーバーへアップロードする方法を説明する。

前提条件は下記の通り。
・環境はherokuのMEANからCloudinaryに画像をアップロードしようで作った環境を流用する。
・画像の縮小にHTML5のcanvasを使う。

処理の流れは下記の通り。
・画像ファイル選択
・FileReaderで画像ファイルを読み込む
・ng-srcにFileReaderで読み込んだ画像ファイルのパスを設定する
・imgタグのonloadコールバックでcanvasを使って元の画像を縮小した画像を生成する
・angular-file-uploadで縮小した画像をサーバーへアップロード
※なお、画像の縮小表示にはCSSの縮小処理を使う。(CSSで縮小した画像は表示にしか使えないので、canvasで画像を縮小してサーバーにアップロードする)

手順は下記の通り。

CSSで縮小表示

参考文献:CSSだけで画像のリサイズを処理する(IE6に対応させて、しかもハイクオリティ)完全版
下記のCSSを作成する。

img {
	-ms-interpolation-mode: bicubic;
}

.image-large {
	max-width: 256px;
	max-height: 256px;
}
* html body .image-large {
	width: expression(this.width >= this.height ? "256px" : "auto");
	height: expression(this.width <= this.height ? "256px" : "auto");
}

 

htmlにimgタグを追加

参考文献:ngSrc | AngularJS 1.2 日本語リファレンス | js STUDIO
herokuのMEANからCloudinaryに画像をアップロードしようのHTMLを下記の通りimgタグを追加する。
ポイントは、
・classにはcssで定義したimage-largeを設定する
・srcはng-srcを使い、controllerでファイルパスを変更できるようにする
・オリジナルのディレクティブimg-onloadを設定する

<div ng-controller="MyCtrl">
  <input type="file" ng-file-select="onFileSelect($files)">
  <img class="image-large" ng-src="{{imgSrc}}" img-onload="ImageToBlob($img)"></img>
</div>

 

ディレクティブを追加

参考文献:
AngularJS 入門 – Directive
AngularJS – Image “onload” event
herokuのMEANからCloudinaryに画像をアップロードしようのjavascriptにディレクティブimg-onloadを追加する。
これによりimgタグのng-srcの値を変更した際のファイルロード完了後にimg-onloadで設定した関数が呼ばれる。
javascript

angular.module('myApp')
  .directive('imgOnload', [ '$parse', function ($parse) {
    return {
      link: function(scope, element, attrs) {
        element.bind("load" , function(e) {
          var func = $parse(attrs.imgOnload);
          func(scope, {$img:this});
        });
      }
    }
  }]);

 

コントローラーに縮小処理を追加

参考文献:
Get image data in JavaScript?
Canvasで描画した画像を送信してサーバに保存する
さらにコントローラーも下記の通りに変更する。

angular.module('myApp')
  .controller('MyCtrl', function($scope, $upload) {
    var imageType = '';
    $scope.onFileSelect = function($files) {
      for (var i = 0; i < $files.length; i++) {
        var file = $files[i];
        imageType = file.type;
        var fileReader = new FileReader();
        fileReader.onload = function(event) {
          $scope.imgSrc = event.target.result;
          if(!$scope.$$phase) {
            $scope.$apply();
          }
        };

        fileReader.readAsDataURL(file);
      }
    };

    var toBlob = function(image, imageType) {
      var canvas = document.createElement('canvas');
      if(canvas && canvas.getContext) {
        canvas.width = image.width;
        canvas.height = image.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        var base64 = canvas.toDataURL(imageType);
        var bin = atob(base64.replace(/^.*,/, ''));
        var buffer = new Uint8Array(bin.length);
        for(var i = 0; i < bin.length; i++) {
            buffer[i] = bin.charCodeAt(i);
        }

        return new Blob([buffer.buffer], {type: imageType});
      }
      return null;
    };

    $scope.ImageToBlob = function($img) {
      var blob = toBlob($img, imageType);
      $upload.upload({
        url: 'api/myapi', // server側API例
        file: blob
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {
        console.log(data);
      });
    };
  });

0

herokuのMEANからCloudinaryに画像をアップロードしよう

前提は下記の通り。
1.yeoman angular-fullstakでMEAN(MongoDB+Express+AngularJS+Node.js)アプリを作成済み
 この方法はYEOMANを使ってMEAN(MongoDB+Express+AngularJS+Node.js)を作成しようを参照すること
2.アプリをherokuにデプロイ済み
 この方法はangular-fullstackをherokuにデプロイする方法を参照すること
 
手順は下記の通り。
 

1.herokuにCloudinaryアドオンを追加

heroku toolbeltから下記コマンドを実行

heroku addons:add cloudinary --app foo

※fooはherokuのアプリ名
 

2.Gruntfile.jsに環境変数CLOUDINARY_URLを設定

herokuのConfig variablesを参照して環境変数CLOUDINARY_URLをGruntfile.jsに設定する。
下記はGruntfile.jsの例。

module.exports = function (grunt) {
  var localConfig;
  try {
    localConfig = //require('./server/config/local.env');
      {
        DOMAIN: 'http://localhost:9000',
        SESSION_SECRET: "foo-secret",

        FACEBOOK_ID: 'app-id',
        FACEBOOK_SECRET: 'secret',

        TWITTER_ID: 'app-id',
        TWITTER_SECRET: 'secret',

        GOOGLE_ID: 'app-id',
        GOOGLE_SECRET: 'secret',

        CLOUDINARY_URL: 'cloudinary://999999999999999:XXXXXXXXXXXXXXXXXXXXXXXXXXXX@xxxxxxxxx',

        // Control debug level for modules using visionmedia/debug
        DEBUG: ''
      };
  } catch(e) {
    localConfig = {};
  }

※本来環境変数は./server/config/local.env.jsに設定すれば良いはずだが、なぜかgruntが読み込んでくれないのでGruntfile.jsに直接記入している。
 

3.npmでcloudinaryをインストール

端末から下記コマンドを実行

npm install cloudinary --save

 

4.bowerでangular-file-uploadをインストール

参考文献:angular-file-upload#Yeoman with bower automatic include
端末から下記コマンドを実行

bower install ng-file-upload --save
bower install ng-file-upload-shim --save

 

5.npmでconnect-multipartyをインストール

参考文献:How to get uploaded file in Node.js Express app using angular-file-upload
connect-multipartyをインストールする。
端末から下記コマンドを実行

npm install connect-multiparty --save

 

6.bower.jsonのangular-file-uploadの読み込み順序を変更

参考文献:angular-file-upload#install
bower.jsonの依存順序を下記通りにする。
bower.jsonの依存順序を変更することでgrunt serve時にclient/index.htmlのbower管理のjavascript読み込み順序も変更される。

{
  "dependencies": {
    "ng-file-upload-shim": "~1.6.12",
    "angular": ">=1.2.*",
    "ng-file-upload": "~1.6.12"
  }
}

 

7.client側ソースコード追加

参考文献:angular-file-upload#usage
client側ソースコードを追加する。
サンプルとほぼ同じだがソースコード例を示す。
HTML例

<div ng-controller="MyCtrl">
  <input type="file" ng-file-select="onFileSelect($files)">
</div>

※scriptの読み込みはclient/index.htmlで行われる。
 
app.js

angular.module('myApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'btford.socket-io',
  'ui.router',
  'ui.bootstrap',
  'pascalprecht.translate',
  'angularFileUpload'  //追加
])

 
javascript例

angular.module('myApp')
  .controller('MyCtrl', function($scope, $upload) {
    $scope.onFileSelect = function($files) {
      for (var i = 0; i < $files.length; i++) {
        var file = $files[i];
        $scope.upload = $upload.upload({
          url: 'api/myapi', // server側API例
          file: file
        }).progress(function(evt) {
          console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }).success(function(data, status, headers, config) {
          console.log(data);
        });
      }
    };
  });

 

8.server側ソースコード追加

参考文献:
angular-file-upload node.js example
How to get uploaded file in Node.js Express app using angular-file-upload
Cloudinary using with node.js
server側ソースコードを追加する。
yo angular-fullstack:endpointでserverにmyapiという名前のAPIを追加した場合の例を示す。
ファイル:server/api/myapi/index.js

'use strict';

var express = require('express');
var controller = require('./myapi.controller');

var router = express.Router();

var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();

router.post('/', multipartMiddleware, controller.create);

module.exports = router;

 
ファイル:server/api/myapi/myapi.controller.js

'use strict';

var fs = require('fs');
var cloudinary = require('cloudinary');

exports.create = function(req, res) {
  if(req.files.file) {
    var stream = cloudinary.uploader.upload_stream(function(result) {
      return res.send(200);
    });
    fs.createReadStream(req.files.file.path).pipe(stream);
  } else {
    return res.send(400);
  }
};

 
以上で完成。
clientで画像が選択されるたびにserver経由でcloudinaryに画像ファイルがアップロードされる。
 


3

BootstrapのサンプルNestingのドロップダウンが開かない

BootstrapのサンプルNestingのドロップダウンが開かないので、その修正箇所を説明する。
 
【修正前】
http://getbootstrap.com/components/#btn-groups-nested

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

 
【修正後】

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <div class="dropdown">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Dropdown link</a></li>
        <li><a href="#">Dropdown link</a></li>
      </ul>
    </div>
  </div>
</div>

 
要は

<div class="btn-group">

の直下に

<div class="dropdown">

が必要。
 


0

angular-fullstackをherokuにデプロイする方法

angular-fullstack公式のherokuの項に書いてあるが、動作しなかったので動作する方法を説明する。
 
前提としている環境は下記の通り。
OS: ubuntu 14.04
node.js v6.3.1
angular-fullstack 3.7.6
 

gitをインストール

herokuにデプロイするのにgitを使うのでインストールする。
下記URL参照
Ubuntu 14.04 で Git の最新を使う
 

heroku toolbeltをインストール

下記URL参照
Heroku Command Line
 

herokuにMongoLabをアドオンする

参考文献:mLab MongoDB
下記コマンドを実行する(公式と同じ手順)

heroku addons:create mongolab --app foo

※fooはherokuのアプリ名を指定する
※アドオンを登録するにはherokuのアカウントに事前にクレジットカードを登録しておく必要がある。登録していないとエラーになる。
 

oAuthのキーを設定する

twitter, facebook, google+のoAuthを使う場合、下記コマンドを実行する(公式と同じ手順)

heroku config:set FACEBOOK_ID=id --app foo
heroku config:set FACEBOOK_SECRET=secret --app foo

※twitter, goolge+についても同様の手順で設定する
 

デプロイする

参考文献:Deploy to heroku is not working using yo angular-fullstack:heroku #1966
※ アプリ名がfooの場合

mkdir dist
cd dist
git init
heroku login (if you are not already authenticated)
heroku git:remote --app foo
cd ..
grunt build
grunt buildcontrol:heroku

typescriptを使っている場合の注意点

参考文献:
issue with postinstall script #74
fix(build): remove need for installing typings from the internet
typescriptを使っている場合、「grunt buildcontrol:heroku」で失敗する。
これは、dist/package.jsonに書かれている「”postinstall”: “./node_modules/.bin/typings install”」が不要なためのようだ。
おそらくdist/package.jsonはカレントのpackage.jsonをコピーしただけなので、カレントでは必要な「typings install」だが、デプロイでは不要のなのにコピーしてしまっているためと思われる。
よって、「grunt build」した後、dist/package.jsonに書かれている「”postinstall”: “./node_modules/.bin/typings install”」を削除してから「grunt buildcontrol:heroku」をすること。
※ 毎回「grunt build」でdist/package.jsonが生成されるので、面倒だが手作業で削除するのが必要があるようだ。

なお、上記手順でデプロイしたアプリは下記URLにある。
http://angularfullstack.herokuapp.com/
 


1

YEOMAN angular-fullstackでデバッガ(node-inspector)を起動する方法

下記のコマンドを実行する。

grunt serve:debug

するとブラウザが自動起動してnode-inspectorが開く。
‘–debug-brk’オプション付きで起動されるので、必ずサーバー側のソースコードの先頭でブレイクする。


0

VMWare PlayerにCentOSを入れてChromeからnode.jsをデバッグしよう

今までnode.jsのデバッグにCloud9を使っていたが、どうにもデバッグが不安定(使っているとデバッグ起動ができなくなる)。
そして、最近Chromeからnode.jsをデバッグできることを知る。
詳しくはこちらの記事参照
node inspector で node.js 用のコードをステップ実行する
こんな簡単な方法があったとは!
こういうことは早く教えてくれよと思いつつも、孤立無援の独学でnode.js弄っているので重要な情報がごっそり欠けることもある。
なにわともあれ、node.jsのデバッグ環境構築の手順を書き記す。
 
前提となる環境としては、メインのOSにWindows 7 64bitを使っているものとする。
んで、WindowsにバーチャルPCとしてLinuxを入れて、さらにLinuxにChromeを入れて、node.jsをデバッグするという手順になる。
バーチャルPCにはVMWare Player、LinuxはCentOSを使う。
VMWare Player+CentOSの組み合わせは共有フォルダの設定が簡単である。
バーチャルPCにVrtualBox、LinuxにUbuntuの選択肢もあるが、共有フォルダの設定が少々面倒になる。
 

1.VMWare Playerをインストール

VM Player 6.0.3のWindows版をダウンロードしてインストールする。
多分VM Player 5でも問題ないと思うがとりあえず最新版を入れておいた。
 

2.VMWare PlayerにCentOS 6.5をインストール

CentOS 6.5をダウンロードする。
最新はCentOS 7だが、CentOS 7でネットワーク周りのコマンドが大きく変わり、後述するVMWare Toolsのインストーラーが対応していないので、ここはCentOS 6.5にするのが無難。
いずれ、VMWare ToolsがCentOS 7にも対応するようになるとは思うが。
そして、VMWare Playerを起動してVMWare PlayerにCentOS 6.5をインストールする。
インストール手順は下記URL参照。
CentOS : インストール to VMware Player
注意点としては、GUI(デスクトップ)版をインストールすること。
普通にインストールすればGUI版が選択されるはず。
 

3.CentOSにnode.jsをインストールする

手順は下記URL参照
node.jsをyumでインストールする(centos6.5)
ちなみにCentOS デスクトップでの端末の起動方法は「アプリケーション > システムツール > 端末」と選ぶ。
端末を開くと最初はログインユーザーになっているのでroot権限に切り替える。
具体的にはsuコマンドを実行する。

su
パスワード:

パスワードを聞かれるのでrootのパスワードを入れよう。
パスワードが正しければroot権限に切り替わる。
 

3.CentOSにChromeをインストールする

手順は下記URL参照
CentOS に Chromium ブラウザをインストールする
CentOSではChromium ブラウザをインストールすることになる。
Chromeと大して変わらないので問題なし。
 

4.CentOSにVMWare Toolsをインストールする

手順は下記URL参照
VMWare Player上のCentOS 6.3にVMWare Toolsを入れる
 

5.VMWare Playerで共有フォルダを設定する

手順は下記URL参照
VMware Toolsの共有ファイル設定をしてラクラク開発
 

6.CentOSにnode inspectorをインストールしてデバッグ

ここでやっと冒頭の紹介したnode inspectorをインストールしてデバッグできるようになる。
手順は下記URLを再度掲載する。
node inspector で node.js 用のコードをステップ実行する
開発スタイルとしては、上記URLで作成するyourcode.jsをWindows側で共有フォルダに作成し、CentOS側でそのファイルをデバッグ実行する。
これにより、ソースコードの作成・編集はWindowsで、デバッグだけCentOSで行うことができる。
Windowsに使い慣れたテキストエディタがある人ならば、やりやすい開発スタイルだと思う。
 


0

herokuでwebsocketsを有効にしよう

herokuはデフォルトではwebsocketsが無効になっているらしい。
どおりで、MMORPG風チャットが遅かったわけだ。
websocketsの有効にするやり方は公式ヘルプHeroku Labs: WebSocketsに書いてあるが、ここにも書いておく。

heroku CLIでログインした状態で以下のコマンドを打つ。

heroku labs:enable websockets -a myapp

※ myappは有効にしたいアプリ名を指定する。
以下のメッセージが出れば成功だ。

Enabling websockets for myapp... done
WARNING: This feature is experimental and may change or be removed without notice.

0