日本Cloud Foundryグループブログ: Simon Says を Cloud Foundry で動かす

「Cloud Foundry 百日行」第60日目、今日は電子ゲームの古典 Simon Says 。シンプルなゲームを簡単にデプロイして楽しめるのも、Cloud Foundry の得意分野。早速、取りかかりましょう。

基本情報

公式サイト
http://www.kellyking.me/projects/simon/
ソースコード
Javascript Simon
参考
Simon Says – Web上で遊べるサイモンゲーム

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

1) ソースコードの取得
2) アプリのデプロイ
3) 動作確認

1. ソースコードの取得

まずはソースコードを取得し、中身を確認します。

~$ git clone https://github.com/kellyk/javascript-simon
~$ cd javascript-simon/
~/javascript-simon$ ls
css  Gruntfile.js  index.html  js  package.json  README.md  sounds

package.json があるところから、Node.js のアプリに見えますね。
しかし、ファイル構成を覗いてみると、普通の JS アプリのようにも見えます。

2. アプリのデプロイ

このアプリをどう判断するかは Cloud Foundry にお任せすることにして、まずはそのまま push しましょう。

~/javascript-simon$ cf push simon

Creating app simon in org ueno / space test1 as ueno...
OK

Creating route simon.10.244.0.34.xip.io...
OK

Binding simon.10.244.0.34.xip.io to simon...
OK

Uploading simon...
Uploading app files from: /home/ueno/javascript-simon
Uploading 205.9K, 22 files
Done uploading               
OK

Starting app simon in org ueno / space test1 as ueno...
-----> Downloaded app package (76K)
-------> Buildpack version 1.3.1
       Node.js Buildpack v64
-----> Reading application state
       package.json...
       build directory...
       cache directory...
       environment variables...
       Node engine range:   unspecified
       Npm engine:          unspecified
       Start mechanism:     none
       node_modules source: package.json
       node_modules cached: false
       NPM_CONFIG_PRODUCTION=true
       NODE_MODULES_CACHE=true
       Downloading and installing node 0.12.2...
       Using default npm version: 2.7.4
-----> Building dependencies
       Installing node modules
       npm WARN package.json simon@0.1.0 No repository field.
-----> Checking startup method
       None found
cat: /tmp/staged/app/Procfile: No such file or directory
-----> Build failed
       WARNING: Node version not specified in package.json
       WARNING: No Procfile, package.json start script, or server.js file found
-----> Finalizing build
       Creating runtime environment
       Cleaning previous cache
       Caching results for future builds
-----> Build succeeded!
       simon@0.1.0 /tmp/staged/app
       └── (empty)
       WARNING: Node version not specified in package.json
       WARNING: No Procfile, package.json start script, or server.js file found
-----> Uploading droplet (9.2M)

0 of 1 instances running, 1 down
0 of 1 instances running, 1 down
0 of 1 instances running, 1 down
0 of 1 instances running, 1 down
0 of 1 instances running, 1 down
0 of 1 instances running, 1 down
0 of 1 instances running, 1 failing
FAILED
Start unsuccessful

TIP: use 'cf logs simon --recent' for more information

デプロイ失敗しました。
やはり Node.js Buildpack が選択されましたが、実は Node.js アプリでは無かったため、アプリが起動できずにいます。
デプロイ時に Buildpack の指定をせず、Node.js アプリと判定されたが、実は違っていた、ということはよくあります（百日行記事の第25日目等）。

package.json の中を見ても、Node や起動スクリプトの定義等はありません。
これは普通の JS アプリのようですね。

では、Staticfile Buildpack を指定して push してみましょう。

まず、Admin Buildpack の確認から。

~/javascript-simon$ cf buildpacks
Getting buildpacks...
 
