問題

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ディレクトリはデフォルトの設定。
以下のようにプログラム上に書き込めば、任意のディレクトリを指定することができる。

README (Japanese) - Sinatra

静的ファイルは./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というパスは省略しなければならないこと。

したがって、

<link rel="stylesheet" href="/css/style.css" />
<script type="text/jsx;harmony=true" src="/js/test.js"></script>

と指定することでようやく読み込むことができた。

結論

Railsと比べ制限が少ないと言われるSinatraだが、思ったところに落とし穴があった。