5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-05-09

問題

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というパスは省略しなければならないこと。

したがって、

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

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

結論

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

5
3
2

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
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?