LoginSignup
2
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-20

※修正
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
    image

  • 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」を動かす

公式の方法を参考に実施する。

$ 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.Postgres 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 へアクセス。
image

動きました!

 次回

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1