Expressで静的ファイルを提供する方法

以下に、いくつかの方法をコード例とともに紹介します。

Expressの組み込みの静的ファイルミドルウェアを使用する方法:

Expressには、静的ファイルを提供するための組み込みのミドルウェアがあります。以下のように、静的ファイルが格納されているディレクトリを指定して使用します。

const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

上記の例では、publicディレクトリ内のファイルが静的ファイルとして提供されます。たとえば、public/index.htmlは、http://localhost:3000/index.htmlとしてアクセスできます。

ルートごとに静的ファイルを提供する方法:

Expressのexpress.staticミドルウェアは、ルートごとに異なるディレクトリを指定することもできます。以下のように、各ルートに対して個別の静的ファイルディレクトリを指定します。

const express = require('express');
const app = express();
app.use('/public1', express.static('public1'));
app.use('/public2', express.static('public2'));
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

上記の例では、/public1ルートはpublic1ディレクトリ内のファイルを提供し、/public2ルートはpublic2ディレクトリ内のファイルを提供します。

静的ファイルのキャッシュ制御:

Expressの静的ファイルミドルウェアは、デフォルトでキャッシュを使用します。キャッシュを無効にするには、以下のようにオプションを指定します。

app.use(express.static('public', { maxAge: 0 }));

上記の例では、キャッシュの最大期間を0に設定しています。

これらはいくつかの一般的な方法ですが、Expressを使用して静的ファイルを提供するためには他にもさまざまな方法があります。詳細については、Expressの公式ドキュメントを参照してください。

以上が、Expressで静的ファイルを提供する方法についての解説です。これらの方法を利用することで、簡単にクライアントサイドの静的ファイルを提供することができます。