![9３．HTMLテンプレートを変更する「index.html.eex」には、ただのHTMLだけで無く、Elixirのコードを「<%～%>」や「<%=～%>」で埋め込むことができます上記変更後、リロードすると、以下のように変更されますここが本文です。<br><%= [ "hoge", "foo" ] |> List.to_string %>](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fk5owu33ksuasevbtv3vt-signature-fe60d05c2f14d508dc36c01be5100275dd7cf8de1ff754d48227ac771460b270-poli-170501164816%2f75%2fElixir-3-Phoenix-1-2-Web-REST-API-10-2048.jpg&f=jpg&w=240)
![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 psqlpsql (9.3.16)Type "help" for help.postgres=# ¥q](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fk5owu33ksuasevbtv3vt-signature-fe60d05c2f14d508dc36c01be5100275dd7cf8de1ff754d48227ac771460b270-poli-170501164816%2f75%2fElixir-3-Phoenix-1-2-Web-REST-API-12-2048.jpg&f=jpg&w=240)
![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](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fk5owu33ksuasevbtv3vt-signature-fe60d05c2f14d508dc36c01be5100275dd7cf8de1ff754d48227ac771460b270-poli-170501164816%2f75%2fElixir-3-Phoenix-1-2-Web-REST-API-22-2048.jpg&f=jpg&w=240)
![22５．JSON APIを作ってみるweb/router.exへのパス追加を行います同時に、CSRFを防止する部分も解除しておきますモデルのマイグレーションを行います# mix ecto.migratedefmodule Api.Router douse Api.Web, :routerpipeline :browser do…plug :fetch_flash# plug :protect_from_forgeryplug :put_secure_browser_headers…scope "/", Api dopipe_through :browser # Use the default browser stackget "/", PageController, :indexresources "/posts", PostController, except: [:new, :edit]end…endCSRF(cross-site request forgeries)の防止が行われると、CSRFトークン(csrf_token)を渡さないとアクセスできなくなるため解除する※ステートレスなREST APIでの本CSRF対策は実装が難しい](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fk5owu33ksuasevbtv3vt-signature-fe60d05c2f14d508dc36c01be5100275dd7cf8de1ff754d48227ac771460b270-poli-170501164816%2f75%2fElixir-3-Phoenix-1-2-Web-REST-API-23-2048.jpg&f=jpg&w=240)
Uploaded byfukuoka.ex
3,006 views
Elixir入門「第3回：Phoenix 1.2で高速Webアプリ ＆ REST APIをサクッと書いてみる」【旧版】※新版あります
※本スライド、旧版（Phoenix 1.2）のため、下記最新版をご覧くださいhttps://www.slideshare.net/piacere_ex/elixir3phoenix-13web-rest-api-81219622Elixirの上で動くWebアプリケーションサーバ「Phoenix」を使って、高速なWebアプリやREST APIをサクっと書いてみます
Recommended
More Related Content
What's hot
Similar to Elixir入門「第3回：Phoenix 1.2で高速Webアプリ ＆ REST APIをサクッと書いてみる」【旧版】※新版あります
More from fukuoka.ex
Elixir入門「第3回：Phoenix 1.2で高速Webアプリ ＆ REST APIをサクッと書いてみる」【旧版】※新版あります
- 1.Elixir入門 第3回「Phoenixで高速Webアプリ ＆RESTAPIをサクッと書いてみる」with Docker2017/04/14 ver0.5作成2017/04/26 ver0.9作成2017/04/28 ver1.0作成
- 2.11. C10K問題を解決する高速Web2. Phoenixのインストール3.HTMLテンプレートを変更する4. WebアプリからDB操作する5. JSON APIを作ってみる6. Dockerイメージを保存する7. 高速なWeb&APIを気軽に開発目次
- 3.
- 4.
- 5.
- 6.5２．PhoenixのインストールElixirイメージをDockerで起動します (-pが追加されています)PhoenixをインストールしますPhoenixプロジェクトを作成します (要ネット接続)作成したプロジェクトでPhoenixサーバーを起動します>docker run --rm -v /c/piacere/code:/code -p 4000:4000 -i -ttrenpixster/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.
- 8.
- 9.
- 10.
- 11.
- 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 psqlpsql (9.3.16)Type "help" for help.postgres=# ¥q
- 13.12４．WebアプリからDB操作するNode.jsとnpmをインストールしますDB利用するためのPhoenixプロジェクトを作成します (要ネット接続)# gitclone 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 -upostgres psql -c "ALTER USER postgres PASSWORD 'postgres';"# sudo service postgresql restart# mix ecto.create# sudo -u postgres psql -lList of databasesName | 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/postgrestemplate1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +| | | | | postgres=CTc/postgresweb_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.htmlPost posts title:string body:text…Add the resource to your browser scope in web/router.ex:resources "/posts", PostControllerRemember to update your repository by running migrations:$ mix ecto.migrate
- 16.15４．WebアプリからDB操作するweb/router.exへのパス追加を行いますモデルのマイグレーションを行います# mix ecto.migratedefmoduleWeb.Router douse Web.Web, :router…scope "/", Web dopipe_through :browser # Use the default browser stackget "/", PageController, :indexresources "/posts", PostControllerend…end
- 17.16４．WebアプリからDB操作するマイグレーションの結果、テーブル追加されるので、確認します# sudo -upostgres psqlpsql (9.3.16)Type "help" for help.postgres=# ¥c web_devYou are now connected to database "web_dev" as user "postgres".web_dev=# ¥d postsTable "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 nullupdated_at | timestamp without time zone | not nullIndexes:"posts_pkey" PRIMARY KEY, btree (id)
- 18.
- 19.
- 20.
- 21.
- 22.21５．JSON APIを作ってみるJSON APIも、前述したWebアプリとほぼ同じ手順で作れますまずJSONAPI用の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を防止する部分も解除しておきますモデルのマイグレーションを行います# mixecto.migratedefmodule Api.Router douse Api.Web, :routerpipeline :browser do…plug :fetch_flash# plug :protect_from_forgeryplug :put_secure_browser_headers…scope "/", Api dopipe_through :browser # Use the default browser stackget "/", PageController, :indexresources "/posts", PostController, except: [:new, :edit]end…endCSRF(cross-site request forgeries)の防止が行われると、CSRFトークン(csrf_token)を渡さないとアクセスできなくなるため解除する※ステートレスなREST APIでの本CSRF対策は実装が難しい
- 24.23５．JSON APIを作ってみるマイグレーションの結果、テーブル追加されるので、確認します# sudo-u postgres psqlpsql (9.3.16)Type "help" for help.postgres=# ¥c api_devYou are now connected to database “api_dev" as user "postgres".web_dev=# ¥d postsTable "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 nullupdated_at | timestamp without time zone | not nullIndexes:"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.routespage_path GET / Api.PageController :indexpost_path GET /posts Api.PostController :indexpost_path GET /posts/:id Api.PostController :showpost_path POST /posts Api.PostController :createpost_path PATCH /posts/:id Api.PostController :updatePUT /posts/:id Api.PostController :updatepost_path DELETE /posts/:id Api.PostController :delete
- 26.
- 27.
- 28.
- 29.
- 30.29６．Dockerイメージを保存するここまでにインストールしたPhoenix／PostgreSQL／node.jsは、Dockerイメージとして保存しておかないと消えてしまいます保存するため、まず、以下手順でDockerを抜け、保存対象となるDockerプロセスを確認しますDockerプロセスを、Dockerイメージとして保存します#【Ctrlキーを押下し続けたまま、pキー → qキーと打鍵するとDockerを抜けます】>docker ps -aCONTAINER ID IMAGE COMMAND CREATED STATUSPORTS NAMES5e05bff83fe6 trenpixster/elixir "/bin/bash" 2 minutes ago Up 2minutes 0.0.0.0:4000->4000/tcp blissful_wozniak> docker commit -m "Phoenix/PostgreSQL/node.js installed" blissful_wozniaklocal/phoenixsha256:84b71bd343938a4eb482fce3f295b44c4c5872ac32d883aa900c6e6092c26bcd
- 31.30６．Dockerイメージを保存するDockerイメージが保存されていることを確認します元となったDockerプロセスは停止しておきます今後、Phoenixを使う際は、保存したDockerイメージを以下の通り起動するようにします> docker imagesREPOSITORYTAG IMAGE ID CREATED SIZElocal/phoenix latest 4c81c5756057 1 second ago 684MBtrenpixster/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.
- 33.32７．高速なWeb&APIを気軽に開発今回は、Phoenixを使った、Webアプリ ＆ RESTAPIの開発の基本的な手順についてご説明しましたPhoenixによるWebアプリやREST APIの構築が「そこまで難しく無いかも？」と思っていただけたら、この入門としては大成功ですPhoenixは、WebアプリおよびJSON APIの気軽な構築を実現しつつ、高速・並行処理も両立できる、革新的なWebアプリケーションフレームワークのため、今後、多用されることが想定されます今回は、高負荷な処理について言及しませんでしたが、別途、他のフレームワークとの性能比較を行う回も設けたいと思います仕事でも趣味でも、プログラミングライフをエンジョイしてください！