画像、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.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 を参照してください。