Elixirの上で動くWebアプリケーションサーバ「Phoenix」を使って、高速なWebアプリやREST APIをサクっと書いてみます ※旧Phoenix（バージョン1.2）対応のスライドは、以下にあります https://www.slideshare.net/piacere_ex/elixir3phoenixweb-rest-api-75571536

1. Elixir入門 第3回
「Phoenixで高速Webアプリ ＆
REST APIをサクッと書いてみる」
with Docker
2017/04/14 ver0.5作成
2017/04/26 ver0.9作成
2017/04/28 ver1.0作成
2017/10/10 ver1.3（Phoenix 1.3対応）作成

2. 1
1. C10K問題を解決する高速Web
2. Phoenixのインストール
3. HTMLテンプレートを変更する
4. WebアプリからDB操作する
5. JSON APIを作ってみる
6. Dockerイメージを保存する
7. 高速なWeb&APIを気軽に開発
目次

3. 2
１．C10K問題を解決する高速Web

4. 3
１．C10K問題を解決する高速Web
「C10K問題」をご存知でしょうか？
10,000以上のクライアントがサーバに同時接続すると、ハード
ウェア性能が充分でも、ソフトウェアの処理方式や性能が不充分
で処理できない、という、昨今のネット利用増大に伴う問題です
この問題に対し、膨大なリクエストを、同時並行で効率良く処理
するサーバソフトウェアが求められています
Elixirは、電話交換機の開発で生まれたErlangをベースとして
いるため、膨大な同時並行のリクエストを効率良く処理できます
そのElixirの上に構築されたWebアプリケーションフレームワークで
あるPhoenixも、高速に同時並行リクエストを処理できます

5. 4
１．C10K問題を解決する高速Web
Phoenix (+Elixir) の他プラットフォームとの性能比は、以下の
ような感じで、シングルスレッドのスピードが売りのGo言語と比べ
ても、なかなか良い勝負をしています
Elixirは、マルチプロセスで性能発揮するので、より期待できます
WebSocket性能比
0
10000
20000
30000
40000
50000
60000
Throughput (req/s)
Webページビュー性能比
http://postd.cc/websocket-shootout/
https://github.com/mroth/phoenix-showdown

6. 5
２．Phoenixのインストール

7. 6
２．Phoenixのインストール
ElixirイメージをDockerで起動します (-pが追加されています)
Phoenixをインストールします
Phoenixプロジェクトを作成します (要ネット接続)
作成したプロジェクトでPhoenixサーバーを起動します
> docker run --rm -v /c/piacere/code:/code -p 4000:4000 -i -t
trenpixster/elixir /bin/bash
# mix archive.install
https://github.com/phoenixframework/archives/raw/master/phx_new.ez
# mix phx.new web_nodb --no-brunch --no-ecto
# cd web_nodb
# iex -S mix phx.server
任意のフォルダに変更してください
ディレクトリの区切りは「/」です
掲載スペースの関係で2行になっています
が、URLも続けて入力してください
PJ名には、英小文字と「_」を指定しないと
エラーないしはビルド途中でコケることがあります

8. 7
２．Phoenixのインストール
ブラウザで「http://localhost:4000」にアクセスすると、
Phoenixで作られたWebページが見れます

9. 8
３．HTMLテンプレートを変更する

10. 9
３．HTMLテンプレートを変更する
トップページ本文のHTMLテンプレートは下記フォルダにあります
「index.html.eex」をお好きなエディタで開き、以下の内容に
変更してください
ブラウザをリロードすると、以下のように変更されます
※なお、Dockerでは無く、ローカルPCでPhoenixサーバを起動すると、リロードしなくてもリアルタイムで反映されます
# cd lib/web_nodb_web/templates/page
ここが本文です。<br>

11. 10
３．HTMLテンプレートを変更する
「index.html.eex」には、ただのHTMLだけで無く、Elixirのコー
ドを「<%～%>」や「<%=～%>」で埋め込むことができます
上記変更後、リロードすると、以下のように変更されます
ここが本文です。<br>
<%= [ "hoge", "foo" ] |> List.to_string %>

12. 11
４．WebアプリからDB操作する

13. 12
４．WebアプリからDB操作する
DBとして、PostgreSQLをインストールします
Dockerイメージ「trenpixster/elixir」は、Debian系である
Ubuntu利用のため、aptを使いますが、お使いのOSに応じて、
yum／RPM／Homebrew／HPからのDLで対応してください
インストールが完了したら、PostgreSQLサーバを起動し、psql
からの接続確認を行ってください
# apt-get update
# apt-get install postgresql
# service postgresql start
* Starting PostgreSQL 9.3 database server [ OK ]
# sudo -u postgres psql
psql (9.3.18)
Type "help" for help.
postgres=# q

