Express での静的ファイルの提供

画像、CSS ファイル、JavaScript ファイルなどの静的ファイルを配信するには、Express の組み込みミドルウェア関数 express.static を使用します。

関数シグネチャは次のとおりです。

express.static(root, [options])

root 引数は、静的アセットを配信するルートディレクトリを指定します。options 引数の詳細については、express.static を参照してください。

たとえば、public という名前のディレクトリ内の画像、CSS ファイル、JavaScript ファイルを提供するには、次のコードを使用します。

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

これで、public ディレクトリにあるファイルをロードできます。

https://127.0.0.1:3000/images/kitten.jpg
https://127.0.0.1:3000/css/style.css
https://127.0.0.1:3000/js/app.js
https://127.0.0.1:3000/images/bg.png
https://127.0.0.1:3000/hello.html
Express は静的ディレクトリを基準にファイルを検索するため、静的ディレクトリの名前は URL に含まれません。

複数の静的アセットディレクトリを使用するには、express.static ミドルウェア関数を複数回呼び出します。

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

Express は、express.static ミドルウェア関数で静的ディレクトリを設定した順番でファイルを検索します。

注意: 最高のパフォーマンスを得るには、リバースプロキシ キャッシュを使用して、静的アセットの配信のパフォーマンスを向上させます。

express.static 関数によって提供されるファイルに対して仮想パスプレフィックス(ファイルシステムに実際に存在しないパス)を作成するには、以下に示すように、静的ディレクトリにマウントパスを指定します

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

これで、/static パスプリフィックスから public ディレクトリにあるファイルをロードできます。

https://127.0.0.1:3000/static/images/kitten.jpg
https://127.0.0.1:3000/static/css/style.css
https://127.0.0.1:3000/static/js/app.js
https://127.0.0.1:3000/static/images/bg.png
https://127.0.0.1:3000/static/hello.html

ただし、express.static 関数に提供するパスは、node プロセスを起動したディレクトリからの相対パスです。別のディレクトリから Express アプリを実行する場合は、配信するディレクトリの絶対パスを使用する方が安全です。

const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')))

serve-static 関数とそのオプションの詳細については、serve-static を参照してください。

前の内容: 基本的なルーティング     次の内容: 追加の例