Expressで静的ファイル（static）を利用する

画像やCSSなどの静的ファイルを利用するには、Expressにあらかじめ備わっているexpress.static関数を使います。

下記の関連ページで作成したプロジェクトに、スタイルシート（style.css）を適用してみます。

関連ページ

まずpublicディレクトリを作成したら、その中にstyle.cssを作成します。

h1{
    color:#F00;
    font-size: 22px;
}

h1{

color:#F00;

font-size: 22px;

}

ファイル構造は下記のようになります。

app.jsに、上記で作成した「public」を設定したexpress.staticを適用させます。

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')
})

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')

})

スタイルシートのリンクを設定します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <h1>
        <%=title %>
    </h1>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>

<%=title %>

</h1>

</body>

</html>

以上でスタイルが変更されるのが確認できます。

実際にスタイルシートは下記アドレスで確認することができます。

http://localhost:3000/style.css

下記の「hello」のようにプレフィックスを設定することも可能です。

app.use("/hello", express.static(__dirname + "/public"));

1	app.use("/hello", express.static(__dirname + "/public"));

プレフィックスを設定したら、スタイルシートのリンクも変更しておきます。

<link href="hello/style.css" rel="stylesheet">

1	<link href="hello/style.css" rel="stylesheet">

実際にスタイルシートのアドレスが、hello以下になっていることを確認できます。

http://localhost:3000/hello/style.css

Pocket

思考の葉

思考の葉

Expressで静的ファイル（static）を利用する