Express-static
1369 ワード
Expressによる静的ファイルの管理
Expressに内蔵express.staticは、ピクチャ、CSS、JavaScriptファイルなどの静的ファイルを容易に管理することができる.
1.静的リソースファイルが存在するディレクトリをパラメータとして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
2.すべてのファイルのパスは、保存ディレクトリに対するものであるため、静的ファイルを保存するディレクトリ名はURLに表示されない.静的リソースが複数のディレクトリの下に保存されている場合は、expressを複数回呼び出すことができます.staticミドルウェア:app.use(express.static('public'));
app.use(express.static('files'));
// ,express.static
//
3.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
app.use(express.static('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
app.use(express.static('public'));
app.use(express.static('files'));
// ,express.static
//
app.use('/static', express.static('public'));
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