Help us understand the problem. What is going on with this article?

SinatraでCSSやJSファイルが読み込めないときの解決策

More than 3 years have passed since last update.

問題

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だが、思ったところに落とし穴があった。

kawabex
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away