express.static（）只在本地運行時才起作用

Question

由於某種原因，當我在我的機器上運行我的express服務器時，它會在我的build文件夾中提供靜態文件，但沒有任何問題，但是當我部署到Heroku時，以下404錯誤：

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier). 
GET - http://playcheckerswithme.herokuapp.com/ 

這裏是我的目錄結構：

. 
├──index.js 
├──webpack.config.js 
├──package.json 
├──.gitignore 
├──node_modules 
| ├── ... 
| 
├──src 
| ├──assets 
| | ├──index.html 
| | ├──images 
| | | ├──... 
| | 
| ├──components 
| | ├──... 
| | 
| ├──reducers 
|  ├──... 
| 
├──build 
    ├──index.html 
    ├──bundle.js 
    ├──images 
     ├──... 

而這裏的index.js：

var express = require('express'); 
var app = express(); 
var http = require('http').Server(app); 

app.use(express.static(__dirname + '/build')) 

http.listen(process.env.PORT || 3000, function(){ 
    console.log(`listening on port: ${process.env.PORT || '3000'}`); 
}); 

app.use(express.static(__dirname + '/build'))應該爲我的build文件夾中的所有靜態文件提供服務，但似乎在生產中它不能正確工作。有任何想法嗎？

編輯 -

對於額外的上下文這裏是我的package.json和webpack.config.js文件

的package.json

{ 
    "name": "Checkers", 
    "version": "1.0.0", 
    "description": "react + redux + express environment for a checkers app", 
    "private": true, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "webpack-server": "webpack-dev-server --hot --progress --colors", 
    "start": "node build/index.js" 
    }, 
    "keywords": [], 
    "author": "Nathan Jones", 
    "devDependencies": { 
    "autoprefixer-loader": "^3.1.0", 
    "babel-core": "^6.3.21", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "copy-webpack-plugin": "^4.0.1", 
    "file-loader": "^0.10.0", 
    "react-hot-loader": "^1.2.8", 
    "source-map-loader": "^0.1.5", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.11.0", 
    "webpack-dev-server": "^1.10.1" 
    }, 
    "dependencies": { 
    "express": "^4.15.2", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-redux-utilities": "^1.0.7" 
    } 
} 

webpack.config.js

var { resolve } = require('path'); 
var webpack = require('webpack'); 

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 

function getEntrySources(sources) { 
    if (process.env.NODE_ENV !== 'production') { 
    sources.push('webpack-dev-server/client?http://localhost:8080'); 
    sources.push('webpack/hot/only-dev-server'); 
    } 
    return sources; 
} 

module.exports = { 
    entry: getEntrySources(['./src/app.js']), 

    output: { 
    filename: 'bundle.js', 
    path: resolve(__dirname, 'build'), 
    publicPath: '/' 
    }, 

    devtool: 'source-map', 

    devServer: { 
    inline: true, 
    hot: true, 
    contentBase: resolve(__dirname, 'build'), 
    publicPath: '/' 
    }, 

    module: { 
    preLoaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'source-map' 
     } 
    ], 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react,presets[]=stage-0'], 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract(
      'style-loader', 
      'css-loader?sourceMap!autoprefixer?browsers=last 3 versions!sass-loader?sourceMap' 
     ) 
     }, 
     { 
     test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
     loader: 'file-loader?name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.(png|jpg|jpeg)$/, 
     loader: 'url-loader' 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new CopyWebpackPlugin([{from: 'src/assets/', force: true}], {copyUnmodified: true}) 
    ] 
}; 

Answer 1

您故宮 「開始」 的劇本是"node build/index.js"這意味着__dirname將指向<project-root>/build。你需要改變你的build/index.js文件，而不是使用這個，因爲它已經在build文件夾中：

if (__dirname.slice(-6) === '/build') { // For production 
    app.use(express.static(__dirname)) 
} else { // For development 
    app.use(express.static(__dirname + '/build')) 
} 

Answer 2

嘗試刪除斜槓：

app.use(express.static(__dirname + 'build')); 

或使用路徑模塊：

var express = require('express'); 
var path = require('path'); 
var app = express(); 
var http = require('http').Server(app); 

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

http.listen(process.env.PORT || 3000, function(){ 
    console.log(`listening on port: ${process.env.PORT || '3000'}`); 
});