LoginSignup
1

More than 5 years have passed since last update.

ElixirからCowboy 1.0と2.0を使ってみる Part 6

Posted at

はじめに

ElixirにてCowboyを直接動かすための記事となります。
前回の記事では、cssやJavaScriptなどのスタティックファイルをレスポンスで返すようにして、HTMLで読み込めるようにしました。
今回の記事では、画像ファイルをrouteから受け渡すように設定を行います。

Cowboy1.0のサンプルコードはこちらになります

Cowboy2.0のサンプルコードはこちらになります

バージョン

使用した言語やライブラリのバージョンは下記となります。

cowboy 1.0のバージョン

Version
Elixir 1.3.2
Erlang 19.2
Cowboy 1.0.4

cowboy 2.0のバージョン

Version
Elixir 1.3.2
Erlang 19.2
Cowboy 2.0.0-pre4

リクエスト情報からHTMLを作成

今回はimage用のファイルをrouteに設定して、画像ファイルをHTMLに受け渡してみます。
:cowboy_static にて今回は画像ファイルを引き渡しますが、:cowboy_staticで引き渡す場合にはprivディレクトリ配下のディレクトリからスタティックファイルを受け渡すするようになっています。
routesに設定を行ったら、htmlにimageファイルの読み込みとimageファイルを所定のディレクトリに配置して完成です。

cowboy 1.0と2.0の場合

lib/elixir_cowboy_example.ex
  def run do
    routes = [
      {"/", ElixirCowboyExample.Handler, []},
      {"/dynamic", ElixirCowboyExample.DynamicPageHandler, []},
      {"/json", ElixirCowboyExample.JsonHandler, []},
      {"/:html", ElixirCowboyExample.Handler, []},
      {"/priv/static/js/:javascript", ElixirCowboyExample.JavascriptHandler, []},
      {"/priv/static/css/:css", ElixirCowboyExample.CssHandler, []},
      {"/priv/static/image/[...]", :cowboy_static, {:priv_dir, :elixir_cowboy_example, "static/image"}}
    ]

    dispatch = :cowboy_router.compile([{:_, routes}])

    opts = [port: 4000]
    env = [dispatch: dispatch]

    {:ok, _pid} = :cowboy.start_http(:http, 100, opts, [env: env])
  end
priv/static/html/index.html
<html>
  <head>
    <meta charset=\"utf-8\">
      <title>Cowboy Hello!</title>
    <script type="text/javascript" src="priv/static/js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="priv/static/css/main.css">
  </head>
  <body>
    <h1>Cowboy Hello!!</h1>
    <h2>file load test<h2>
    <img src="priv/static/image/button.png" class="button" type='submit' value='test' onclick="func()">
  </body>
</html>

サンプル用の画像としては下記の画像を使用しております。
button.png

記載したコードの実行

コードの記述が完了しましたので、それでは実行していきましょう。
いつも通り iex -S mix にて cowboy を実行していき、http://localhost:4000/xxxにアクセスしてみましょう。
下記のようにブラウザの画面に表示されれば成功です。()

スクリーンショット 2017-01-11 15.09.17.png

最後に

前回と違って今回はHandlerを記載せずにスタティックファイルの受け渡しをおこなうことができました。
スタティックファイルの受け渡しだけならば、今回の方法で受け渡しができますので是非試してみてください。
それではまた次回

参考サイト

Cowboy User Guide
Cowboy User Guide
Cowboy Tutorial Part 2: Creating Flat File Blog

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1