PhoenixをCloud 9上で動かしてみる

はじめに

個人的に次くると思ってるPhoenixをCloud 9上で動かすことを目標とします。
Phoenix: http://www.phoenixframework.org/

Elixirのインストール

以下のページを参考にElixirをインストールします。
http://blog.danielberkompas.com/elixir/2015/08/28/how-to-run-elixir-cloud9-ide.html

(1)Workspaceの作成
WorkspaceをCustomで新規作成します。
以前、既存のWorkspaceを使用して同じことをしようとしたとき、CPUが頭打ちをくらったので新規作成することをお勧めします。

(2)Exilerのインストール
以下のコマンドを実行します。
まずこのcountdbファイルがないとインストールに失敗するらしいので作成します。
sudo touch /etc/init.d/couchdb

erlangの依存関係リストを取得し、
wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb

登録。
sudo dpkg -i erlang-solutions_1.0_all.deb

依存関係を更新したら、
sudo apt-get update

elixirをインストール。(y/nを聞かれたらy)
sudo apt-get install elixir

以上でelixirが使用できます。

~/workspace $ iex
Erlang/OTP 18 [erts-7.2] [source] [64-bit] [smp:8:8] [async-threads:10] [kernel-poll:false]

Interactive Elixir (1.1.1) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> a = 10 + 14
24
iex(2)> 

Phoenixのインストール

ではPhoenixのインストールです。最新版を使ったほうがたぶん無難です。
https://github.com/phoenixframework/phoenix/releases/ にアクセスすれば確認できると思います。
インストールコマンドは以下です。(y/nを聞かれたらy)
mix archive.install https://github.com/phoenixframework/phoenix/releases/download/v1.1.0/phoenix_new-1.1.0.ez

デモアプリの作成

インストールができたらデモアプリを作成してみます。といってもデフォルトページを表示するだけです。
今回は起動が目的なので全てデフォルトでいきます。途中でy/nを聞かれたらｙと答えてください。デフォルトだとnpmのインストールが走るので多少時間がかかります。

mix phoenix.new hello_phoenix

作成できたらhello_phoenixに移動します。

cd hello_phoenix

つぎに依存関係を解決します。以下のコマンドを実行してください。聞かれたらｙで。

mix deps.get

ではサーバを起動します。デフォルトポートが4000のため
変更します。
config/dev.exs を開いてください。10行目のportを8080に変更します。（環境変数から持ってこれそうな気もしますがとりあえず直書きで）

config/dev.exs

config :hello_phoenix, HelloPhoenix.Endpoint,
  http: [port: 8080],
  debug_errors: true,
  code_reloader: true,
  cache_static_lookup: false,
  check_origin: false,

ではサーバを起動します。初回は足りないものをインストールしようとするのでｙで答えといてください。

mix phoenix.server

動きましたか？おめでとうございます。
私は失敗しました。

could not compile dependency :gettext, "mix compile" failed. You can recompile this dependency with "mix deps.compile gettext", update it with "mix deps.update gettext" or clean it with "mix deps.clean gettext"
==> hello_phoenix
** (Mix) Encountered compilation errors

いろいろ調べたところ、erlangのライブラリが足りないようです。
https://github.com/elixir-lang/elixir/issues/3035

以下をインストールします。
sudo apt-get install erlang-dev

起動コマンドを再実行です。
動きましたか？おめでとうございます。
私はダメでした。

[info] Running HelloPhoenix.Endpoint with Cowboy on http://localhost:8080
20 Dec 06:54:03 - error: Compiling of 'web/static/js/app.js' failed. Couldn't find preset "es2015" relative to directory "web/static/js" ; Compiling of 'web/static/js/socket.js' failed. Couldn't find preset "es2015" relative to directory "web/static/js" ; Compiling of 'deps/phoenix_html/web/static/js/phoenix_html.js' failed. Couldn't find preset "es2015" relative to directory "deps/phoenix_html/web/static/js" ; Compiling of 'deps/phoenix/web/static/js/phoenix.js' failed. Couldn't find preset "es2015" relative to directory "deps/phoenix/web/static/js"

npmが使うプリセットがないようです。
停止して（Ctrl+C二回）以下を実行しましょう。

npm install babel-preset-es2015

さあ三度目の正直です。再度起動します。

~/workspace/hello_phoenix $ mix phoenix.server
[info] Running HelloPhoenix.Endpoint with Cowboy on http://localhost:8080
20 Dec 06:56:46 - info: compiled 5 files into 2 files, copied 3 in 10.3 sec

やりました。無事起動したようです。アプリケーションのURLにアクセスしましょう。
https://[workspace name]-[account name].c9users.io/ です。

表示されました！やりましたね。
しかしちょっと待ってください。
コンソールにエラーが出てました。

[info] GET /
[debug] Processing by HelloPhoenix.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 167ms
[error] backend port not found: :inotifywait

どうもライブリローディングのために必要なライブラリがないようです。
https://github.com/phoenixframework/phoenix/issues/776

気持ち悪いので入れときます。

sudo apt-get install inotify-tools

~/workspace/hello_phoenix $ mix phoenix.server
[info] Running HelloPhoenix.Endpoint with Cowboy on http://localhost:8080
20 Dec 07:06:36 - info: compiled 5 files into 2 files, copied 3 in 15.3 sec
[info] GET /
[debug] Processing by HelloPhoenix.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 154ms
Setting up watches.  Beware: since -r was given, this may take a while!
Watches established.

エラーも消えましたね。すっきりしました。
まだ本格的に使うにはDBの設定が必要ですがとりあえずアクセスできたので今回はこのへんで。