Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Elixir入門 第3回
「Phoenixで高速Webアプリ &
REST APIをサクッと書いてみる」
with Docker
2017/04/14 ver0.5作成
2017/04/26 ver0.9作成
2017/04/28 ver1.0...
1
1. C10K問題を解決する高速Web
2. Phoenixのインストール
3. HTMLテンプレートを変更する
4. WebアプリからDB操作する
5. JSON APIを作ってみる
6. Dockerイメージを保存する
7. 高速なWe...
2
1.C10K問題を解決する高速Web
3
1.C10K問題を解決する高速Web
「C10K問題」をご存知でしょうか?
10,000以上のクライアントがサーバに同時接続すると、ハード
ウェア性能が充分でも、ソフトウェアの処理方式や性能が不充分
で処理できない、という、昨今のネット利用...
4
1.C10K問題を解決する高速Web
Phoenix (+Elixir) の他プラットフォームとの性能比は、以下の
ような感じで、シングルスレッドのスピードが売りのGo言語と比べ
ても、なかなか良い勝負をしています
Elixirは、マルチプ...
5
2.Phoenixのインストール
6
2.Phoenixのインストール
ElixirイメージをDockerで起動します (-pが追加されています)
Phoenixをインストールします
Phoenixプロジェクトを作成します (要ネット接続)
作成したプロジェクトでPhoenix...
7
2.Phoenixのインストール
ブラウザで「http://localhost:4000」にアクセスすると、
Phoenixで作られたWebページが見れます
8
3.HTMLテンプレートを変更する
9
3.HTMLテンプレートを変更する
トップページ本文のHTMLテンプレートは下記フォルダにあります
「index.html.eex」をお好きなエディタで開き、以下の内容に
変更してください
ブラウザをリロードすると、以下のように変更されます...
10
3.HTMLテンプレートを変更する
「index.html.eex」には、ただのHTMLだけで無く、Elixirのコー
ドを「<%~%>」や「<%=~%>」で埋め込むことができます
上記変更後、リロードすると、以下のように変更されます
こ...
11
4.WebアプリからDB操作する
12
4.WebアプリからDB操作する
DBとして、PostgreSQLをインストールします
Dockerイメージ「trenpixster/elixir」は、Debian系である
Ubuntu利用のため、aptを使いますが、お使いのOSに応じて...
13
4.WebアプリからDB操作する
Node.jsとnpmをインストールします
DB利用するためのPhoenixプロジェクトを作成します (要ネット
接続)
# git clone https://github.com/creationix...
14
4.WebアプリからDB操作する
PostgreSQLユーザのパスワードを初期化します
モデルを格納するDBを作成します
DBが追加されていることを確認します
# sudo -u postgres psql -c "ALTER USER ...
15
4.WebアプリからDB操作する
Webアプリ用のモデル生成を行います
今回は、titleとbodyの2項目を持ったモデルを作ります
なお、第3~5引数は、以下で使われます
 「Tool」…lib/app/配下に作成するフォルダ名、テー...
