Expressによる静的ファイルの管理



Expressによる静的ファイルの管理

画像、CSS、JavaScriptファイルなどの静的ファイルは、Expressに内蔵されたexpress.staticによって容易に管理できます.
静的リソースファイルが存在するディレクトリをパラメータとして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

すべてのファイルのパスは、保存ディレクトリに対するものであるため、静的ファイルを保存するディレクトリ名はURLに表示されません.
静的リソースが複数のディレクトリの下に保存されている場合は、express.staticミドルウェアを複数回呼び出すことができます.

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

静的リソースファイルにアクセスすると、express.staticミドルウェアはディレクトリに追加された順序で必要なファイルを検索します.express.staticでアクセスしたすべてのファイルを「仮想(virtual)」ディレクトリの下に保存したい場合は、次のように静的リソースディレクトリにマウントパスを指定することで実現できます.

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

これで、publicディレクトリの下のファイルに「/static」接頭辞付きのアドレスでアクセスできます.

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