Macでphoenixのサンプルを動かすまでやってみた

※修正
2016/9/2 つづり誤り修正

目的

MacへElixirのWebフレームワークであるphoenixのインストール、サンプルの動作確認までを行う。

What's　elixir、phoenix

すでに色々な方がまとめていらっしゃるので、簡潔に記載します。

Elixir

Erlang VM上で動作する、関数型言語。
Erlang VM自体は古くから存在して、低レイテンシ、かつ、スケーラブルで対障害性のある堅牢なVMらしいです。
主にWebや組み込みソフトウェア領域で成功している模様。

※参考
http://elixir-ja.sena-net.works/

phoenix

ElixirでWebアプリケーションを構築するためのフレームワーク。
Railsの開発者さんが開発したらしく、Railsに似ている部分が多々あるそうです。

※参考
Railsとphoenixを比較しまとめているらっしゃる方のQiitaです。
私はRails未経験のためピントは着ませんでしたが、触ったことがある方にとっては有益な情報になるかと思います。

環境

本手順を実施した環境は以下の通りです。

• MacBook Pro El Captain 10.11.6
  

• homebrew

$ brew --version
Homebrew 0.9.9 (git revision 565410; last commit 2016-09-17)
Homebrew/homebrew-core (git revision 8efbe; last commit 2016-09-18)

Elixirのインストール

基本的に公式のMac向けインストール手順を参考にすすめる。
http://elixir-lang.org/install.html#mac-os-x

1.homebrewでelixirをインストール

$ brew install elixir
==> Installing dependencies for elixir: jpeg, libpng, libtiff, wxmac, erlang
==> Installing elixir dependency: jpeg
==> Downloading https://homebrew.bintray.com/bottles/jpeg-8d.el_capitan.bottle.2.tar.gz
######################################################################## 100.0%
==> Pouring jpeg-8d.el_capitan.bottle.2.tar.gz
🍺  /usr/local/Cellar/jpeg/8d: 19 files, 713.8K
==> Installing elixir dependency: libpng
==> Downloading https://homebrew.bintray.com/bottles/libpng-1.6.25.el_capitan.bottle.tar.gz
######################################################################## 100.0%
==> Pouring libpng-1.6.25.el_capitan.bottle.tar.gz
🍺  /usr/local/Cellar/libpng/1.6.25: 25 files, 1.2M
==> Installing elixir dependency: libtiff
==> Downloading https://homebrew.bintray.com/bottles/libtiff-4.0.6_2.el_capitan.bottle.tar.gz
######################################################################## 100.0%
==> Pouring libtiff-4.0.6_2.el_capitan.bottle.tar.gz
🍺  /usr/local/Cellar/libtiff/4.0.6_2: 261 files, 3.4M
==> Installing elixir dependency: wxmac
==> Downloading https://homebrew.bintray.com/bottles/wxmac-3.0.2_3.el_capitan.bottle.tar.gz
######################################################################## 100.0%
==> Pouring wxmac-3.0.2_3.el_capitan.bottle.tar.gz
🍺  /usr/local/Cellar/wxmac/3.0.2_3: 809 files, 23.6M
==> Installing elixir dependency: erlang
==> Downloading https://homebrew.bintray.com/bottles/erlang-19.0.2_1.el_capitan.bottle.tar.gz
######################################################################## 100.0%
==> Pouring erlang-19.0.2_1.el_capitan.bottle.tar.gz
==> Caveats
Man pages can be found in:
  /usr/local/opt/erlang/lib/erlang/man

Access them with `erl -man`, or add this directory to MANPATH.
==> Summary
🍺  /usr/local/Cellar/erlang/19.0.2_1: 7,292 files, 278.7M
==> Installing elixir
==> Downloading https://homebrew.bintray.com/bottles/elixir-1.3.2.el_capitan.bottle.tar.gz
######################################################################## 100.0%
==> Pouring elixir-1.3.2.el_capitan.bottle.tar.gz
🍺  /usr/local/Cellar/elixir/1.3.2: 383 files, 5M

インストールできたようなので、バージョンを確認する。

$ elixir -v
Erlang/OTP 19 [erts-8.0.2] [source] [64-bit] [smp:8:8] [async-threads:10] [hipe] [kernel-poll:false] [dtrace]

Elixir 1.3.2

2.試しに「hello world」を動かす

