Express.jsで静的ファイルをレスポンスする方法

静的ファイルを効率的に扱い、セキュリティを強化するためのExpress.jsの活用方法を学びましょう。このガイドでは、ミドルウェアの設定から仮想パスプレフィックスの使用まで、Express.jsで静的ファイルをハンドリングするためのステップを詳しく解説します。

はじめに

Express.jsを使用すると、デフォルトでは静的ファイルをレスポンスとして返すことができません。これは、画像や動画などの静的ファイルを扱うためには、ミドルウェアを設定し、静的ファイルへのアクセスを許可する必要があります。 今回、静的ファイルのルーティング、そして仮想パスプレフィックスの使用について詳しく解説します。

ここでは、以下バージョンを使用した、ルーティング方法を説明します。

Express v4.18.1
nodejs v19.7.0

また、今回作成するコードは全て、GitHubに掲載しています。

静的ファイルのルーティング

静的ファイルを提供する最小限のコードは以下の通りです。

static.js

var express = require("express");
var app = express();
app.use(express.static("public"));

app.listen(3000, () => console.log("listening on http://localhost:3000"));

解説

  • Expressモジュールのインポート
var express = require("express");
var app = express();

上記コードでは、expressという名前のモジュールを読み込み、新しいExpressアプリケーションを作成しています。

  • 静的ファイルのホスティング
app.use(express.static("public"));

上記コードでは、express.static関数を使用して、“public"という名前のディレクトリ内の静的ファイルをホスティングしています。これにより、このディレクトリ内のファイルは、そのファイル名をパスとするURLで直接アクセスすることができます。

  • サーバーの起動
app.listen(3000, () => console.log("listening on http://localhost:3000"));

このコードは、3000番ポートでサーバーを起動します。サーバーが正常に起動すると、’listening on http://localhost:3000’というメッセージがコンソールに表示されます。

/public/static.txt

hello world

そして、以下のようにディレクトリ構造を設定します。

/root
|-- static.js
|-- public
    |-- static.txt

以上の設定により、publicフォルダに配置された静的ファイルにアクセスすることができます。

curl http://localhost:3000/public/static.txt

仮想パスプレフィックスの利用

プロジェクトのディレクトリ構造をそのまま公開すると、セキュリティ上の問題が生じる可能性があります。その問題を解決するために、仮想パスプレフィックスを使用することが推奨されます。

仮想パスプレフィックスとは、実際のファイルシステムパスには存在しないパスを設定し、それを特定のディレクトリにマッピングする機能です。

virtual.js

var express = require("express");
var app = express();
app.use(express.static("public"));
app.use("/virtual", express.static("virtual"));

app.listen(3000, () => console.log("listening on http://localhost:3000"));

解説

  • Expressモジュールのインポート
var express = require("express");
var app = express();

上記のコードはexpressという名前のモジュールをインポートし、新しいExpressアプリケーションを作成します。

  • 静的ファイルのホスティング
app.use(express.static("public"));

このコードは、express.static関数を用いて、“public"という名前のディレクトリ内の静的ファイルをホスティングします。これにより、このディレクトリ内のファイルは、そのファイル名をパスとするURLで直接アクセスすることが可能になります。

  • 仮想パスプレフィックスを用いた静的ファイルのホスティング
app.use("/virtual", express.static("virtual"));

上記のコードは、“virtual"という名前のディレクトリ内の静的ファイルをホスティングし、それらに”/virtual"という仮想パスプレフィックスを追加します。これにより、このディレクトリ内のファイルは、"/virtual/“を前置したURLでアクセスすることができます。

  • サーバーの起動
app.listen(3000, () => console.log("listening on http://localhost:3000"));

このコードは、3000番ポートでサーバーを起動します。サーバーが正常に起動すると、’listening on http://localhost:3000’というメッセージがコンソールに表示されます。

static.txt

hello world

そして、以下のようにディレクトリ構造を設定します。

/root |– virtual.js |– public |– static.txt

テスト 

curl http://localhost:3000/virtual/static.txt

まとめ

この記事ではExpress.jsを使用して静的ファイルを扱う方法について説明しました。まず、静的ファイルへのアクセスを許可するためのミドルウェアを設定する方法、次に静的ファイルをルーティングする方法、最後に仮想パスプレフィックスを使用してセキュリティを強化する方法を学びました。これらの知識を活用することで、Express.jsを使用したWebアプリケーション開発がより容易になるでしょう。

← Fastifyで静的ファイルをレスポンスする方法
NestJSの例外フィルターの作成と利用 →