编辑 -

Question

出于某种原因，当我在我的机器上运行我的快速服务器时，它在我的构建文件夹中提供静态文件没有任何问题，但是当我在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'))应该在我的构建文件夹中提供所有静态文件，但似乎在生产中它无法正常工作。有什么想法吗？

编辑 -

这里有额外的上下文是我的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

您的npm“开始”脚本为"node build/index.js"，这意味着__dirname将指向<project-root>/build。您需要更改build/index.js文件才能使用它，因为它已经在构建文件夹中：

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

express.static（）仅在本地运行时有效

编辑 -

2 个答案: