Expressで静的ファイルを読み込む方法


  1. express.staticミドルウェアを使用する方法: Expressには、静的ファイルを提供するための組み込みのミドルウェア関数「express.static」があります。このミドルウェア関数を使用すると、指定したディレクトリ内の静的ファイルを簡単に読み込むことができます。

    const express = require('express');
    const app = express();
    // 静的ファイルを格納しているディレクトリを指定します
    app.use(express.static('public'));
    // 他のルーティングや処理を定義します
    // ...
    // サーバーを起動します
    app.listen(3000, () => {
     console.log('サーバーがポート3000で起動しました。');
    });

    上記の例では、"public"というディレクトリ内の静的ファイルを読み込むために「express.static」ミドルウェア関数を使用しています。したがって、例えば「public/images/logo.png」というパスでアクセスすると、Expressは自動的に該当するファイルを返します。

  2. 特定のルートでの静的ファイルの読み込み: express.staticミドルウェアを使用すると、特定のルートでのみ静的ファイルを読み込むように設定することもできます。

    const express = require('express');
    const app = express();
    // /publicパス以下の静的ファイルを読み込む
    app.use('/public', express.static('public'));
    // 他のルーティングや処理を定義します
    // ...
    // サーバーを起動します
    app.listen(3000, () => {
     console.log('サーバーがポート3000で起動しました。');
    });

    上記の例では、「/public」パス以下の静的ファイルを読み込むように設定しています。つまり、URLが「/public/images/logo.png」の場合にのみ、該当するファイルが返されます。