express.static() funktioniert nur, wenn lokal ausgeführt

Question

Aus irgendeinem Grund, wenn ich meinen Express-Server auf meinem Rechner ausführen es dient die statischen Dateien in meinem Build-Ordner ohne Probleme, aber wenn ich auf Heroku bereitstellen, bekomme ich die folgende Fehler 404:

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

hier ist meine Verzeichnisstruktur:

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

Und hier ist 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')) sollte alle statischen Dateien in meinem Build-Ordner bereitstellen, aber es scheint, dass es in der Produktion nicht korrekt funktioniert. Irgendwelche Ideen?

Bearbeiten -

Für zusätzlichen Kontext sind hier meine package.json und webpack.config.js Dateien

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

Ihre npm "Start" Skript ist "node build/index.js" was bedeutet, dass __dirname zu <project-root>/build zeigen würde. Sie benötigen build/index.js Datei ändern, um dies stattdessen zu verwenden, da es bereits in dem Build-Ordner:

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

Answer 2

Versuchen entfernen Slash:

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

oder Verwendung Pfadmodul:

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'}`); 
});