14. 13
４．WebアプリからDB操作する
Node.jsとnpmをインストールします
DB利用するためのPhoenixプロジェクトを作成します (要ネット
接続)
# git clone https://github.com/creationix/nvm.git ~/.nvm
# source ~/.nvm/nvm.sh
# nvm install v4.2.6
# apt-get install npm
# mix phx.new app --no-brunch
# cd app
※「web」というプロジェクトを利用すると
コード自動生成に失敗し、エラーが発生
するので、避けてください

15. 14
４．WebアプリからDB操作する
PostgreSQLユーザのパスワードを初期化します
モデルを格納するDBを作成します
DBが追加されていることを確認します
# sudo -u postgres psql -c "ALTER USER postgres PASSWORD 'postgres';"
# service postgresql restart
# mix ecto.create
# sudo -u postgres psql -l
List of databases
Name | Owner | Encoding | Collate | Ctype | Access privileges
-------------+----------+----------+-------------+-------------+-----------------------
app_dev | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |
postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |
template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +
| | | | | postgres=CTc/postgres
template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +
| | | | | postgres=CTc/postgres
(4 rows)

16. 15
４．WebアプリからDB操作する
Webアプリ用のモデル生成を行います
今回は、titleとbodyの2項目を持ったモデルを作ります
なお、第3～5引数は、以下で使われます
 「Tool」…lib/app/配下に作成するフォルダ名、テーブル操作用モジュールの名前
 「Post」…上記フォルダ内に置かれるテーブル定義モジュールの名前
 「posts」…このWebアプリを示すURLのディレクトリ名
コマンド結果の終盤通り、lib/app_web/router.exへの
パス追加と、モデルのマイグレーションが必要です
# mix phx.gen.html Tool Post posts title:string body:text
…
Add the resource to your browser scope in lib/app_web/router.ex:
resources "/posts", PostController
Remember to update your repository by running migrations:
$ mix ecto.migrate

17. 16
４．WebアプリからDB操作する
lib/_web/router.exへのパス追加を行います
モデルのマイグレーションを行います
# mix ecto.migrate
defmodule AppWeb.Router do
use AppWeb, :router
…
scope "/", AppWeb do
pipe_through :browser # Use the default browser stack
get "/", PageController, :index
resources "/posts", PostController
end
…
end

18. 17
４．WebアプリからDB操作する
マイグレーションの結果、テーブル追加されるので、確認します
# sudo -u postgres psql
psql (9.3.18)
Type "help" for help.
postgres=# c app_dev
You are now connected to database “app_dev" as user "postgres".
app_dev=# d posts
Table "public.posts"
Column | Type | Modifiers
-------------+-----------------------------+----------------------------------------------------
id | integer | not null default nextval('posts_id_seq'::regclass)
title | character varying(255) |
body | text |
inserted_at | timestamp without time zone | not null
updated_at | timestamp without time zone | not null
Indexes:
"posts_pkey" PRIMARY KEY, btree (id)

19. 18
４．WebアプリからDB操作する
Phoenixサーバを起動します
ブラウザで「http://localhost:4000/posts」を表示すると、
「Title」「Body」がリストされるページが表示されます
# iex -S mix phx.server

20. 19
４．WebアプリからDB操作する
「New post」から、新たなアイテムを追加できます

21. 20
４．WebアプリからDB操作する
追加後は以下の通りです
「Show」「Edit」「Delete」で追加されたアイテムを編集できます

22. 21
５．JSON APIを作ってみる

23. 22
５．JSON APIを作ってみる
JSON APIも、前述したWebアプリとほぼ同じ手順で作れます
まずJSON API用のPhoenixプロジェクトを作成します
モデルを格納するDBを作成します
JSON API用のモデル生成を行います (違いはjson指定のみ)
前述のWeb用のモデルと全く同じモデルで作ってみます
# mix phx.new api --no-brunch
# cd api
# mix phx.gen.json Tool Post posts title:string body:text
…
Add the resource to your api scope in lib/api_web/router.ex:
resources "/posts", PostController, except: [:new, :edit]
Remember to update your repository by running migrations:
$ mix ecto.migrate
# mix ecto.create

24. 23
５．JSON APIを作ってみる
web/router.exへのパス追加を行います
同時に、CSRFを防止する部分も解除しておきます
モデルのマイグレーションを行います
# mix ecto.migrate
defmodule ApiWeb.Router do
use ApiWeb, :router
pipeline :browser do
…
plug :fetch_flash
# plug :protect_from_forgery
plug :put_secure_browser_headers
…
scope "/", ApiWeb do
pipe_through :browser # Use the default browser stack
get "/", PageController, :index
resources "/posts", PostController, except: [:new, :edit]
end
…
end
CSRF(cross-site request forgeries)の防止
が行われると、CSRFトークン(csrf_token)を渡さ
ないとアクセスできなくなるため解除する
※ステートレスなREST APIでの本CSRF対策は実装が難しい

