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/ です。

![image](https://qiita-image-store.s3.amazonaws.com/0/71988/49347e82-1a96-732e-1f1e-8043ac2d454c.png)

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

```
[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の設定が必要ですがとりあえずアクセスできたので今回はこのへんで。