16
4.WebアプリからDB操作する
lib/_web/router.exへのパス追加を行います
モデルのマイグレーションを行います
# mix ecto.migrate
defmodule AppWeb.Router do
use AppW...
17
4.WebアプリからDB操作する
マイグレーションの結果、テーブル追加されるので、確認します
# sudo -u postgres psql
psql (9.3.18)
Type "help" for help.
postgres=# c...
18
4.WebアプリからDB操作する
Phoenixサーバを起動します
ブラウザで「http://localhost:4000/posts」を表示すると、
「Title」「Body」がリストされるページが表示されます
# iex -S mix...
19
4.WebアプリからDB操作する
「New post」から、新たなアイテムを追加できます
20
4.WebアプリからDB操作する
追加後は以下の通りです
「Show」「Edit」「Delete」で追加されたアイテムを編集できます
21
5.JSON APIを作ってみる
22
5.JSON APIを作ってみる
JSON APIも、前述したWebアプリとほぼ同じ手順で作れます
まずJSON API用のPhoenixプロジェクトを作成します
モデルを格納するDBを作成します
JSON API用のモデル生成を行います...
23
5.JSON APIを作ってみる
web/router.exへのパス追加を行います
同時に、CSRFを防止する部分も解除しておきます
モデルのマイグレーションを行います
# mix ecto.migrate
defmodule ApiWe...
24
5.JSON APIを作ってみる
マイグレーションの結果、テーブル追加されるので、確認します
# sudo -u postgres psql
psql (9.3.18)
Type "help" for help.
postgres=# c...
25
5.JSON APIを作ってみる
JSON API用のコマンドとして、どのようなものが用意されたかは、
以下で確認できます
一覧取得 (index)は、/postsへのGETで行います
アイテム登録 (create)は、/postsへのP...
26
5.JSON APIを作ってみる
Phoenixサーバを起動します
JSONクライアントで「http://localhost:4000/posts」をGET
リクエストすると、アイテムが空のJSONが返ってきます
# iex -S mix...
27
5.JSON APIを作ってみる
「http://localhost:4000/posts」へのPOSTリクエストにて
titleとbodyを下記JSONのように指定すると、新たなアイテムを
追加できます
28
5.JSON APIを作ってみる
再度、「http://localhost:4000/posts」をGETすると、追加
されたアイテムを確認できます
29
6.Dockerイメージを保存する
30
6.Dockerイメージを保存する
ここまでにインストールしたPhoenix/PostgreSQL/node.js
は、Dockerイメージとして保存しておかないと消えてしまいます
保存するため、まず、以下手順でDockerを抜け、保存対...
31
6.Dockerイメージを保存する
Dockerイメージが保存されていることを確認します
元となったDockerプロセスは停止しておきます
今後、Phoenixを使う際は、保存したDockerイメージを以下の
通り起動するようにします
>...
32
6.Dockerイメージを保存する
次回起動時は、以下手順で起動します
PostgreSQLの起動状態が中途半端になる可能性あるため、
一度落として、再度起動した方が良いでしょう
> docker run --rm -v /c/piace...
33
7.高速なWeb&APIを気軽に開発
34
7.高速なWeb&APIを気軽に開発
今回は、Phoenixを使った、Webアプリ & REST APIの開発
の基本的な手順についてご説明しました
PhoenixによるWebアプリやREST APIの構築が「そこまで難し
く無いかも?」...
Upcoming SlideShare
Loading in …5
×

Elixir入門「第3回:Phoenix 1.3で高速webアプリ & REST APIアプリをサクッと書いてみる」

2,525 views

Published on

Elixirの上で動くWebアプリケーションサーバ「Phoenix」を使って、高速なWebアプリやREST APIをサクっと書いてみます

※旧Phoenix(バージョン1.2)対応のスライドは、以下にあります
https://www.slideshare.net/piacere_ex/elixir3phoenixweb-rest-api-75571536

Published in: Engineering
  • Be the first to comment

