Express-jsが静的ファイルを取得できないのはなぜですか？

私は自分のコードを私が作ることができる最も単純なexpress-jsアプリに減らしました：

var express = require("express"),
    app = express.createServer();
app.use(express.static(__dirname + '/styles'));
app.listen(3001);

私のディレクトリは次のようになります：

static_file.js
/styles
  default.css

しかし、アクセスするhttp://localhost:3001/styles/default.cssと次のエラーが発生します。

Cannot GET / styles /
default.css

とを使用express 2.3.3していnode 0.4.7ます。何が悪いのですか？

お試しくださいhttp://localhost:3001/default.css。

持っているために、/stylesあなたの要求のURL、使用中：

app.use("/styles", express.static(__dirname + '/styles'));

このページの例を見てください。

//Serve static content for the app from the "public" directory in the application directory.

    // GET /style.css etc
    app.use(express.static(__dirname + '/public'));

// Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static".

    // GET /static/style.css etc.
    app.use('/static', express.static(__dirname + '/public'));

私は同じ問題を抱えています。次のコードで問題を解決しました：

app.use('/img',express.static(path.join(__dirname, 'public/images')));
app.use('/js',express.static(path.join(__dirname, 'public/javascripts')));
app.use('/css',express.static(path.join(__dirname, 'public/stylesheets')));

静的リクエストの例：

http://pruebaexpress.lite.c9.io/js/socket.io.js

もっと簡単な解決策が必要です。存在しますか？

default.css で利用可能でなければなりません http://localhost:3001/default.css

styles内app.use(express.static(__dirname + '/styles'));だけではで見て表現伝えstyles奉仕する静的ファイルのディレクトリ。それは（混乱して）それが利用可能なパスの一部を形成しません。

私にとってこの作品：

app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));

server.jsで：

var express   =     require("express");
var app       =     express();
app.use(express.static(__dirname + '/public'));

expressとappを別々に宣言し、「public」という名前のフォルダーを作成するか、必要に応じてこれらのフォルダーにアクセスできます。テンプレートsrcに、/ publicからの相対パス（または静的ファイルへのフォルダーの運命の名前）を追加しました。ルート上のバーに注意してください。

私のために働いたのは：

app.use(express.static(__dirname + 'public/images'));app.js に書き込む代わりに

単に書く app.use(express.static('public/images'));

つまり、パスのルートディレクトリ名を削除します。次に、他のjsファイルで静的パスを効果的に使用できます。次に例を示します。

<img src="/images/misc/background.jpg">

お役に立てれば ：）

アプリケーションでBootstrap CSS、JS、フォントを使用しています。assetアプリのルートディレクトリにというフォルダーを作成し、その中にすべてのフォルダーを配置しました。次に、サーバーファイルに次の行を追加しました：

app.use("/asset",express.static("asset"));

この行によりasset、次の/assetようなパス接頭辞からディレクトリにあるファイルをロードできますhttp://localhost:3000/asset/css/bootstrap.min.css。

これで、ビューに次のようにCSSとJSを含めることができます。

<link href="/asset/css/bootstrap.min.css" rel="stylesheet">

静的ファイル（css、images、jsファイル）を提供するには、次の2つの手順を実行します。

1. cssファイルのディレクトリを組み込みミドルウェアexpress.staticに渡します

   var express = require('express');
   var app = express();
   /*public is folder in my project directory contains three folders
   css,image,js
   */
   //css  =>folder contains css file
   //image=>folder contains images
   //js   =>folder contains javascript files
   app.use(express.static( 'public/css'));

2. CSSファイルまたは画像にアクセスするには、URL http：// localhost：port / filename.css ex：http：// localhost：8081 / bootstrap.cssを入力するだけです

注意： CSSファイルをHTMLにリンクするには、次のように入力します<link href="file_name.css" rel="stylesheet">

このコードを書くと

var express = require('express');
var app = express();
app.use('/css',express.static( 'public/css'));

静的ファイルにアクセスするには、url：localhost：port / css / filename.css ex：http：// localhost：8081 / css / bootstrap.cssと入力します。

cssファイルをhtmlにリンクすることに注意して、次の行を追加してください

<link href="css/file_name.css" rel="stylesheet">    

これは私のために働いた

app.use(express.static(path.join(__dirname, 'public')));

app.use('/img',express.static(path.join(__dirname, 'public/images')));

app.use('/shopping-cart/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

app.use('/shopping-cart/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

app.use('/user/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

app.use('/user/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

http：// localhost：3001 / default.cssでアクセスしてみてください。

   app.use(express.static(__dirname + '/styles'));

あなたは実際にそれにフォルダーの名前、すなわちあなたのサブURLではなくスタイルの名前を与えています。

私のcssファイルを見つけて、それにルートを追加します。

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

その後、動作するようです。

上記に加えて、静的ファイルのパスが/（ex ... / assets / css）...で始まることを確認してください。メインディレクトリ（/ main）の上のディレクトリにある静的ファイルを提供します。

あなたのセットアップなら

myApp
  |
  |__ public
  |     |
  |     |__  stylesheets
  |     |     |
  |     |     |__ style.css
  |     |
  |     |___ img
  |           |
  |           |__ logo.png
  |
  |__ app.js

次に、
app.js に入れます

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

そしてあなたのstyle.cssを参照してください：（いくつかの.pugファイルで）：

link(rel='stylesheet', href='/static/stylesheets/style.css')

1. Nodejsプロジェクト
   フォルダーに「公開」名のフォルダーを作成します。
2. Nodejsプロジェクトフォルダーにindex.htmlファイルを配置します。
3. すべてのスクリプトとcssファイルをパブリックフォルダーに配置します。

4. 使用する app.use( express.static('public'));

5. そして中 index.html に、スクリプトの正しいパス<script type="text/javascript" src="/javasrc/example.js"></script>

そして今、すべてがうまくいきます。

静的ディレクトリ

上の画像（静的ディレクトリ）のdir構造を確認してください

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


//  or

app.use("/", express.static(publicDirectoryPath))
app.use((req, res, next) => {
res.sendFile(path.join(publicDirectoryPath,'index.html'))