※本スライド、旧版（Phoenix 1.2）のため、下記最新版をご覧ください https://www.slideshare.net/piacere_ex/elixir3phoenix-13web-rest-api-81219622 Elixirの上で動くWebアプリケーションサーバ「Phoenix」を使って、高速なWebアプリやREST APIをサクっと書いてみます

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

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
２．Phoenixのインストール

6. 5
２．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/phoenix_new.ez
# mix phoenix.new web_nodb --no-brunch --no-ecto
# cd web_nodb
# iex -S mix phoenix.server

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

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

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

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

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

12. 11
４．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
# /etc/init.d/postgresql start
* Starting PostgreSQL 9.3 database server [ OK ]
# sudo -u postgres psql
psql (9.3.16)
Type "help" for help.
postgres=# ¥q

13. 12
４．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 phoenix.new web --no-brunch
# cd web

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

15. 14
４．WebアプリからDB操作する
Webアプリ用のモデル生成を行います
今回は、titleとbodyの2項目を持ったモデルを作ります
終盤に指示されている通り、web/router.exへのパス追加と、
モデルのマイグレーションが必要です
# mix phoenix.gen.html Post posts title:string body:text
…
Add the resource to your browser scope in web/router.ex:
resources "/posts", PostController
Remember to update your repository by running migrations:
$ mix ecto.migrate

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

17. 16
４．WebアプリからDB操作する
マイグレーションの結果、テーブル追加されるので、確認します
# sudo -u postgres psql
psql (9.3.16)
Type "help" for help.
postgres=# ¥c web_dev
You are now connected to database "web_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)

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

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

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

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

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

23. 22
５．JSON APIを作ってみる
web/router.exへのパス追加を行います
同時に、CSRFを防止する部分も解除しておきます
モデルのマイグレーションを行います
# mix ecto.migrate
defmodule Api.Router do
use Api.Web, :router
pipeline :browser do
…
plug :fetch_flash
# plug :protect_from_forgery
plug :put_secure_browser_headers
…
scope "/", Api 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対策は実装が難しい

24. 23
５．JSON APIを作ってみる
マイグレーションの結果、テーブル追加されるので、確認します
# sudo -u postgres psql
psql (9.3.16)
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)

25. 24
５．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 phoenix.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

26. 25
５．JSON APIを作ってみる
Phoenixサーバを起動します
JSONクライアントで「http://localhost:4000/posts」をGET
リクエストすると、アイテムが空のJSONが返ってきます
# iex -S mix phoenix.server

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

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

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

30. 29
６．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

31. 30
６．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

32. 31
７．高速なWeb&APIを気軽に開発

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