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

「Cloud Foundry 百日行」第83日目は、プレビュを見ながらHTML/JS/CSSを編集できるWebデザイン用エディタBracketsです。IDEほどの機能はありませんが、コードヒントが出たり構文エラー時にアラートが出たりと、シンプルですが使いやすいエディタだと思います。
Bracketsは、nodejs-buildpackを使ってCF上で動かすことも出来ますが、ソースへの修正が多少必要であることと、Brackets自体がHTML/JS/CSSで出来たアプリであるため、今回はシンプルにstaticfile-buildpackで起動してみました。

基本情報

公式サイト
http://brackets.io/
ソースコード
https://github.com/humphd/brackets
参考
Bracketsの機能紹介、使い方解説

デプロイ準備から動作確認までの手順は以下の通りです。

1) ソースの取得
2) ビルド準備
3) アプリのビルド
4) デプロイ準備
5) デプロイ
6) 動作確認

1. ソースの取得

Bracketsのソースを、GitHubから取得します。
submoduleがあるので、--recursiveをつけてgit cloneして下さい。

$ git clone https://github.com/humphd/brackets.git --recursive
$ cd brackets/
brackets$ ls
CONTRIBUTING.md  Gruntfile.js  NOTICE        README.md  src    test
env.dist         LICENSE       package.json  samples    tasks  tools

2. ビルド準備

まずは作業環境にnpmとgruntをインストールします。
先に、npmコマンドをインストールします。

brackets$ sudo apt-get install nodejs

次に、npmコマンドを使ってgruntコマンドをインストールします。

brackets$ sudo npm install -g grunt-cli
brackets$ grunt -v
grunt-cli: The grunt command line interface. (v0.1.13)
：

3. アプリのビルド

READMEに従って、npmコマンドとgruntコマンドを使ってアプリをビルドします。

brackets$ npm install
：
Running "less:dist" (less) task
File src/styles/brackets.min.css created.

Done, without errors.

brackets$ grunt build-browser
Running "jshint:src" (jshint) task
>> 363 files lint free.
：
Done, without errors.

ビルドが完了し、作成されたdistディレクトリに以下のようなファイルが出来ていれば成功です。

brackets$ ls dist
bramble.js   dependencies.js  hosted.html  index.html       main.js  styles      xorigin.js
config.json  extensions       hosted.js    LiveDevelopment  nls      thirdparty

4. デプロイ準備

アプリのビルドが完了したら、デプロイに必要な設定ファイルを作成していきます。
まずは、staticfile_buildpack用の設定です。staticfile_buildpackのREADMEを確認すると、アプリのルートフォルダを指定したい場合、Staticfileファイルで定義することができるようです。
本アプリは、ビルドで作成されたdistがルートフォルダとなるため、以下のように指定します。

brackets$ vi Staticfile

root: dist

次に、デプロイ用のマニフェストを作成します。

brackets$ vi manifest.yml

applications:
- name: brackets
  buildpack: staticfile_buildpack

マニフェストは、buildpack:指定のみです。
今回は、CF環境に標準で含まれているAdmin Buildpackのstaticfile_buildpackを使うので、URLではなくBuildpack名を指定します。
Buildpack名については、cf buildpacksコマンドで確認することができます。

brackets$ 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

上記までの設定で、ひとまずアプリのデプロイは成功します。しかし、Bracketsのトップページファイルはhosted.htmlという名前であるため、払いだされたアプリのURLへアクセスすると以下のようなページが表示され、直接アクセスできません。

そのため、staticfile_buildpackが起動するNginxの設定を変更することで、hosted.htmlがトップページとして表示されるようにしていきます。
staticfile_buildpackのREADMEを確認すると、ルートフォルダにnginx.confを置いておくと、そちらの設定が優先されるようです。
そこで、staticfile-buildpackのリポジトリで管理しているnginx.confをGitHubから取得しdistフォルダに置き、indexの設定にhosted.htmlを追加します。

brackets$ vi dist/nginx.conf

worker_processes 1;
daemon off;

error_log <%= ENV["APP_ROOT"] %>/nginx/logs/error.log;
events { worker_connections 1024; }

http {
  log_format cloudfoundry '$http_x_forwarded_for - $http_referer - [$time_local] "$request" $status $body_bytes_sent';
  access_log <%= ENV["APP_ROOT"] %>/nginx/logs/access.log cloudfoundry;
  default_type application/octet-stream;
  include mime.types;
  sendfile on;
  gzip on;
  tcp_nopush on;
  keepalive_timeout 30;
  port_in_redirect off; # Ensure that redirects don't include the internal container PORT - <%= ENV["PORT"] %>

  server {
    listen <%= ENV["PORT"] %>;
    server_name localhost;

    location / {
      root <%= ENV["APP_ROOT"] %>/public;
      index hosted.html index.html index.htm Default.htm;  # ← ここに hosted.html を追加
      <% if File.exists?(File.join(ENV["APP_ROOT"], "nginx/conf/.enable_directory_index")) %>
      autoindex on;
      <% end %>
      <% if File.exists?(auth_file = File.join(ENV["APP_ROOT"], "nginx/conf/.htpasswd")) %>
      auth_basic "Restricted";                                #For Basic Auth
      auth_basic_user_file <%= auth_file %>;  #For Basic Auth
      <% end %>
      <% if ENV["FORCE_HTTPS"] %>
      if ($http_x_forwarded_proto = http) {
        return 301 https://$host$request_uri;
      }
      <% end %>
    }
  }
}

これで、デプロイ準備は完了です。

4. デプロイ

デプロイ準備が完了したら、cf pushします。

brackets$ cf push
：
1 of 1 instances running

App started


OK

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

Showing health and status for app brackets in org horiu-jn / space horiu-jn as horiu-jn...
OK

requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: brackets.10.244.0.34.xip.io
last uploaded: Mon Oct 19 08:21:23 UTC 2015
stack: cflinuxfs2
buildpack: staticfile_buildpack

     state     since                    cpu    memory          disk      details
#0   running   2015-10-19 05:21:52 PM   0.0%   54.4M of 256M   0 of 1G

無事、デプロイは成功しました。

7. 動作確認

ブラウザから払いだされたアプリのURLへアクセスすると、無事トップページであるhosted.htmlの画面が表示されました。

デフォルトでいくつかのファイルがすでに作成されています。
試しに、CSSファイルのstyle.cssを修正して、設定したスタイルをindex.htmlへ反映してみましょう。
ここでは、font-size:を追加し、color:を変更してみます。
お使いになるとすぐに分かると思いますが、キーを入力するとコードヒントが即座にでます。またcolor:の定義を変更してみると、色のサンプルも合わせて表示されます。