herokuにreact/node appをデプロイするときにwebpack-dev-serverエラーが発生する

Question

React/ExpressアプリをHerokuにデプロイする際に問題が発生しています。私は "Webpack-dev-server not found"エラーを受け取りましたが、ノードサーバーを使い始めたので、私はもうdev-serverを使用しているとは思われません。以下は

Picture of Heroku error

私のpackage.json（単に依存関係をDEV）以下

"scripts": { 
    "start": "nodemon tools/publicServer.js -d --config 
       webpack.config.prod.js --content-base dist/ --progress --colors", 
    "clean": "npm run remove && mkdir dist", 
    "remove": "node_modules/.bin/rimraf ./dist", 
    "build:html": "babel-node tools/buildHtml.js", 
    "prebuild": "npm-run-all clean build:html", 
    "build": "babel-node tools/build.js", 
    "postbuild": "babel-node tools/publicServer.js" 
    }, 
    "devDependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-core": "^6.13.2", 
    "babel-eslint": "^7.1.1", 
    "babel-loader": "^6.2.4", 
    "babel-polyfill": "^6.16.0", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "babel-preset-stage-1": "^6.16.0", 
    "babel-preset-stage-2": "^6.13.0", 
    "concurrently": "^2.1.0", 
    "cross-env": "^1.0.7", 
    "css-loader": "^0.23.1", 
    "eslint": "3.2.2", 
    "eslint-config-airbnb": "10.0.0", 
    "eslint-loader": "1.5.0", 
    "eslint-plugin-import": "1.12.0", 
    "eslint-plugin-jsx-a11y": "2.0.1", 
    "eslint-plugin-mocha": "2.2.0", 
    "eslint-plugin-react": "6.0.0", 
    "eventsource-polyfill": "^0.9.6", 
    "express": "^4.13.3", 
    "file-loader": "^0.8.5", 
    "html-webpack-plugin": "^2.28.0", 
    "morgan": "^1.8.1", 
    "node-sass": "^3.7.0", 
    "postcss-loader": "^0.9.1", 
    "react-hot-loader": "^3.0.0-beta.6", 
    "rimraf": "^2.4.3", 
    "sass-loader": "^3.1.2", 
    "serve-favicon": "^2.4.2", 
    "style-loader": "^0.13.1", 
    "url-loader": "^0.5.7", 
    "webpack": "^2.4.1", 
    "webpack-dev-middleware": "^1.10.1", 
    "webpack-dev-server": "^2.4.2", 
    "webpack-hot-middleware": "^2.17.1" 
    }, 
    "engines": { 
    "node": ">=4.0.0", 
    "npm": ">=3.0.0" 
    } 
} 

は私のbuild.js以下

process.env.NODE_ENV = 'production'; 

console.log('Generating minified bundle for production via Webpack...'.blue); 

webpack(webpackConfig).run((err, stats) => { 
    if (err) { // so a fatal error occurred. Stop here. 
    console.log(err.bold.red); 
    return 1; 
    } 

    const jsonStats = stats.toJson(); 

    if (jsonStats.hasErrors) { 
    return jsonStats.errors.map(error => console.log(error.red)); 
    } 

    if (jsonStats.hasWarnings) { 
    console.log('Webpack generated the following warnings: '.bold.yellow); 
    jsonStats.warnings.map(warning => console.log(warning.yellow)); 
    } 

    console.log(`Webpack stats: ${stats}`); 
    console.log('Your app has been compiled in production mode and written to /dist.'.green); 

    return 0; 
}); 

です私buildHtml.js

import fs from 'fs'; 
import cheerio from 'cheerio'; 
import colors from 'colors'; 

/*eslint-disable no-console */ 

fs.readFile('src/index.html', 'utf8', (err, markup) => { 
    if (err) { 
    return console.log(err); 
    } 

    const $ = cheerio.load(markup); 
    $('head').prepend(''); 

    fs.writeFile('dist/index.html', $.html(), 'utf8', function (err) { 
    if (err) { 
     return console.log(err); 
    } 
    console.log('index.html written to /dist'.green); 
    }); 
}); 

です

以下は私のpublicService.js

var express = require('express'); 
var path = require('path'); 
var open = require('open'); 
var compression = require('compression'); 
var favicon = require('serve-favicon'); 

/*eslint-disable no-console */ 

const port = process.env.PORT || 3000; 
const app = express(); 

app.use(compression()); 
app.use(express.static('dist')); 

app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname, '../dist/index.html')); 
}); 

app.listen(port, function(err) { 
    if (err) { 
    console.log(err); 
    } else { 
    open(`http://localhost:${port}`); 
    } 
}); 

私はこれに新しいの一種だが、私は、おかげで非常に多く、任意の入力を本当に感謝します！

編集：ここではそうdevDependeciesがインストールされていないデフォルトNPM_CONFIG_PRODUCTIONことで

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: [ 
     // 'react-hot-loader/patch', 
     // 'webpack-dev-server/client?http://localhost:8080', 
     // 'webpack/hot/only-dev-server', 
     // './index.js' 
     '../src/index.js' 
    ], 

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

    context: path.resolve(__dirname, 'src'), 

    devtool: 'inline-source-map', 
    // 
    // devServer: { 
    //  hot: true, 
    //  contentBase: path.resolve(__dirname, 'dist'), 
    //  publicPath: '/', 
    //  historyApiFallback: true 
    // }, 

    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: [ 
        'babel-loader', 
       ], 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.(scss)$/, 
       use: ['style-loader', 'css-loader', 'sass-loader'] 
      }, 
      { 
       test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, 
       use: 'url-loader?limit=100000' 
      } 
     ], 
    }, 

    plugins: [ 
     new webpack.optimize.UglifyJsPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NamedModulesPlugin(), 
     new HtmlWebpackPlugin({ 
      template: './index.html' 
     }), 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
     }), 
     new webpack.IgnorePlugin(/^(net|http|child_process|timers|dns|fs|zlib)$/) 
    ] 
}; 

Answer 1

は、Herokuの上trueに設定されている私のwebpack.config.prodです。 あなたはあなたの生産にdependenciesに構築したり、偽（推奨されません）にNPM_CONFIG_PRODUCTIONを設定する必要がある依存関係を移動する必要があります：

heroku config:set NPM_CONFIG_PRODUCTION=false。

ところで

、あなたはProcfileを作成し、サーバーを実行するためのコマンドは、アプリケーションのdynosによって運営されているものを宣言し、代わりにnodemonのnodeを使用する必要があります。

web: node tools/publicServer.js -d --config webpack.config.prod.js --content-base dist/ --progress --colors

入力のために多く