Expressで静的ファイルを処理する

Question

Expressを使用してNode.jsアプリケーションを作成しました。私が/を要求するとき、私は/public/app/index.htmlに奉仕したいと思う。これは機能します。しかし、index.htmlには2つのファイルが含まれており、相対パスは分割されます。パスはHTMLヘッダーのように設定されていますが、app.jsとstyle.cssを取得しようとすると、（ブラウザ？）は/を参照していると考えられます。

<link rel='stylesheet' href='/lib/lib.css'/> 
<link rel='stylesheet' href='style.css'/> 
<script type="application/javascript" src="/lib/lib.js"></script> 
<script type="application/javascript" src="app.js"></script> 

これは私が私のHTMLのためのビルドプロセスを使用することを私には問題である理由、それは一つのフォルダにすべて内蔵されたファイルをダンプする際に論理的だった（HTML、CSS、JS、画像） 。こうすることで、独自のフォルダ内で常にjsとcssを指すテンプレートHTMLファイルを使用できます。私は、相対パスでスクリプトを注入することを避けることができると期待しています。

フォルダ構造各ページの

root/ 
├── public/ 
│ ├── lib/ 
| | ├── lib.js 
| | └── lib.css 
│ ├── app/ 
│ | ├── index.html 
│ | ├── style.css 
| | └── app.js 
├── app.js 
├── routes/ 
|  └── index.js 

app.js

var app = express(); 
var server = app.listen(4100); 
app.use(express.static(path.join(__dirname, 'public'))); 
// routes 
var index = require('./routes/index'); 
app.use('/', index); 

index.js

var express = require('express'); 
var router = express.Router(); 

router.get('/', function(req, res, next) { 
    var path = 'index.html'; 
    var options = { 
     root : './public/app/' 
    }; 
    res.sendFile(path, options, function(err){ 
     console.log(err) 
    }); 
}); 

module.exports = router; 

Answer 1

あなたは可能性があり、別の静的なミドルウェアを追加：問題を回避するには

// The "users" page. 
app.use('/users', express.static(path.join(__dirname, 'public/users'))); 

// The "app" page. 
app.use('/', express.static(path.join(__dirname, 'public/app'))); 

// Handle the rest of the static resources: 
app.use(express.static(path.join(__dirname, 'public'))); 

を、あなたがそれらを宣言する順序は、（「より具体的な」ルートが最初に宣言されなければならない）問題になります。

このような設定では、別のrouter.get('/', ...)を含める必要はなく、public/app/index.htmlにもサービスすることができます。ここで

Answer 2

あなたはJS/CSSファイルのための絶対パスを使用しないのはなぜ

//Usefull to build the absolute Path 
const path = require('path') 

//Seperated Configuration 
const configuration = { 
    directory: './public/' 
} 

//Serve the index.html 
app.get("/", function(req, res) { 
    res.sendfile(path.join(__dirname, configuration.directory) + 'index.html') 
}); 

//Serve other content 
let staticPath = path.join(__dirname, configuration.directory); 
app.use(express.static(staticPath)); 

app.listen etc ...