日本Cloud Foundryグループ ブログ

オープンソースのPaaSソフトウェア CloudFoundry の技術情報やイベント告知などを掲載します

2015-10-15

WizardWarz を Cloud Foundry で動かす

「Cloud Foundry 百日行」第79日目は、Node.jsで動く多人数参加型ゲーム、 WizardWarz です。

基本情報

今回の手順の概要は以下の通りです。

  • 1) ソースコードの入手
  • 2) ソースコードの修正
  • 3) Cloud Foundryへのデプロイ
  • 4) 動作検証

なお、今回のアプリケーションにはWebSocketが使われています。
Proxyを跨いだ先にCloud Foundryの環境を構築している方は今回のアプリケーションが正常に動作しない可能性がありますので、ご了承下さい。

1. ソースコードの入手

githubからcloneしてきます。

$ git clone https://github.com/lallassu/wizardwarz
~
$ cd wizardwarz
wizardwarz$ ls
css  fonts  icons  images  index.html  js  LICENSE  models  promo.png  README.md

Githubの README を見てみると、Node.jsのアプリケーションのようです。

2. ソースコードの修正

では、Cloud Foundry上で動作するようにソースコードの修正を行っていきます。
修正済みのコードも こちら に用意しておきましたので、これを用いれば手順3までスキップできます。適宜ご利用下さい。

package.jsonファイルの作成

Cloud Foundryにデプロイする際に「このアプリはNode.jsのアプリである」と認識させるために、 package.json ファイルを作っておきましょう。
これは本来Node.jsのパッケージ管理ツールであるnpmの設定ファイルに当たるものですが、今回は特に管理する必要のあるパッケージは存在しないので、 npm init の後Enterキー連打でOKです。

wizardwarz$ npm init
~
wizardwarz$ ls
css  fonts  icons  images  index.html  js  LICENSE  models  package.json  promo.png  README.md  server  sounds  textures

起動ポート番号の指定

さて、次にアプリが起動する際のポート番号を正しく取得できるように指定します。
現在の起動ポート番号は 8080 の固定値になっているので、Cloud Foundry上で起動した際の数値を環境変数 PORT から取れるようにしてみましょう。

wizardwarz$ vi server/server.js

~
//======================================================
// Configuration
//======================================================
var version = "0.1";
var port =  process.env.PORT || 8080;
~

wizardwarz$ git diff --no-prefix server/server.js
diff --git server/server.js server/server.js
index 94f1a64..11a8e03 100644
--- server/server.js
+++ server/server.js
@@ -10,7 +10,7 @@
 // Configuration
 //======================================================
 var version = "0.1";
-var port = 8080;
+var port = process.env.PORT || 8080;
 
 //======================================================
 // Initialization

環境変数 PORT がある場合はそこから値を取得、無い場合は従来通り8080を利用、という変更です。

自身を指定するアドレスの変更

さらにコードを読んでみると、 localhost:8080 を呼び出している箇所があります。
ここの値もデフォルトのままではアプリが正しく動かないので、修正します。

wizardwarz$ vi js/game.js

~
var net = new Net();
//net.Initialize("http://192.168.1.124:8080");
//net.Initialize("http://192.168.1.137:8080");
//net.Initialize("http://nergal.ipeer.se:8080");
//net.Initialize("http://nergal.se:80");
//net.Initialize("http://192.168.1.137:80");
//net.Initialize("http://localhost:8080");
net.Initialize(location.host);
~

wizardwarz$ git diff --no-prefix js/game.js
diff --git js/game.js js/game.js
index 56c94de..a4d6d79 100644
--- js/game.js
+++ js/game.js
@@ -43,7 +43,8 @@ var net = new Net();
 //net.Initialize("http://nergal.ipeer.se:8080");
 //net.Initialize("http://nergal.se:80");
 //net.Initialize("http://192.168.1.137:80");
-net.Initialize("http://localhost:8080");
+//net.Initialize("http://localhost:8080");
+net.Initialize(location.host);
 
 
 //$('#song').prop("volume", 0.8);

ちなみに、この js/game.js というファイルはNode.jsのサーバーを構成するものではなく、アプリのユーザが動かすブラウザ上の index.html から呼び出されるファイルなので、 アプリの環境変数 process.env から取ってくる値は用いないことに注意して下さい。

Buildpack周りの修正

今回はNode.jsのアプリなのでNode.jsのBuildpackで動いてくれそうなものですが、Node.jsのBuildpackだけだとどうしても、sqlite3関連のライブラリが一部足りないというエラーを吐いてアプリが起動しない、という現象を回避できませんでした。
そこで今回は、好きなaptパッケージをインストールすることができる heroku-buildpack-apt というBuildpackを一緒に動かすことでデプロイを行いました。
これらの2つのBuildpackを同時に使うためにはこれまでの記事にも何度か登場した heroku-buildpack-multi を使います。

まずは heroku-buildpack-multi で呼び出したいBuildpackを .buildpacks ファイル内に記載します。

wizardwarz$ vi .buildpacks 

https://github.com/ddollar/heroku-buildpack-apt#7954acd0aa932201377187402d8a0794f535c738
https://github.com/cloudfoundry/nodejs-buildpack#eaf93a153ccb1c7780457ca611c45311d95a6259

バージョンを固定するためにhashで指定をしています。

次に heroku-buildpack-apt にapt-getしてきて欲しいパッケージ名を Aptfile 内に記載します。

wizardwarz$ vi Aptfile

sqlite3
libsqlite3-dev

これでOKです。
ちなみにNode.jsのBuildpackは package.json ファイルを用意してあるので自動的に動いてくれます。

manifestファイルの作成

最後に manifest.yml ファイルも作っておきます。

wizardwarz$ vi manifest.yml

---
applications:
- name: wizardwarz
  buildpack: https://github.com/ddollar/heroku-buildpack-multi#c41ef671cc9c8ff7d5cc7ad412654fbf9cffbce5
  command: cd server; node server.js;

3. Cloud Foundryへのデプロイ

ではCloud Foundry上へPushしてみましょう。

wizardwarz$ cf push

(一部略)
-----> Uploading droplet (54M)

1 of 1 instances running

App started


OK

App wizardwarz was started using this command `cd server; node server.js;`

Showing health and status for app wizardwarz in org ukaji / space default as ukaji...
OK

requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: wizardwarz.10.244.0.34.xip.io
last uploaded: Sat Oct 10 04:21:08 UTC 2015
stack: cflinuxfs2
buildpack: https://github.com/ddollar/heroku-buildpack-multi

     state     since                    cpu    memory          disk      details   
#0   running   2015-10-10 01:22:03 PM   0.1%   61.2M of 256M   0 of 1G

起動はOKです。

4. 動作検証

では払いだされたURLにブラウザでアクセスしてみます。

メイン画面はこちら。

NEWPLAYER からプレイヤーを作ってログインしてみます。

遊び方は

  • マウスカーソルで視点移動
  • WSADでキャラクターを前後左右へ移動
  • Mapに落ちているアイテムを拾って画面上の対応する数字キーで各種呪文を選択、マウスクリックで発動

といった感じのようです。

今回使用したソフトウェア

投稿者
ラベル: