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

heroku CLIの使い方

忘れがちなのでメモ。

公式ヘルプheroku CLIに書いてあるけど、こちらでもあらためて説明しておく。

Windowsで使う場合を説明する。

説明

まずはtoolbeltをダウンロードしてインストールする。
次にコマンドプロンプトを開く。(管理者権限なしで良い)
カレントをtoolbeltがインストールされたフォルダ(デフォルトでは”C:\Program Files (x86)\Heroku\bin”)に移動させる。

cd C:\Program Files (x86)\Heroku\bin

以下のコマンドを打ってログイン

heroku login

ログイン時にE-mailとパスワードを聞かれるので打ち込む。
“Authentication successful.”と表示されればログイン成功だ。
普通のコマンドプロンプトに戻るが、herokuのコマンドが打てるようになっている。


0

有料レンタルサーバーお名前.com vps, wpXクラウド, wpXレンタルサーバーをベンチマーク取ってみた

友人のサイトの管理をしてるんだけど、
今までAmazon AWS EC2 microインスタンスの無料枠を使っていたのだが、アクセス数が増えてきて、timeoutエラー起こしまくりで耐え切れなくなってきたので、乗換えを検討することになった。
サーバー選びの基準は以下の通り。
・Wordpressが動くこと(つまりPHP+MySQLが使えること)
・費用は一月1000円以下
・上記の条件内でなるべく速い方が良い

んで、まあ、やっぱり一番悩むのは速度だ。
下記のサイトを参考に候補を絞り込んでいったのだが、結局VPSと普通のレンタルサーバーでどっちが速いのか判断付かなかったので、VPSで一番速いお名前.com vpsとレンタルサーバーで一番速いwpX(wpXはクラウドレンタルサーバーがある)でベンチマークとって比較してみた。
[参考サイト]
VPSベンチマーク比較完全版[GMO/カゴヤ/お名前/さくら/Serversman(DTI)/conoha+専用サーバ]
WordPressのためのレンタルサーバーまとめと比較

ベンチマーク

