静的ファイル

概要

Express.js ではデフォルトで静的ファイルをレスポンスとして返すことができません。

Express.js で画像や動画などの静的ファイルを提供するためには、ミドルウェアを作成し、静的ファイルの提供を許可する必要があります。

許可を行うにはとても簡単で以下のように参照ディレクトリを設定し、ミドルウェアで許可します。

今回は public フォルダを作成しそれを静的コンテンツ配信用ディレクトリにします。

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

静的ファイルの提供コード

実際に静的ファイルを提供する最小サンプルコードです。

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

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

<html>
    <head>
        <title>static</title>
    </head>
    <body>
        <h1>static test</h1>
        <img src="/static.png"></img>
    </body>
</html>

ファイル構成は以下のような感じになりました。

これでルートから、public フォルダに配置した静的ファイルにアクセスすることができます。
試しに http://localhost:8080/static.html にアクセスしてください。

以下の出力結果が出るはずです。

ミドルウェアをさらに追加することで、複数の静的ファイルを提供するディレクトリを作成可能です。

app.use(express.static('movie'));
app.use(express.static('images'));

仮想パスプレフィックス

静的ファイルの提供はできましたが、現状ルートからアクセスしなければ見れない状態です。

これはセキュリティ的にも、今後の開発作業においてもあまり賢くありません。

それを解消するのが仮想パスプレフィックスです。

設定の仕方はとても簡単で、ミドルウェアの第一引数にパスを追加するだけです。

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

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

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

<html>
    <head>
        <title>virtual</title>
    </head>
    <body>
        <h1>virtual test</h1>
        <img src="/virtual/virtual.png"></img>
    </body>
</html>

ファイル構成として以下のような形になりました。

試しに http://localhost:8080/virtual/virtual.html にアクセスしてみてください。

以下が出力されるはずです。

← Fastify入門|サーバーレス開発
イベント →