Express静的CSSは提供されていません

私はこれを数時間にわたって把握しようとしていましたが、私の頭は爆発しようとしています。私が逃したばかげた小さな詳細ではないことを本当に願っています...Express静的CSSは提供されていません

私はサーバー側のレンダリング反応アプリケーションのセットアップをしています。すべてがうまくいっています。私が持っている唯一の問題は、私が読み込むCSSを得ることができないということです。

はここ（node_modulesなし）私のファイルツリーです：https://i.stack.imgur.com/xevUb.png "

私はserver.jsファイル

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

 
app.get('*', (req, res) => { 
 
     match({ 
 
      routes, 
 
      location: req.url 
 
     }, (error, redirectLocation, renderProps) => { 
 
      if (error) { 
 
      res.status(500).send(error.message) 
 
      } else if (redirectLocation) { 
 
      res.redirect(302, redirectLocation.pathname + redirectLocation.search) 
 
      } else if (renderProps) { 
 
      var html = renderToString(< RouterContext { ...renderProps 
 
       } 
 
       />); 
 
       res.status(200).send(template({ 
 
       body: html 
 
       })); 
 
      } 
 
      else { 
 
       res.status(400).send('Not found.') 
 
      } 
 
      }); 
 
     });

に次のコードを持っており、これは私のテンプレートです。 jsファイル：

export default ({ body }) => { 
 
    return ` 
 
    <!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     <title>test</title> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
     <link rel="stylesheet" href="/static/css/style.css" /> 
 
     </head> 
 

 
     <body> 
 
     <div id="root">${body}</div> 
 
     </body> 
 

 
     <script src="dist/client.js"></script> 
 
    </html> 
 
    `; 
 
};

私は自分のローカルサーバーに行くとき。私はhtmlを入手し、ブートストラップスタイルを適用します。しかし、私はtemplate.jsファイルにリンクされたstyle.cssとclient.jsに対して400の不正なリクエストエラーを受け取ります。

私は本当に誰かがこの1に私を助けることを願って...ここで

EDIT

は、私はデベロッパーコンソールに表示されるものです。

出典

2017-03-09 YT98

あなたserver.jsファイルdistフォルダの内側に表示されます。つまり、は./の代わりに./distとなりますあなたのコードのように書かれているようです。あなたがする必要があるのは次のようなものです：

const path = require('path') 
const projectRoot = path.resolve(__dirname, '../') 
app.use('static', express.static(projectRoot + '/public')) 
app.use('dist', express.static(__dirname))

出典

2017-03-09 20:55:55 idbehold

ええ、私はそれだと思います。私はこれを変更し、client.jsファイルが現在提供されています。それでもまだCSSはありません:( – YT98

私はdistディレクトリにstyle.cssを入れましたが、今はうまくいきます。なぜパブリックディレクトリが正しく提供されなかったのか分かりません。 – YT98

あなたは 'console.log（path.resolve （__dirname、 '../'）） 'はあなたのプロジェクトのルートディレクトリを指しているはずです。 – idbehold

Express静的CSSは提供されていません

答えて

関連する問題