无法在Google App引擎上部署我的reactjs webpack应用程序

I'm trying to deploy my react app which is 100% frontend but running on a webpack server. I need to deploy it to Google app engine as a flexible environment but i got this error after making the gcloud app deploy

我正在尝试部署我的反应应用程序，它是100％前端但在webpack服务器上运行。我需要将其部署到Google应用引擎作为一个灵活的环境，但我在部署gcloud应用后遇到了此错误

sh: 1: webpack: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-hot-boilerplate@1.0.0 bundle: `webpack --config webpack.config.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the react-hot-boilerplate@1.0.0 bundle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2017-05-27T15_14_54_097Z-debug.log

npm ERR! Linux 3.16.0-4-amd64
npm ERR! argv "/nodejs/bin/node" "/nodejs/bin/npm" "start"
npm ERR! node v6.10.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! react-hot-boilerplate@1.0.0 prestart: `npm run bundle`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-hot-boilerplate@1.0.0 prestart script 'npm run bundle'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-hot-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run bundle
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs react-hot-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls react-hot-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /app/npm-debug.log

I've followed this tutorial and all dependencies already installed. Unfortunately, i can't get it works.

我已经按照本教程和已安装的所有依赖项进行了操作。不幸的是，我无法得到它。

Here is my current situation

这是我目前的情况

server.js

server.js

 var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/');
});

webpack.config.js

webpack.config.js

'use strict';

var path = require('path');
var webpack = require('webpack');
var env = process.env.NODE_ENV

module.exports = {
  devtool: 'eval',
  entry: [
    'whatwg-fetch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/dev-server',
    'babel-polyfill',
    './app/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    library: 'Redux',
    libraryTarget: 'umd',
    publicPath: '/static/'
  },
  plugins: [
   new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()

  ],
  module: {
    loaders: [
      {  test: /\.js$/,
        loaders: ['babel-loader'], exclude: /node_modules/,
        include: path.join(__dirname, 'app')
      },

      {
            test: /\.json$/,
            loader: 'json'
        },

    {test: /\.scss$/, loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib") + "&includePaths[]=" + path.resolve(__dirname, "./mixins/app_mixins")},
  /*  { test: /\.scss$/, loaders: ['style', 'css', 'sass?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib','raw']}, */
     { test: /\.css$/, loader: "style-loader!css-loader" },
     //{ test: /\.json$/, loader: 'json-loader' },
     { test: /\.(jpe?g|png|gif|svg)$/i,loader:'file'},
     {test: /\.(woff|woff2|ttf|eot)$/, loader: 'file'},
     { test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: 'url' }



  ]
  },
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },

devtool: 'source-map'
};

package.json

的package.json

"scripts": {
    "start": "node server.js",
    "bundle": "webpack --config webpack.config.js",
    "prestart": "npm run bundle",
    "lint": "eslint src"
  },

What i'm doing wrong.

我做错了什么。

Thanks for helping

谢谢你的帮助

2 个解决方案

#1

You need to change your scripts. Installing Webpack globally in App Engine is not the best approach, use it directly from node_modules.

您需要更改脚本。在App Engine中全局安装Webpack不是最好的方法，直接从node_modules使用它。

First, ensure webpack is in your production dependencies:

首先，确保webpack在您的生产依赖项中：

npm install --save webpack

Edit your package.json script:

编辑package.json脚本：

"scripts": {
    "start": "node server.js",
    "bundle": "./node_modules/.bin/webpack --config webpack.config.js",
    "prestart": "npm run bundle"
},

Now a plain npm install in a clean installation will be enough for bundling your application.

现在，在干净安装中进行简单的npm安装就足以捆绑您的应用程序了。

#2

Could you show your dependencies in the package.json file?

你能在package.json文件中显示你的依赖项吗？

I had a similar problem running gcloud app deploy

我在运行gcloud app deploy时遇到了类似的问题

Error: Cannot find module 'webpack-dev-server'
at Function.Module._resolveFilename (module.js:469:15)

I solved the issue moving the given dependency (wepack-dev-server) from devDependencies to dependencies in package.json.

我解决了将给定依赖项（wepack-dev-server）从devDependencies移动到package.json中的依赖项的问题。

In case somebody else has the same problem I suggest to have look at your dependencies in package.json. dependencies are required to run, devDependencies only to develop, e.g.: unit tests, Coffeescript to Javascript transpilation, minification,

如果其他人有同样的问题，我建议你在package.json中查看你的依赖项。运行时需要依赖项，devDependencies只用于开发，例如：单元测试，Coffeescript到Javascript的编译，缩小，

#1