[公式の方法]
(http://elixir-lang.org/getting-started/introduction.html#running-scripts)を参考に実施する。

$ echo "IO.puts \"Hello world from Elixir\"" > simple.exs
$ cat simple.exs
IO.puts "Hello world from Elixir"

$ elixir simple.exs
Hello world from Elixir

phoenixのインストール

次は、phoenixをインストールします。
http://www.phoenixframework.org/docs/installation に記載される手順で進めます。

1.　hexのインストール

まずは ビルドツールであるmixを使い、Erlangのパッケージマネージャであるhexをインストールしましょう。

$ mix local.hex
Are you sure you want to install archive "https://repo.hex.pm/installs/1.3.0/hex-0.13.1.ez"? [Yn] Y
* creating /Users/username/.mix/archives/hex-0.13.1

2.phoenixのインストール

続いて本命のphoenixインストール。

$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
Are you sure you want to install archive "https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez"? [Yn] Y
* creating /Users/kashiwagumahiroyuki/.mix/archives/phoenix_new

3.Node.jsのインストール

phoenixでアプリを作成する際、デフォルトだとHTML、CSSを生成するためにbundle.ioを使っているらしく、その依存関係解決のために Node.jsの　npm をつかってるようなので、インストールします。
...ですが、node.jsはhomebrewでインストール済みのため割愛。

4.Postgreｓ SQLのインストール

https://wiki.postgresql.org/wiki/Detailed_installation_guides#MacOS
によると、　Postgres.app なるものがあるので、それを利用。

※Macで簡単にPostgresSQLサーバ建てられるよ☆ミ　　というものらしいです。
http://postgresapp.com/

phoenixサンプルアプリケーションの作成

下準備が終わったので、phoenixのサンプルアプリケーションを作成します。

http://www.phoenixframework.org/docs/up-and-running　
を見ながらすすめます。

$ mix phoenix.new hello_phoenix
* creating hello_phoenix/config/config.exs
* creating hello_phoenix/config/dev.exs
* creating hello_phoenix/config/prod.exs
* creating hello_phoenix/config/prod.secret.exs
* creating hello_phoenix/config/test.exs
* creating hello_phoenix/lib/hello_phoenix.ex
* creating hello_phoenix/lib/hello_phoenix/endpoint.ex
* creating hello_phoenix/test/views/error_view_test.exs
* creating hello_phoenix/test/support/conn_case.ex
* creating hello_phoenix/test/support/channel_case.ex
* creating hello_phoenix/test/test_helper.exs
* creating hello_phoenix/web/channels/user_socket.ex
* creating hello_phoenix/web/router.ex
* creating hello_phoenix/web/views/error_view.ex
* creating hello_phoenix/web/web.ex
* creating hello_phoenix/mix.exs
* creating hello_phoenix/README.md
* creating hello_phoenix/web/gettext.ex
* creating hello_phoenix/priv/gettext/errors.pot
* creating hello_phoenix/priv/gettext/en/LC_MESSAGES/errors.po
* creating hello_phoenix/web/views/error_helpers.ex
* creating hello_phoenix/lib/hello_phoenix/repo.ex
* creating hello_phoenix/test/support/model_case.ex
* creating hello_phoenix/priv/repo/seeds.exs
* creating hello_phoenix/.gitignore
* creating hello_phoenix/brunch-config.js
* creating hello_phoenix/package.json
* creating hello_phoenix/web/static/css/app.css
* creating hello_phoenix/web/static/css/phoenix.css
* creating hello_phoenix/web/static/js/app.js
* creating hello_phoenix/web/static/js/socket.js
* creating hello_phoenix/web/static/assets/robots.txt
* creating hello_phoenix/web/static/assets/images/phoenix.png
* creating hello_phoenix/web/static/assets/favicon.ico
* creating hello_phoenix/test/controllers/page_controller_test.exs
* creating hello_phoenix/test/views/layout_view_test.exs
* creating hello_phoenix/test/views/page_view_test.exs
* creating hello_phoenix/web/controllers/page_controller.ex
* creating hello_phoenix/web/templates/layout/app.html.eex
* creating hello_phoenix/web/templates/page/index.html.eex
* creating hello_phoenix/web/views/layout_view.ex
* creating hello_phoenix/web/views/page_view.ex

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running npm install && node node_modules/brunch/bin/brunch build

We are all set! Run your Phoenix application:

    $ cd hello_phoenix
    $ mix phoenix.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phoenix.server

Before moving on, configure your database in config/dev.exs and run:

    $ mix ecto.create

どうやらこれでテンプレートが一式作成できた模様。
次に、 hello_phoenix　ディレクトリに移動して、ecto.create で、データベースを用意します。

$ cd hello_phoenix
$ mix ecto.create
==> connection
Compiling 1 file (.ex)
Generated connection app
==> fs (compile)
Compiled src/sys/fsevents.erl
Compiled src/sys/inotifywait_win32.erl
Compiled src/sys/inotifywait.erl
Compiled src/fs_event_bridge.erl
Compiled src/fs_sup.erl
Compiled src/fs_app.erl
Compiled src/fs_server.erl
Compiled src/fs.erl
Compiling c_src/mac/cli.c
Compiling c_src/mac/compat.c
Compiling c_src/mac/main.c
==> gettext
Compiling 1 file (.yrl)
Compiling 1 file (.erl)
Compiling 19 files (.ex)
Generated gettext app
==> ranch (compile)
Compiled src/ranch_transport.erl
Compiled src/ranch_sup.erl
Compiled src/ranch_server.erl
Compiled src/ranch_protocol.erl
Compiled src/ranch_listener_sup.erl
Compiled src/ranch_tcp.erl
Compiled src/ranch_ssl.erl
Compiled src/ranch_app.erl
Compiled src/ranch_acceptors_sup.erl
Compiled src/ranch_acceptor.erl
Compiled src/ranch_conns_sup.erl
Compiled src/ranch.erl
==> poolboy (compile)
Compiled src/poolboy_worker.erl
Compiled src/poolboy_sup.erl
Compiled src/poolboy.erl
==> decimal
Compiling 1 file (.ex)
Generated decimal app
==> poison
Compiling 4 files (.ex)
Generated poison app
==> db_connection
Compiling 23 files (.ex)
Generated db_connection app
==> phoenix_pubsub
Compiling 12 files (.ex)
Generated phoenix_pubsub app
==> cowlib (compile)
Compiled src/cow_qs.erl
Compiled src/cow_spdy.erl
src/cow_multipart.erl:392: Warning: crypto:rand_bytes/1 is deprecated and will be removed in a future release; use crypto:strong_rand_bytes/1
Compiled src/cow_multipart.erl
Compiled src/cow_http_te.erl
Compiled src/cow_http_hd.erl
Compiled src/cow_date.erl
Compiled src/cow_http.erl
Compiled src/cow_cookie.erl
Compiled src/cow_mimetypes.erl
==> cowboy (compile)
Compiled src/cowboy_middleware.erl
Compiled src/cowboy_sub_protocol.erl
Compiled src/cowboy_sup.erl
Compiled src/cowboy_websocket_handler.erl
Compiled src/cowboy_static.erl
Compiled src/cowboy_spdy.erl
Compiled src/cowboy_websocket.erl
Compiled src/cowboy_router.erl
Compiled src/cowboy_protocol.erl
Compiled src/cowboy_loop_handler.erl
Compiled src/cowboy_http_handler.erl
Compiled src/cowboy_rest.erl
Compiled src/cowboy_handler.erl
Compiled src/cowboy_clock.erl
Compiled src/cowboy_bstr.erl
Compiled src/cowboy_app.erl
Compiled src/cowboy_http.erl
Compiled src/cowboy.erl
Compiled src/cowboy_req.erl
==> mime
Compiling 1 file (.ex)
Generated mime app
==> plug
Compiling 44 files (.ex)
Generated plug app
==> phoenix_html
Compiling 8 files (.ex)
Generated phoenix_html app
==> phoenix
Compiling 60 files (.ex)
Generated phoenix app
==> phoenix_live_reload
Compiling 3 files (.ex)
Generated phoenix_live_reload app
==> postgrex
Compiling 45 files (.ex)
Generated postgrex app
==> ecto
Compiling 68 files (.ex)
Generated ecto app
==> phoenix_ecto
Compiling 4 files (.ex)
Generated phoenix_ecto app
==> hello_phoenix
Compiling 12 files (.ex)
Generated hello_phoenix app
The database for HelloPhoenix.Repo has been created

サンプルアプリのデータベースの作成に成功しました。

サンプルアプリの起動

次はいよいよ、サンプルアプリを起動してみましょう。

$ mix phoenix.server
[info] Running HelloPhoenix.Endpoint with Cowboy using http://localhost:4000
22 Sep 12:05:57 - info: compiled 6 files into 2 files, copied 3 in 1.2 sec

ブラウザで http://localhost:4000 へアクセス。

動きました！

#　次回

次はサンプルアプリの拡張を行いたいと思います。