ベンチマークの内容は以下の通り。
・Apache Benchで-c 10 -n 100を4回計測してRequests per second[#/sec]を比較した。
・計測に使ったサイトは割りと画像多め(もちろんWordpressで作られている)
 ちなみにAmazon EC2 microインスタンス(nginxリバースプロキシなし)で(あまりに遅いので)計測不可能になっちゃうサイト
・計測した日時は日曜の午前中
・お名前.com vpsはWordPressテンプレート(nginxにリバースプロキシを設定して高速化している)を使用している。さらにwordpressにWP Super cacheプラグインを入れた場合と無い場合の両方を計測した。
・wpXレンタルサーバーはwpX独自のキャッシュ機能が備わっており、キャッシュありなしが選択できるので両方を計測した。WP Super cacheプラグインは入れてない(あっても速度変わらなかったので)。
・wpXクラウドはキャッシュありしか選できないのでキャッシュありのみ計測した。WP Super cacheプラグインは入れてない。

サーバー プラン 料金(月) ベンチマーク1回目 2回目 3回目 4回目
お名前.com vps(キャッシュなし) メモリ1GBプラン 896円(税抜) 2.82 2.69 2.63 2.68
お名前.com vps メモリ1GBプラン 896円(税抜) 10.10 10.08 10.08 10.13
wpXレンタルサーバー(キャッシュなし) なし 1,000円(税抜) 4.90 4.68 4.98 4.78
wpXレンタルサーバー なし 1,000円(税抜) 33.90 35.21 16.31 16.53
wpXクラウド グレードA 500円(税抜) 30.76 22.53 17.52 38.47

wpXが数値的にも体感的にもwpXが速い。
wpXクラウドとwpXレンタルサーバーではそんなに速度変わらないようだ。
アクセスが多いといっても月3万PVぐらいなので、wpXクラウドのグレードAで大丈夫そう。
これで月500円は安いね。


0

無料レンタルサーバーWPblogをApache Benchでベンチマーク取ってみた

ついでにWPblogでもベンチマーク取ってみた。

C:\xampp\apache\bin>ab -n 100 -c 10 http://blog.chat.ac/
This is ApacheBench, Version 2.3 <$Revision: 1528965 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking blog.chat.ac (be patient).....done


Server Software:        Apache
Server Hostname:        blog.chat.ac
Server Port:            80

Document Path:          /
Document Length:        278707 bytes

Concurrency Level:      10
Time taken for tests:   9.828 seconds
Complete requests:      100
Failed requests:        0
Total transferred:      27895600 bytes
HTML transferred:       27870700 bytes
Requests per second:    10.18 [#/sec] (mean)
Time per request:       982.756 [ms] (mean)
Time per request:       98.276 [ms] (mean, across all concurrent requests)
Transfer rate:          2771.98 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       13   30   7.8     31      49
Processing:   598  890 256.2    860    2422
Waiting:       13   39  23.5     31     141
Total:        647  920 256.0    885    2460

Percentage of the requests served within a certain time (ms)
  50%    885
  66%    930
  75%    972
  80%    983
  90%   1025
  95%   1269
  98%   2063
  99%   2460
 100%   2460 (longest request)

Xdomainと似たような結果になった。
ちなみにFTPはxdomainと同様に圧縮転送&解凍ができないっぽい。
また、SQLのインポートで文字化けした。(インポート/エクスポート自体はボタン一つで簡単操作なんだけど)


0

無料レンタルサーバーXdomainをApache Benchでベンチマーク取ってみた

Capnixがあまりに遅かったので、Xdomainに引っ越してみた。
そして、早速ベンチマークを取ってみた。
結果は次の通り。
(計測日時は2014/05/30 23時ごろ)

C:\xampp\apache\bin>ab -n 100 -c 10 http://blog.chat.ac/
This is ApacheBench, Version 2.3 <$Revision: 1528965 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking blog.chat.ac (be patient).....done


Server Software:        Apache
Server Hostname:        blog.chat.ac
Server Port:            80

Document Path:          /
Document Length:        231351 bytes

Concurrency Level:      10
Time taken for tests:   8.844 seconds
Complete requests:      100
Failed requests:        0
Total transferred:      23160160 bytes
HTML transferred:       23135100 bytes
Requests per second:    11.31 [#/sec] (mean)
Time per request:       884.351 [ms] (mean)
Time per request:       88.435 [ms] (mean, across all concurrent requests)
Transfer rate:          2557.51 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       11   27   9.3     26      55
Processing:   247  829 518.5    670    4059
Waiting:       17  170 415.9     35    3018
Total:        259  856 516.5    707    4074

Percentage of the requests served within a certain time (ms)
  50%    707
  66%    793
  75%    890
  80%    981
  90%   1735
  95%   1902
  98%   2141
  99%   4074
 100%   4074 (longest request)

Requests per secondが11.31 [#/sec]
なかなか良い結果だ。
広告を表示する義務があるものの、速い方が良いよね。
ちなみにコントロールパネルの使い勝手はcapnixの方が使いやすかった。
xdomainはファイル転送でzipで転送しといて解凍とか、逆にサーバー上のファイルをzipに圧縮してダウンロードとかができないっぽい。
また引っ越したくなったときに苦労しそう。


0

無料レンタルサーバーCapnixをApache Benchでベンチマーク取ってみた

現在、このブログは無料レンタルサーバーCapnixで動かしてるんだけど、性能がどんなものか気になったのでApache Benchでベンチマーク取ってみた。
結果は次の通り。
(計測日時は2014/05/28 23時ごろ)

C:\xampp\apache\bin>ab -n 100 -c 10 http://blog.chat.ac/
This is ApacheBench, Version 2.3 <$Revision: 1528965 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking blog.chat.ac (be patient).....done


Server Software:
Server Hostname:        blog.chat.ac
Server Port:            80

Document Path:          /
Document Length:        233265 bytes

Concurrency Level:      10
Time taken for tests:   36.464 seconds
Complete requests:      100
Failed requests:        0
Total transferred:      23353100 bytes
HTML transferred:       23326500 bytes
Requests per second:    2.74 [#/sec] (mean)
Time per request:       3646.409 [ms] (mean)
Time per request:       364.641 [ms] (mean, across all concurrent requests)
Transfer rate:          625.43 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:      270  297  10.3    296     322
Processing:  2605 3080 652.0   2888    5659
Waiting:      321  650 366.3    597    2613
Total:       2902 3377 650.1   3194    5944

Percentage of the requests served within a certain time (ms)
  50%   3194
  66%   3262
  75%   3297
  80%   3539
  90%   4123
  95%   5061
  98%   5925
  99%   5944
 100%   5944 (longest request)

なんとRequests per secondが2.74 [#/sec]!
こんなに遅いとは!
ちなみに他のサーバー(有料)の速度はこんな感じ。
WordPressインストールのためのレンタルサーバー比較
一番遅いサーバーでも10req/sec、速いサーバーだと50req/secにもなる。
これほど速度差があったとはね。
有料サーバーに引っ越す気は無いけど、他にもっと速い無料サーバー探したほうが良いかも。


0

node.jsとsocket.ioとenchant.jsで作ったMMORPG風チャットをheruokuと9leapにデプロイしよう


node+socket.io+enchant.jsでチャットゲーを作る9leapで動くように修正してみた。
 
ソースコードはgithubにあげている
https://github.com/SimtterCom/enchat-9leap-client
 
サーバー側ソースコードもgithubにあげている。
https://github.com/SimtterCom/enchat-9leap
 
サーバーはherokuにデプロイしている。
http://enchat-9leap.herokuapp.com/
 
なお、ベースとなるソースコードは有限会社ジーワークス 佐藤潔 氏によって作成されました。


0