Phoenix環境構築（Install・Server起動・ページの追加まで）

ElixirのWebフレームワーク Phoenixの入門 環境構築についてです。

公式Docの

• Up And Running · Phoenix
• Adding Pages · Phoenix

に載っているものを簡略化 & 日本語化したものです。

Elixir

Elixirについての詳しい概要はこちらの記事が参考になります。

qiita.com

入門書はこちらの書籍が非常に面白かったです。というか他の日本語書籍は現時点で存在しないと思います。

プログラミングElixir

Install

公式ページにいろいろ載ってますが、Mac + Homebrewの場合は

$ brew install elixir

でInstallできます。

上記コマンドでElixirをinstallすることで、 elixir コマンド、ElixirのREPL環境を実行する iex コマンド、ElixirのプロジェクトのCLIユーティリティの mix が使えるようになります。またErlangも一緒にinstallされます。

Phoenix

Install

Elixir & mix & Erlang がinstall済みであること

PhoenixのInstall

# package managerの hex を導入する
$ mix local.hex

# mixでPhoenixのinstall
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

その他必要なもの

Node.js (>= 5.0.0)

Homebrewやnvmで適当に

PostgreSQL

オプションでMySQLも可能。デフォルトはPostgreSQL。

参考: Homebrewを使ったPostgreSQLのインストール(Mac OS El Capitan)

Projectの作成

create project

$ mix phoenix.new hello_phoenix
# Fetch and install dependencies? [Yn] 聞かれるのでとりあえず 'Y' を押下するとbrunchがinstallされる
$ cd hello_phoenix

ディレクトリ構造はこんな感じです。

❯ tree -L 2
.
├── README.md
├── brunch-config.js
├── config
│   ├── config.exs
│   ├── dev.exs
│   ├── prod.exs
│   ├── prod.secret.exs
│   └── test.exs
├── lib
│   ├── hello_phoenix
│   └── hello_phoenix.ex
├── mix.exs
├── package.json
├── priv
│   ├── gettext
│   └── repo
├── test
│   ├── channels
│   ├── controllers
│   ├── models
│   ├── support
│   ├── test_helper.exs
│   └── views
└── web
    ├── channels
    ├── controllers
    ├── gettext.ex
    ├── models
    ├── router.ex
    ├── static
    ├── templates
    ├── views
    └── web.ex

よく触るファイル系はだいたい web に入っています。

ectoのsetup

軽量ORMのectoはRailsでいうActiveRecord的なポジションです。

config/dev.exs の設定の設定をいじってpostgresに接続できるようにしてください。role/passwordが"postgres/postgres"でCREATEDB権限があればいけるはずです。

...
# Configure your database
config :hello_phoenix, HelloPhoenix.Repo,
  adapter: Ecto.Adapters.Postgres,
  username: "postgres",
  password: "postgres",
  database: "hello_phoenix_dev",
  hostname: "localhost",
  pool_size: 10

$ mix ecto.create

上記コマンドでエラーがでなければ成功です。

Phoenix server 起動

$ mix phoenix.server

でserver起動できます。デフォルトでは http://localhost:4000 にアクセスすればページにアクセスすることができます。

こんな感じの画面が出ます。

ページの追加

mix phoenix.gen.html といったmix task（ Mix Tasks · Phoenix ）で必要なファイル群の生成ができるみたいなのですが、今回はガイドに沿って確認しながら手でちまちま作っていきます。

routingの設定ファイル

routingの設定ファイルは web/router.ex です。 中身を見てみましょう。

defmodule HelloPhoenix.Router do
  use HelloPhoenix.Web, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", HelloPhoenix do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
  end

  # Other scopes may use custom stacks.
  # scope "/api", HelloPhoenix do
  #   pipe_through :api
  # end
end

get "/", PageController, :index の行で （ web/controllers/page_controller.ex で定義された） HelloPhoenix.PageController moduleの index 関数を呼び出す、ということが容易に読み取れます。

routingの追加

http://localhost:4000/hello ページを作成します。

まず web/router.ex ファイルの20行目付近にroutingを定義します。

  scope "/", HelloPhoenix do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "/hello", HelloController, :index
  end

controllerの作成

次に以下の内容の web/controllers/hello_controller.ex を作成します。

defmodule HelloPhoenix.HelloController do
  use HelloPhoenix.Web, :controller

  def index(conn, _params) do
    render conn, "index.html"
  end
end

conn はrequest情報が詰まったstructです。_paramsはrequest parametersですが、今回使わないので先頭に _ をつけています。

viewの作成

以下の内容の web/views/hello_view.ex を作成します。

defmodule HelloPhoenix.HelloView do
  use HelloPhoenix.Web, :view
end

xxx_controller と xxx_view の xxx部を一致させる必要があるので注意です。 viewの役割はtemplateのレンダリング & データの取得, 加工のヘルパー関数の提供です。

templateの作成

Elixirの標準テンプレートエンジンは Embedded Elixir（eex）です。

web/templates/hello/index.html.eex に以下の内容のファイルを作成します。

<div class="jumbotron">
  <h2>Hello World, from Phoenix!</h2>
</div>

helloページの表示

再びサーバを立ち上げ、 http://localhost:4000/hello にアクセスするとHelloページが表示されます。 サーバを再起動しなくとも変更は反映されます。

また、レイアウトファイルは web/templates/layout/app.html.eex に存在しています。

動的ページの追加

Pathパラメータを使ってページをレンダリングします。

routing設定

web/router.ex にroutingを追加しましょう。

  scope "/", HelloPhoenix do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "/hello", HelloController, :index
    get "/hello/:messenger", HelloController, :show
  end

controller設定

/web/controllers/hello_controller.ex に showアクションを追加します。

  def show(conn, %{"messenger" => messenger}) do
    render conn, "show.html", messenger: messenger
  end

template設定

web/templates/hello/show.html.eex を作成し、以下の内容を記述します。

<div class="jumbotron">
  <h2>Hello World, from <%= @messenger %>!</h2>
</div>

これで http://localhost:4000/hello/phoenix にアクセスすると "Hello World, from phoenix!" と表示されるかと思います。

まとめ

PhoenixはRailsライクなMVCで非常にわかりやすいですね。 今後は公式ガイド読みつついろいろ試してみるつもりです。

Programming Phoenix: Productive |> Reliable |> Fast