脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

Sinatraでcssやjsファイルを読み込む方法

問題

sinatraで普通に外部ファイルにcssjavaScriptを書いてそれを読み込もうとしたんだけど404エラーになって読み込めない

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

192.168.33.1 - - [05/Aug/2015:05:19:39 +0000] "GET /test.css HTTP/1.1" 404 38 0.001
192.168.33.1 - - [05/Aug/2015:05:19:37 +0000] "GET /test.js HTTP/1.1" 404 38 0.0009

解決法

  • sinatracssやjsファイルは、appのルートにpublicディレクトリを作成して、その下に配置しなくてはいけない
$ ll
total 100
drwxrwxr-x 4 roma roma  4096 Aug  5 04:07 public
-rw-rw-r-- 1 roma roma   720 Jul 28 00:07 api.rb
drwxrwxr-x 2 roma roma  4096 Aug  5 05:22 views

$ ls -Rl public/
public/:
total 8
drwxrwxr-x 2 roma roma 4096 Aug  5 04:06 css
drwxrwxr-x 2 roma roma 4096 Aug  5 04:07 js

public/css:
total 4
-rw-rw-r-- 1 roma roma 40 Aug  5 04:01 test.css

public/js:
total 8
-rwxrwxrwx 1 roma roma 7442 Aug  5 01:23 test.js
  • さらに、呼び出すときにはこのpublicというディレクトリ名は外さなければならない。なので、、
<link rel="stylesheet" href="/css/test.css" />
<script type="text/jsx;harmony=true" src="/js/test.js"></script>

こうすると無事読み込むことができた。


sinatraRailsと比べてルールが少ないから、細かい制約を気にせず自由でにコーディング出来るぜヒャッハーってやってると、思わぬところでつまづく。。