buildpack              position   enabled   locked   filename   
staticfile_buildpack   1          true      false    staticfile_buildpack-cached-v1.0.0.zip   
java_buildpack         2          true      false    java-buildpack-v3.0.zip   
ruby_buildpack         3          true      false    ruby_buildpack-cached-v1.4.2.zip   
nodejs_buildpack       4          true      false    nodejs_buildpack-cached-v1.3.1.zip   
go_buildpack           5          true      false    go_buildpack-cached-v1.3.1.zip   
python_buildpack       6          true      false    python_buildpack-cached-v1.3.2.zip   
php_buildpack          7          true      false    php_buildpack-cached-v3.2.1.zip   
binary_buildpack       8          true      false    binary_buildpack-cached-v1.0.0.zip

-b staticfile_buildpack のオプションを付けて push します。

~/javascript-simon$ cf push simon -b staticfile_buildpack

Updating app simon in org ueno / space test1 as ueno...
OK
 
Uploading simon...
Uploading app files from: /home/ueno/javascript-simon
Uploading 124.1K, 21 files
Done uploading               
OK
 
Stopping app simon in org ueno / space test1 as ueno...
OK
 
Starting app simon in org ueno / space test1 as ueno...
-----> Downloaded app package (76K)
-----> Downloaded app buildpack cache (4.0K)
grep: Staticfile: No such file or directory
-----> Using root folder
-----> Copying project files into public/
-----> Setting up nginx
grep: Staticfile: No such file or directory
-----> Uploading droplet (3.5M)
 
1 of 1 instances running
 
App started
 
 
OK
 
App simon was started using this command `sh boot.sh`
 
Showing health and status for app simon in org ueno / space test1 as ueno...
OK
 
requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: simon.10.244.0.34.xip.io
last uploaded: Thu Aug 27 00:39:55 UTC 2015
stack: cflinuxfs2
buildpack: staticfile_buildpack
 
     state     since                    cpu    memory         disk      details   
#0   running   2015-08-27 09:40:03 AM   0.0%   4.7M of 256M   0 of 1G

デプロイ成功し、アプリが起動しました。

3. 動作確認

ブラウザからアプリにアクセスします。

動作確認と言っても遊ぶだけ!
Simon Says の基本的な遊び方は以下です。

(1) Start すると、4枚のカラーパネルのうちのどこかのパネルが一回光るのでそこをクリック
(2) 次にまたその同じパネルが光り、続いてまたどこか別のパネルが光るので、その二つを順番にクリック
(3) 次に、1回目、2回目のパネルがまた順番に光り、続いてまたどこか別のパネルが光るので、その三つを順番にクリック
　：
(N) 1回目、2回目… N 回目のパネルが順番に光るので、その N 個を順番にクリック
　：

記憶が持つ限り、光るパネルは一つずつ増えていきます。
どこまで記憶が持つか挑戦しましょう。

まとめ

手軽にデプロイして、手軽に使う、いや、遊ぶ。今日は Cloud Foundry ならではの手軽さを感じられるアプリでした。

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

cf-release (v211)
https://github.com/cloudfoundry/cf-release/tree/v211
(https://github.com/cloudfoundry/cf-release/tree/2121dc6405e0f036efa4dba963f7f49b07e76ffa)
bosh-lite
https://github.com/cloudfoundry/bosh-lite/tree/552dc6869600c5350eb7ffb4fb9c9c5e79e3889d
CF CLI (v6.12.0-8c65bbd-2015-06-30T00:10:31+00:00)
https://github.com/cloudfoundry/cli/tree/v6.12.0
(https://github.com/cloudfoundry/cli/tree/8c65bbd4d243cbbc9bdbf2ec2a3b0e094c094f48)
Javascript Simon
https://github.com/kellyk/javascript-simon/tree/bb3781bbe0edbaddaa3cc1909fdd0e7e1214123f

日本Cloud Foundryグループ ブログ

2015-09-14

Simon Says を Cloud Foundry で動かす

基本情報

1. ソースコードの取得

2. アプリのデプロイ

3. 動作確認

まとめ

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

日本Cloud Foundryグループブログ