2015-06-24

Angular-Invoicing を Cloud Foundry で動かす

本日の第16回「Cloud Foundry 百日行」は、AngularJS製のWeb請求書システム Angular Invoicing です。Webでの請求書とはどういうものなのでしょうか? さっそく見て行きましょう。

基本情報

ソースコードの取得

$ git clone https://github.com/metaware/angular-invoicing.git
$ cd angular-invoicing/
$ ls
css  images  index.html  js  README.md

ディレクトリ内には、 index.html や js/ などが入っています。となると、この百日行のブログでも 第5回 以降、度々登場してきた staticfile-buildpack を使うことで間違いなさそうですね。

アプリのpush

ではこれまでにならって、まずは staticfile-buildpack を指定してpushしてみましょう。

$ cf push invoicing -b https://github.com/cloudfoundry-incubator/staticfile-buildpack.git
Creating app invoicing in org ueno / space test1 as ueno...

:

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 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 down
0 of 1 instances running, 1 failing
FAILED
Start unsuccessful

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

デプロイ失敗です。
最後の”TIP”が示す通り、 cf logs invoicing --recent でログを確認してみると、以下のようにあります。

2015-06-23T17:46:41.86+0900 [App/0]      ERR /home/vcap/app/nginx/sbin/nginx: error while loading shared libraries: libssl.so.1.0.0: cannot open shared object file: No such file or directory

え? libssl.so.1.0.0 が無い?
環境的な疑いがあるとすると、指定したbuildpackですね。つい最近まで問題無く動いていたおなじみの staticfile-buildpack ですが、もしかして、何か変更が入ってないでしょうか? 念の為、確認してみましょう。

過去の百日行記事を振り返ると、6/15付けの 第8回 ではこのbuildpackが用いられて問題無く動作していたようです。
https://github.com/cloudfoundry/staticfile-buildpack/commits/master
から、最近のcommitをチェックしてみると、それ以降に以下の3件のcommitが積まれています。

  • https://github.com/cloudfoundry/staticfile-buildpack/commit/d00d45d43dcdb3bfa75b1445533c6fda5035ef3b

  • https://github.com/cloudfoundry/staticfile-buildpack/commit/f09f720bfa4e52f4ed65c5e27b92a133b4eeeafa

  • https://github.com/cloudfoundry/staticfile-buildpack/commit/871e635532b31b523f526ae386846c54d4220458

このうち上の2つは動作に影響を与えないテキスト・ファイル等の修正なので、実質的に何かありそうなcommitは最後のみ。
最後のcommitはサブモジュール・ポインターの変更なので、サブモジュールを見てみます。
サブモジュール・ポインターの変更対象の間 ( 0b1eb13f9a747494b0abac8c665bb556cd07c749 → f752ecf4b27d2f31bb082dfe7a47c76fefc769d7 ) に積まれたcommitは以下の4つ：

  • https://github.com/cloudfoundry-incubator/compile-extensions/commit/f752ecf4b27d2f31bb082dfe7a47c76fefc769d7

  • https://github.com/cloudfoundry-incubator/compile-extensions/commit/70f6c1674e6fee7e0b8a72a466c1fcc907df444c

  • https://github.com/cloudfoundry-incubator/compile-extensions/commit/7f91e7f3a5b50ee1a426e4d2a8c6bffb592a6d25

  • https://github.com/cloudfoundry-incubator/compile-extensions/commit/1b9f66b9a280488947175fa1f9221b2e45ac381d

順次見ていくと、 3番目のコミット で stack のデフォルトが lucid64 → cflinuxfs2 に変更されています。
この修正は当然依存ライブラリーの処理にも影響すると考えられます。
このコードを読む限り、これを変更前の lucid64 に戻すには、環境変数 CF_STACK に lucid64 を指定しさえすればいいはず。早速試してみましょう。

$ cf set-env invoicing CF_STACK lucid64
Setting env variable 'CF_STACK' to 'lucid64' for app invoicing in org ueno / space test1 as ueno...
OK
TIP: Use 'cf restage' to ensure your env variable changes take effect

“TIP”が言うように、 cf restage で環境変数指定後のデプロイを確認してみましょう。

$ cf restage invoicing
Restaging app invoicing in org ueno / space test1 as ueno...
-----> Downloaded app package (76K)
-----> Downloaded app buildpack cache (4.0K)
Cloning into '/tmp/buildpacks/staticfile-buildpack'...
Submodule 'compile-extensions' (https://github.com/cloudfoundry-incubator/compile-extensions.git) registered for path 'compile-extensions'
Cloning into 'compile-extensions'...
Submodule path 'compile-extensions': checked out 'f752ecf4b27d2f31bb082dfe7a47c76fefc769d7'
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 (2.3M)

1 of 1 instances running

App started


OK

App invoicing was started using this command `sh boot.sh`

Showing health and status for app invoicing in org ueno / space test1 as ueno...
OK

requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: invoicing.10.244.0.34.xip.io
last uploaded: Tue Jun 23 10:14:53 +0000 2015
stack: lucid64

     state     since                    cpu    memory         disk      details   
#0   running   2015-06-23 07:18:45 PM   0.0%   3.4M of 256M   0 of 1G

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

動作確認

URL http://invoicing.10.244.0.34.xip.io にアクセスしてみます。

初期画面

初期画面にアクセスできました。請求書の画面そのものですね。

入力

請求書の項目毎に入力できます。
単価と数量が決まると自動で価格が入ります。
右上のロゴを消すこともでき、正式な請求書そのものに仕上がってきました。

請求書発行

プリントモードにすると、不要なボタンとかも消え、請求書イメージが表示されます。
実際にプリントプレビューすると、以下の請求書ができました。

なるほど、機密性の高い請求書情報ではありますが、ボランティア団体とか、比較的小さ目の組織がLAN内で共有しながら簡便に請求書発行するのに使えそうですね。

まとめ

今回は簡単にデプロイできると思いきや、環境に落とし穴がありました。
使用しているcf-releaseはv194。このデフォルトのstackは lucid64 です。ところが、v207でそれが cflinuxfs2 に変更になりました。
それに合わせて、 staticfile-buildpack の方も、 cflinuxfs2 をデフォルトサポートするように変更されました。
このstackの食い違いによって、最初エラーが出たので、 lucid64 で staticfile-buildpack が動くように、環境変数設定で対処しました。

では今回もデプロイに必要最低限なmanifestファイルを作成しておきましょう。

$ vi manifest.yml

applications:
- name: angular-invoicing
  buildpack: https://github.com/cloudfoundry/staticfile-buildpack
  env:
    CF_STACK: lucid64

cf push だけでデプロイができることを確かめてみてください。

ペーパーレスが進む昨今、今回は請求書のデジタル化の原型のようなアプリでした。認証もDBも無い極めてシンプルなアプリですが、それはそれで、請求書のような固い文書でも使い方次第でWebで気軽に扱えるようになるということですね。

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