はじめに
ElixirにてCowboyを直接動かすための記事となります。
前回の記事では、cssやJavaScriptなどのスタティックファイルをレスポンスで返すようにして、HTMLで読み込めるようにしました。
今回の記事では、画像ファイルをrouteから受け渡すように設定を行います。
バージョン
使用した言語やライブラリのバージョンは下記となります。
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の場合
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
<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>
記載したコードの実行
コードの記述が完了しましたので、それでは実行していきましょう。
いつも通り iex -S mix
にて cowboy を実行していき、http://localhost:4000/xxx
にアクセスしてみましょう。
下記のようにブラウザの画面に表示されれば成功です。()
最後に
前回と違って今回はHandlerを記載せずにスタティックファイルの受け渡しをおこなうことができました。
スタティックファイルの受け渡しだけならば、今回の方法で受け渡しができますので是非試してみてください。
それではまた次回
参考サイト
Cowboy User Guide
Cowboy User Guide
Cowboy Tutorial Part 2: Creating Flat File Blog