2015-07-03

ZenPen を Cloud Foundry で動かす

本日の第22回「Cloud Foundry 百日行」は、ZenPenです。

ZenPen基本情報

デプロイ

手順

  • 0) 準備
  • 1) アプリの起動
  • 2) 動作確認

0.準備

恒例のソースコードの取得から。

$ git clone https://github.com/tholman/zenpen
$ cd zenpen/
zenpen$ ls
css  index.html  js  license.md  readme.md

1.アプリの起動

おなじみHTML+JavaScriptでStaticfile-buildpackのパターンです。
先にmanifestファイルを作ってしまいましょう。

zenpen$ vi manifest.yml
applications:
- name: zenpen
  buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git#v1.1.1
  env:
    CF_STACK: lucid64

あとはpushするだけです。

zenpen$ cf push
Using manifest file /home/ukaji/workspace/zenpen/manifest.yml

Creating app zenpen in org ukaji / space default as ukaji...
OK

Using route zenpen.10.244.0.34.xip.io
Binding zenpen.10.244.0.34.xip.io to zenpen...
OK

Uploading zenpen...
Uploading app files from: /home/ukaji/workspace/zenpen
Uploading 69.3K, 21 files
Done uploading               
OK

Starting app zenpen in org ukaji / space default as ukaji...
-----> Downloaded app package (32K)
Cloning into '/tmp/buildpacks/staticfile-buildpack'...
Note: checking out 'd00d45d43dcdb3bfa75b1445533c6fda5035ef3b'.
You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
  git checkout -b new_branch_name
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.2M)

1 of 1 instances running

App started


OK

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

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

requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: zenpen.10.244.0.34.xip.io
last uploaded: Tue Jun 30 07:26:57 +0000 2015
stack: lucid64

     state     since                    cpu    memory         disk      details   
#0   running   2015-06-30 04:27:14 PM   0.0%   2.4M of 256M   0 of 1G

無事に起動しました。

2.動作確認

動作確認です。URLにアクセスしてみると・・・

確かに全画面モードで背景を黒にしてしまえば余計なものが一切表示されないためかなり集中することができそうです。

おまけ

さて、今回も少しStatic-buildpackの機能で遊んでみます。
非常に簡単なBasic認証の機能を追加してみましょう。
Readmeの説明通りに行ってみます。

  • 0.アプリのルートディレクトリにStaticfile.auth というファイルを作成。
  • 1.Htpasswd Generatorにアクセスし、UsernameとPasswordを入力。(この2つが後でアプリにアクセスする際に要求されます。)
  • 2. Create .htpasswd file を押すと文字列を返してくれるので、先ほど作った Staticfile.auth ファイルに書き込み。

今回は

Username=hiroakiukaji
Password=mypassword

から

hiroakiukaji:$apr1$1Nm9vAi1$e7wR1mchH0oZnHrP0q5/2/

という文字列が返されたので、これを Staticfile.auth にそのまま書き込んでおきましょう。

zenpen$ vi Staticfile.auth
hiroakiukaji:$apr1$1Nm9vAi1$e7wR1mchH0oZnHrP0q5/2/

この状態で再びpushします。

zenpen$ cf push
Using manifest file /home/ukaji/workspace/zenpen/manifest.yml

Updating app zenpen in org ukaji / space default as ukaji...
OK

Uploading zenpen...
Uploading app files from: /home/ukaji/workspace/zenpen
Uploading 69.4K, 22 files
Done uploading               
OK

Stopping app zenpen in org ukaji / space default as ukaji...
OK

Starting app zenpen in org ukaji / space default as ukaji...
-----> Downloaded app package (32K)
-----> Downloaded app buildpack cache (4.0K)
Cloning into '/tmp/buildpacks/staticfile-buildpack'...
Note: checking out 'd00d45d43dcdb3bfa75b1445533c6fda5035ef3b'.
You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
  git checkout -b new_branch_name
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
-----> Enabling basic authentication
       hiroakiukaji:$apr1$1Nm9vAi1$e7wR1mchH0oZnHrP0q5/2/
       PRO TIP: Learn about basic authentication
       Visit https://github.com/drnic/staticfile-buildpack#basic-authentication
grep: Staticfile: No such file or directory
-----> Uploading droplet (2.2M)

1 of 1 instances running

App started


OK

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

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

requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: zenpen.10.244.0.34.xip.io
last uploaded: Tue Jun 30 08:44:02 +0000 2015
stack: lucid64

     state     since                    cpu    memory         disk      details   
#0   running   2015-06-30 05:44:19 PM   0.0%   3.4M of 256M   0 of 1G

アクセスを行ってみると・・・

認証機能が追加されています。

先ほど設定したUsernameとPasswordを入力すると、

認証が通りアプリを使うことができます。
アプリに対してちょっとしたアクセス制限をかけたい時には便利な機能ですね。

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