Elixir入門「第3回:Phoenix 1.3で高速webアプリ & REST APIアプリをサクッと書いてみる」

  1. 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. 2. 1 1. C10K問題を解決する高速Web 2. Phoenixのインストール 3. HTMLテンプレートを変更する 4. WebアプリからDB操作する 5. JSON APIを作ってみる 6. Dockerイメージを保存する 7. 高速なWeb&APIを気軽に開発 目次
  3. 3. 2 1.C10K問題を解決する高速Web
  4. 4. 3 1.C10K問題を解決する高速Web 「C10K問題」をご存知でしょうか? 10,000以上のクライアントがサーバに同時接続すると、ハード ウェア性能が充分でも、ソフトウェアの処理方式や性能が不充分 で処理できない、という、昨今のネット利用増大に伴う問題です この問題に対し、膨大なリクエストを、同時並行で効率良く処理 するサーバソフトウェアが求められています Elixirは、電話交換機の開発で生まれたErlangをベースとして いるため、膨大な同時並行のリクエストを効率良く処理できます そのElixirの上に構築されたWebアプリケーションフレームワークで あるPhoenixも、高速に同時並行リクエストを処理できます
  5. 5. 4 1.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. 6. 5 2.Phoenixのインストール
  7. 7. 6 2.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. 8. 7 2.Phoenixのインストール ブラウザで「http://localhost:4000」にアクセスすると、 Phoenixで作られたWebページが見れます
  9. 9. 8 3.HTMLテンプレートを変更する
  10. 10. 9 3.HTMLテンプレートを変更する トップページ本文のHTMLテンプレートは下記フォルダにあります 「index.html.eex」をお好きなエディタで開き、以下の内容に 変更してください ブラウザをリロードすると、以下のように変更されます ※なお、Dockerでは無く、ローカルPCでPhoenixサーバを起動すると、リロードしなくてもリアルタイムで反映されます # cd lib/web_nodb_web/templates/page ここが本文です。<br>
  11. 11. 10 3.HTMLテンプレートを変更する 「index.html.eex」には、ただのHTMLだけで無く、Elixirのコー ドを「<%~%>」や「<%=~%>」で埋め込むことができます 上記変更後、リロードすると、以下のように変更されます ここが本文です。<br> <%= [ "hoge", "foo" ] |> List.to_string %>
  12. 12. 11 4.WebアプリからDB操作する
  13. 13. 12 4.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. 14. 13 4.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. 15. 14 4.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. 16. 15 4.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. 17. 16 4.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. 18. 17 4.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. 19. 18 4.WebアプリからDB操作する Phoenixサーバを起動します ブラウザで「http://localhost:4000/posts」を表示すると、 「Title」「Body」がリストされるページが表示されます # iex -S mix phx.server
  20. 20. 19 4.WebアプリからDB操作する 「New post」から、新たなアイテムを追加できます
  21. 21. 20 4.WebアプリからDB操作する 追加後は以下の通りです 「Show」「Edit」「Delete」で追加されたアイテムを編集できます
  22. 22. 21 5.JSON APIを作ってみる
  23. 23. 22 5.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. 24. 23 5.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. 25. 24 5.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. 26. 25 5.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. 27. 26 5.JSON APIを作ってみる Phoenixサーバを起動します JSONクライアントで「http://localhost:4000/posts」をGET リクエストすると、アイテムが空のJSONが返ってきます # iex -S mix phx.server Google ウェブストアで Postmanをインストー ルしてください
  28. 28. 27 5.JSON APIを作ってみる 「http://localhost:4000/posts」へのPOSTリクエストにて titleとbodyを下記JSONのように指定すると、新たなアイテムを 追加できます
  29. 29. 28 5.JSON APIを作ってみる 再度、「http://localhost:4000/posts」をGETすると、追加 されたアイテムを確認できます
  30. 30. 29 6.Dockerイメージを保存する
  31. 31. 30 6.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. 32. 31 6.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. 33. 32 6.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. 34. 33 7.高速なWeb&APIを気軽に開発
  35. 35. 34 7.高速なWeb&APIを気軽に開発 今回は、Phoenixを使った、Webアプリ & REST APIの開発 の基本的な手順についてご説明しました PhoenixによるWebアプリやREST APIの構築が「そこまで難し く無いかも?」と思っていただけたら、この入門としては大成功です Phoenixは、WebアプリおよびJSON APIの気軽な構築を実現 しつつ、高速・並行処理も両立できる、革新的なWebアプリケー ションフレームワークのため、今後、多用されることが想定されます 今回は、高負荷な処理について言及しませんでしたが、別途、 他のフレームワークとの性能比較を行う回も設けたいと思います 仕事でも趣味でも、プログラミングライフをエンジョイしてください!

×