25. 24
５．JSON APIを作ってみる
マイグレーションの結果、テーブル追加されるので、確認します
# sudo -u postgres psql
psql (9.3.18)
Type "help" for help.
postgres=# c api_dev
You are now connected to database “api_dev" as user "postgres".
web_dev=# d posts
Table "public.posts"
Column | Type | Modifiers
-------------+-----------------------------+----------------------------------------------------
id | integer | not null default nextval('posts_id_seq'::regclass)
title | character varying(255) |
body | text |
inserted_at | timestamp without time zone | not null
updated_at | timestamp without time zone | not null
Indexes:
"posts_pkey" PRIMARY KEY, btree (id)

26. 25
５．JSON APIを作ってみる
JSON API用のコマンドとして、どのようなものが用意されたかは、
以下で確認できます
一覧取得 (index)は、/postsへのGETで行います
アイテム登録 (create)は、/postsへのPOSTで行います
各アイテム取得 (show)は、/posts/1、/posts/2等のID指
定でのGETで取得でき、アイテム更新 (update)はID指定の
PUTもしくはPATCH、アイテム削除 (delete)はID指定での
DELETEで行います
# mix phx.routes
page_path GET / Api.PageController :index
post_path GET /posts Api.PostController :index
post_path GET /posts/:id Api.PostController :show
post_path POST /posts Api.PostController :create
post_path PATCH /posts/:id Api.PostController :update
PUT /posts/:id Api.PostController :update
post_path DELETE /posts/:id Api.PostController :delete

27. 26
５．JSON APIを作ってみる
Phoenixサーバを起動します
JSONクライアントで「http://localhost:4000/posts」をGET
リクエストすると、アイテムが空のJSONが返ってきます
# iex -S mix phx.server
Google ウェブストアで
Postmanをインストー
ルしてください

28. 27
５．JSON APIを作ってみる
「http://localhost:4000/posts」へのPOSTリクエストにて
titleとbodyを下記JSONのように指定すると、新たなアイテムを
追加できます

29. 28
５．JSON APIを作ってみる
再度、「http://localhost:4000/posts」をGETすると、追加
されたアイテムを確認できます

30. 29
６．Dockerイメージを保存する

31. 30
６．Dockerイメージを保存する
ここまでにインストールしたPhoenix／PostgreSQL／node.js
は、Dockerイメージとして保存しておかないと消えてしまいます
保存するため、まず、以下手順でDockerを抜け、保存対象と
なるDockerプロセスを確認します
Dockerプロセスを、Dockerイメージとして保存します
#
【Ctrlキーを押下し続けたまま、pキー → qキーと打鍵するとDockerを抜けます】
> docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS
PORTS NAMES
5e05bff83fe6 trenpixster/elixir "/bin/bash" 2 minutes ago Up 2
minutes 0.0.0.0:4000->4000/tcp blissful_wozniak
> docker commit -m "Phoenix/PostgreSQL/node.js installed" blissful_wozniak
local/phoenix
sha256:84b71bd343938a4eb482fce3f295b44c4c5872ac32d883aa900c6e6092c26bcd

32. 31
６．Dockerイメージを保存する
Dockerイメージが保存されていることを確認します
元となったDockerプロセスは停止しておきます
今後、Phoenixを使う際は、保存したDockerイメージを以下の
通り起動するようにします
> docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
local/phoenix latest 4c81c5756057 1 second ago 684MB
trenpixster/elixir latest 760616f3ebe6 2 months ago 684MB
> docker run --rm -v /c/piacere/code:/code -p 4000:4000 -i -t local/phoenix
/bin/bash
> docker stop blissful_wozniak

33. 32
６．Dockerイメージを保存する
次回起動時は、以下手順で起動します
PostgreSQLの起動状態が中途半端になる可能性あるため、
一度落として、再度起動した方が良いでしょう
> docker run --rm -v /c/piacere/code:/code -p 4000:4000 -i -t
local/phoenix /bin/bash
# service postgresql stop
# service postgresql start

34. 33
７．高速なWeb&APIを気軽に開発

35. 34
７．高速なWeb&APIを気軽に開発
今回は、Phoenixを使った、Webアプリ ＆ REST APIの開発
の基本的な手順についてご説明しました
PhoenixによるWebアプリやREST APIの構築が「そこまで難し
く無いかも？」と思っていただけたら、この入門としては大成功です
Phoenixは、WebアプリおよびJSON APIの気軽な構築を実現
しつつ、高速・並行処理も両立できる、革新的なWebアプリケー
ションフレームワークのため、今後、多用されることが想定されます
今回は、高負荷な処理について言及しませんでしたが、別途、
他のフレームワークとの性能比較を行う回も設けたいと思います
仕事でも趣味でも、プログラミングライフをエンジョイしてください！