Express での静的ファイルの提供

画像、CSSファイル、JavaScriptファイルなどの静的ファイルを提供するには、Express で組み込まれているミドルウェア関数「express.static」を使用します。

関数の署名は次のとおりです:

express.static(root, [options]);

root 引数は、静的アセットを提供するルートディレクトリを指定します。 引数 options の詳細については、 express.static を参照してください。

例えば、publicという名前のディレクトリに画像、CSSファイル、JavaScriptファイルを表示するには、次のコードを使用します。

app.use(express.static('public'));

public ディレクトリにあるファイルを読み込むことができます。

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

複数の静的アセットディレクトリを使用するには、express.static ミドルウェア関数を複数回呼び出します。

app.use(express.static('public'));
app.use(express.static('files'));

Express は、express.static ミドルウェア関数で静的ディレクトリを設定する順序でファイルを検索します。

`expressで提供されるファイルに対して、仮想パスプレフィックス(ファイルシステム内にパスが実際に存在しない場所)を作成します。 以下に示すように、staticディレクトリのmount pathを指定します。

app.use('/static', express.static('public'));

/static というプレフィックスから、 public ディレクトリにあるファイルをロードできます。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

しかし、express.static関数に与えるパスは、nodeプロセスを起動したディレクトリからの相対パスです。 expressアプリを別のディレクトリから実行する場合、提供したいディレクトリの絶対パスを使用する方が安全です:

const path = require('path');
app.use('/static', express.static(path.join(__dirname, 'public')));

serve-static 関数とそのオプションの詳細については、 serve-static を参照してください。