画像やCSSなどの静的ファイルを利用するには、Expressにあらかじめ備わっているexpress.static関数を使います。
下記の関連ページで作成したプロジェクトに、スタイルシート（style.css）を適用してみます。
関連ページ
まずpublicディレクトリを作成したら、その中にstyle.cssを作成します。
|
1 2 3 4 |
h1{ color:#F00; font-size: 22px; } |
ファイル構造は下記のようになります。
app.jsに、上記で作成した「public」を設定したexpress.staticを適用させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const express = require('express') const ejs = require('ejs') const app = express() app.set('ejs',ejs.renderFile) app.use(express.static('public')) app.get('/', (req, res) => { res.render('index.ejs',{title:'Hello world'}) }) app.listen(3000, () => { console.log('start') }) |
スタイルシートのリンクを設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="style.css" rel="stylesheet"> </head> <body> <h1> <%=title %> </h1> </body> </html> |
以上でスタイルが変更されるのが確認できます。
実際にスタイルシートは下記アドレスで確認することができます。
http://localhost:3000/style.css
下記の「hello」のようにプレフィックスを設定することも可能です。
|
1 |
app.use("/hello", express.static(__dirname + "/public")); |
プレフィックスを設定したら、スタイルシートのリンクも変更しておきます。
|
1 |
<link href="hello/style.css" rel="stylesheet"> |
実際にスタイルシートのアドレスが、hello以下になっていることを確認できます。
http://localhost:3000/hello/style.css
