Expressで静的ファイルを提供 - 駆け出しのエンジニア日記

イメージ（画像）、CSS ファイル、JavaScript ファイルなどの静的ファイルを提供する

には、Express に標準実装されている express.static ミドルウェア関数を使うことにな

ります。

構文から見てみましょう。

　app.use(express.static('ディレクトリ名'));

ディレクトリ名から上記の静的ファイルを提供したいと教えることが可能です。

実際にサンプルを書いてみます。

index.js

const path = require('path');
const express = require('express');
const app = express();
const redditData = require('./data.json');
app.use(express.static('public'));
app.set('views', path.join(__dirname, 'views'));
//ejsを使えるように宣言
app.set('view engine', 'ejs');

app.get('/r/:subreddit', (req, res) => {
 const { subreddit } = req.params;
 const data = redditData[subreddit];
 if (data) {
 res.render('subreddit', { ...data });
 } else {
 res.render('notfound', { subreddit });
 }
})
app.listen(3000, () => {
 console.log('ポート3000で待ち受け');
})

太文字の「app.use(express.static('public'));」部分ですね。

今回のディレクトリ名は「public」として、cssファイルを作成しておきます。

app.css

body {
 background-color: aquamarine;
}

このように記述することで、

背景色が変わっています。

もし、別のディレクトリから Express アプリケーションを実行する場合は、

express.static 関数に指定するパスは、node プロセスを起動するディレクトリに対し

て相対的なため、提供するディレクトリの絶対パスを使用することが必要です。

その場合は下記のように記述します。

// app.use(express.static('public'));
//下記を記述しておくことで階層が異なっても、実行可能
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));