Whoocus

プロジェクトが作成され、アプリケーション階層が生成された。

生成されたテンプレートを参考に、http://localhost:4000/hello で呼ぶページを作成してみた。
まずは、ルートファイルを編集してみる。

get “/hello”, HelloController, :index

を追記した。

web/router.ex

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

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

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

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

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

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

次に、ルートファイルで指定した HelloController を作成してみる。
メソッドは index として、index.html を表示するようしていする。

web/controllers/hello_controller.ex

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

  plug :action

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

実際のコンテンツ部分。templatesディレクトリ内にコントローラ名に対応したディレクトリを作成して配置する。

web/templates/hello/index.html.eex

<div>こんにちは。たぢさん。</div>

view部分のファイルであるが、どのようなタスクを司っているのか不明。
そのうち調べてみる。

web/views/hello_view.ex

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

以上、アプリの概要である。

いきなりエラー。どうやら社内プロキシが邪魔して、社外のネットワークにつながらないらしい。

$ mix local.hex
** (Mix) Could not access url https://s3.amazonaws.com/s3.hex.pm/installs/list.csv, 
error: {:failed_connect, [{:to_address, {'s3.amazonaws.com', 443}}, 
{:inet, [:inet], :econnrefused}]}

ネットワークが繋がる環境で、気を取り直してもう一度。

$ mix local.hex

すると、ホームディレクトリ下に .mix/archives/hex.ez というファイルがダウンロードされる。

$ mix archive.install https://github.com/phoenixframework/phoenix/releases/download/v0.13.1/phoenix_new-0.13.1.ez

すると、先程と同じディレクトリに .mix/archives/phoenix_new-0.13.1.ez というファイルがダウンロードされる。

そして、プロジェクトを作成。

$ mix phoenix.new hello_phoenix --database mysql

※ここでプロジェクト名を HelloPhoenix としたら怒られた。命名規則があるのか調査中。

$ mix phoenix.server
[error] Could not start watcher "node", executable does not exist

nodeがないと怒られるので、nodejsのサイトでダウンロード。

再度実行。

$ 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/priv/static/robots.txt
* creating hello_phoenix/test/controllers/page_controller_test.exs
* creating hello_phoenix/test/views/error_view_test.exs
* creating hello_phoenix/test/views/page_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/controllers/page_controller.ex
* creating hello_phoenix/web/templates/layout/application.html.eex
* creating hello_phoenix/web/templates/page/index.html.eex
* creating hello_phoenix/web/views/error_view.ex
* creating hello_phoenix/web/views/layout_view.ex
* creating hello_phoenix/web/views/page_view.ex
* creating hello_phoenix/web/router.ex
* creating hello_phoenix/web/web.ex
* creating hello_phoenix/mix.exs
* creating hello_phoenix/README.md
* creating hello_phoenix/lib/hello_phoenix/repo.ex
* creating hello_phoenix/test/support/model_case.ex
* creating hello_phoenix/.gitignore
* creating hello_phoenix/brunch-config.js
* creating hello_phoenix/package.json
* creating hello_phoenix/web/static/css/app.scss
* creating hello_phoenix/web/static/js/app.js
* creating hello_phoenix/web/static/vendor/phoenix.js
* creating hello_phoenix/priv/static/images/phoenix.png

Fetch and install dependencies? [Yn] Y
* running npm install
* running mix deps.get

We are all set! Run your Phoenix application:

    $ cd hello_phoenix
    $ mix phoenix.server

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

    $ iex -S mix phoenix.server

インストラクションに記述してあるように下記でサーバを起動する。

$ cd hello_phoenix
$ mix phoenix.server

ブラウザを起動して、http://localhost:4000/ を開くと下記画面が表示される。