Express.jsで静的ファイル配信をもっと便利に！オプションパラメータの使い方
Express.js で静的ファイルを提供する方法
Express.js では、express.static ミドルウェア関数を使用して、静的ファイルを提供することができます。静的ファイルとは、HTML ファイル、CSS ファイル、JavaScript ファイル、画像ファイルなどの、サーバー側で処理する必要のないファイルです。
設定方法
express.static ミドルウェア関数は、以下の 2 つの引数を受け取ります。
- 1 つ目: 静的ファイルの保存場所を指定するディレクトリパス
- 2 つ目: オプションパラメータ (省略可)
以下のコード例は、public ディレクトリ内の静的ファイルを提供する設定例です。
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000);
この設定により、ブラウザから http://localhost:3000/index.html などの URL にアクセスすると、public ディレクトリ内の index.html ファイルが提供されます。
オプションパラメータ
express.static ミドルウェア関数の 2 つ目の引数として、オプションパラメータを設定することができます。主なオプションパラメータは以下の通りです。
- cacheControl: 静的ファイルのキャッシュ制御設定
- etag: ETag ヘッダーの設定
- index: デフォルトファイル名 (省略時は
index.html) - maxAge: キャッシュ有効期限 (ミリ秒単位)
詳細は、Express.js 公式ドキュメントを参照してください。
ルーティングと静的ファイル
Express.js では、ルーティング機能を使用して、特定の URL パスにアクセスした際に特定の処理を実行することができます。
静的ファイルの場合、通常はルーティング設定ではなく、express.static ミドルウェア関数を使用して提供します。
ただし、特定の条件下で静的ファイルを提供したい場合は、ルーティング設定と組み合わせて使用することもできます。
Express.js で静的ファイルを提供するには、express.static ミドルウェア関数を使用します。設定方法は簡単で、オプションパラメータを使用して、キャッシュ制御などの設定を行うことができます。
ルーティングと静的ファイルの組み合わせについても理解しておくと、より柔軟なアプリケーション開発が可能になります。
const express = require('express');
const app = express();
// public ディレクトリ内の静的ファイルを提供
app.use(express.static('public'));
// ルーティング設定
app.get('/', (req, res) => {
res.sendFile('index.html', { root: 'public' });
});
app.listen(3000);
このコードでは、以下の処理が行われます。
expressモジュールを読み込み、Express アプリケーションを作成/パスへのアクセスに対して、publicディレクトリ内のindex.htmlファイルを送信- アプリケーションをポート 3000 で起動
以下のサンプルコードは、express.static ミドルウェア関数のオプションパラメータを設定する例です。
// キャッシュ有効期限を設定
app.use(express.static('public', {
maxAge: 3600000 // 1 時間
}));
// ETag ヘッダーを設定
app.use(express.static('public', {
etag: false
}));
Express.js で静的ファイルを提供する他の方法
app.get メソッドを使用して、特定の URL パスへのアクセスに対して静的ファイルを送信することができます。
app.get('/index.html', (req, res) => {
res.sendFile('index.html', { root: 'public' });
});
fs モジュールを使用する
Node.js の fs モジュールを使用して、静的ファイルを読み込み、レスポンスとして送信することができます。
const fs = require('fs');
app.get('/index.html', (req, res) => {
fs.readFile('public/index.html', (err, data) => {
if (err) {
res.sendStatus(500);
return;
}
res.send(data);
});
});
サードパーティ製のライブラリを使用する
serve-static などのサードパーティ製ライブラリを使用して、静的ファイルを提供することができます。
const serveStatic = require('serve-static');
app.use(serveStatic('public'));
- シンプルなアプリケーションであれば、
express.staticミドルウェア関数を使用するのが最も簡単です。 - 特定の URL パスに対して静的ファイルを送信したい場合は、
app.getメソッドを使用することができます。 - より柔軟な方法で静的ファイルを提供したい場合は、
fsモジュールを使用するか、サードパーティ製ライブラリを使用することができます。
Express.js で静的ファイルを提供するには、いくつかの方法があります。どの方法を選択するべきかは、アプリケーションの要件によって異なります。
node.js express
