Node.jsとWebSocketを使ったお絵描きアプリをHerokuにデプロイするまでの手順

Bookmark this on Google Bookmarks
[`evernote` not found]

前回、Betty Poofのイベントで作成したソーシャルセッションアプリですが、
https://www.youtube.com/watch?v=t0lq77YbizM&feature=youtu.be

・Wifiにログインしてもらわないとジョイン出来ない
・私と同じWifi(ローカルLANネットワーク)にログイン出来る範囲にしかリーチ出来ない
・そして192.168.0.100:3000みたいな数字(毎回変わる可能性あり)のURLにアクセスしてもらわないといけない

以上から、特にIT関係者ではない人にはちょっと違和感あるかな…と思い、固定のURLをアプライする為、無料から始められて、様々なサーバーサイドのアプリケーションがデフォルトで使えるサーバーサービス(正確に言えば、Amazon Web Services(AWS)のIaaS上に構築されたPaaS、ですが…)、Heroku(ヘロク)で展開してみる事にしました。

Heroku
https://www.heroku.com/

まず、ソーシャルセッションアプリの原型として、同時お絵描きアプリをデプロイ(展開)してみました。HerokuはGit(分散型のバージョン管理アプリ)の機能を使ってファイルをアップする仕組みになっており、ちょっと流れを整理しないと大変でした。具体的には下記になりました。

■事前準備
1. HerokuのWebから会員登録(無料)
2. Heroku Toolbeltを DL、インストール。 → herokuコマンドがターミナルで使えるようになる
3.Gitがインストールされてなかったらインストール

■実際のデプロイ作業(下記はターミナルで行う)
1. Herokuにログイン($ heroku login) → 登録に使ったEmailとパスワードを求められるので入力
2. ローカルのアプリディレクトリに移動
3. アプリをHeroku上に登録(Herokuサーバーにレポジトリ作成)
4. 公開鍵の作成、Herokuに登録($ heroku keys:add) →  Herokuにファイルをアップする為に必要、新しく作成しました。
5. Herokuサーバーを特定(最初の1回だけでいいはず) → $ git remote add heroku git@heroku.com:onewave.git

上記までは基本的にアプリ毎に一回すれば大丈夫。

6. ローカルのアプリディレクトリにGitレポジトリ作成 $ git init
7. 変更ファイルを追加 $ git add -A
8. ファイルをコミット $ git commit -m “init”
9. データをアップ $ git push heroku master

■ハマったポイント
・何故かデプロイ出来なくなって、調べたら結局登録した公開鍵が外れていた。
登録されてる公開鍵の表示はHerokuにログインしてから下記コマンド ssh-add -l
登録されてなかったらこちらのコマンドで追加 ssh-add 公開鍵までのパス

・WebSocket(リアルタイムで双方向通信が出来る新しい通信規格)を使うアプリはHerokuのWebサイトからWebSocketをOnにする、を選択しないといけない。

・Androidでうまく動作しない。
結構デバッグしたのですが、ソケット通信から受け取ったデータをCanvasに送る際になにかいっぱいいっぱいになっている感じ。もしかしたら新しいAndroid機器では問題ないかもしれません。

動作確認済み → iPod touch 4, iPad Air, Chrome, IE11, Firefox, Safari

で、アップしたアドレスはこれです。サーバのメモリ割当てを最低にしている為(HerokuはAmazon Web Services上に構築されている為、柔軟に割当が可能、当然多く割当てると費用が発生します。)、タイムラグが大きい場合がありますが、ブラウザのタブを複数開けば片方の動作が片方に影響しているのが見えるはずです。

OneWave
http://onewave.herokuapp.com/

ちょっとこれから触ったら音が出るようにしてみます。