Elixir入門「第3回：Phoenix 1.3で高速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作成 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」というプロジェクトを利用するとコード自動生成に失敗し、エラーが発生するので、避けてください

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アプリケーションフレームワークのため、今後、多用されることが想定されます今回は、高負荷な処理について言及しませんでしたが、別途、他のフレームワークとの性能比較を行う回も設けたいと思います仕事でも趣味でも、プログラミングライフをエンジョイしてください！

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

fukuoka.ex