web-dev-qa-db-ja.com

nodejs / express include local js file

これが私の現在のフォルダ構造です

css
   app.css
js
  app.js
node-modules
index.html
node-server.js
package.json

ノードサーバーはindex.htmlをホストしていますが、app.jsおよびapp.cssファイルをロードする方法を理解できません。

index.htmlは次のものをロードします：

<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/app.css"/>

エラーメッセージは次のとおりです。

Failed to load resource: the server responded with a status of 404 (Not Found)
2http://localhost:3000/css/app.css Failed to load resource: the server 
responded with a status of 404 (Not Found)

モジュールまたは何かを要求またはロードする必要があることはわかっていますが、何がわからないのですか？.

ありがとう

javascripthtmlcssnode.jsexpress
13
NorCalKnockOut

理由 Node.Jsはそれ自体で静的コンテンツを提供しません。Nodeを介して静的コンテンツを提供するためにルートを定義する必要があります。

Solution（Manual）：

var express = require('express'),
    path = require('path'),
    app = express();

app.get('/index.html',function(req,res){
   res.sendFile(path.join(__dirname + '/index.html')); 
});

app.get('/css/app.css',function(req,res){
    res.sendFile(path.join(__dirname + '/css/app.css')); 
});

app.get('/js/app.js',function(req,res){
    res.sendFile(path.join(__dirname + '/js/app.js')); 
});

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);

より良いソリューション：

ディレクトリ構造：

public
 css
   app.css
 js
  app.js
 index.html

コード：

var express = require('express'),
    path = require('path'),
    app = express();

// Express Middleware for serving static files
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);
9
Nivesh

Tomasz Kasperek が指摘したように、これらのファイルを静的ディレクトリでホストするつもりであることをExpressに通知する必要があります。これは技術的には 静的ミドルウェアの定義 と呼ばれます。

これは次のようになります。

var express = require('express');
var app = express();

// first parameter is the mount point, second is the location in the file system
app.use("/public", express.static(__dirname + "/public"));

これは非常にシンプルなので、特定のファイルやフォルダを静的にするのではなく、publicフォルダを作成する方法をお勧めします。

次に、ファイルはルートindex.htmlから同様に参照されます。

<link href="public/css/reset.css" rel="stylesheet" type="text/css">

これがお役に立てば幸いです！

8
James Taylor

この構文を使用して機能させました

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

Cssおよびjsファイルを「public」ディレクトリの下にコピーし、index.htmlファイルに参照を追加します

<link rel="stylesheet" href="/css/reset.css">
0
ajup