問題
Sinatraで外部ファイルからcssファイルやjsファイルを読み込もうと思っても、404エラーが吐き出される。
<link rel="stylesheet" href="style.css" />
<script type="text/jsx;harmony=true" src="test.js"></script>
エラー結果↓
[09/May/2017:13:20:43 +0900] "GET /style.css HTTP/1.1" 404 476 0.0007
[09/May/2017:13:20:43 JST] "GET /style.css HTTP/1.1" 404 476
解決策
appのルートにpublicディレクトリを作成して、その下に配置する
~~これはSinatraのルールとのこと。~~webサーバのドキュメントルートは全てここを指定。画像もこのディレクトリに保存する。
[コメントで頂いた指摘を反映させるため追記 2017/5/11]
publicディレクトリはデフォルトの設定。
以下のようにプログラム上に書き込めば、任意のディレクトリを指定することができる。
静的ファイルは./publicディレクトリから配信されます。 :public_folderオプションを指定することで別の場所を指定することができます。
set :public_folder, File.dirname(FILE) + '/static'
[追記終わり]
***
$ ls -lR public/
public/:
合計 8
drwxrwxr-x 2 user01 user01 4096 5月 9 13:40 2017 css
drwxrwxr-x 2 user01 user01 4096 5月 9 13:40 2017 js
public/css:
合計 4
-rw-rw-r-- 1 user01 user01 108 5月 9 13:14 2017 style.css
public/js:
合計 8
-rw-rw-r-- 1 user01 user01 7550 5月 9 13:40 2017 test.js
ここで注意しなければいけないのは、これらを呼び出す際にはpublicというパスは省略しなければならないこと。
したがって、
```html
<link rel="stylesheet" href="/css/style.css" />
<script type="text/jsx;harmony=true" src="/js/test.js"></script>
と指定することでようやく読み込むことができた。
結論
Railsと比べ制限が少ないと言われるSinatraだが、思ったところに落とし穴があった。