如何在 heroku 上部署 webpack 应用程序？

Question

我有一个节点应用程序。我的项目结构是这样的：

myApp
  |_ dist
  |_ node_modules
  |_ package.json
  |_ Procfile
  |_ webpack.config.js
  |_ src
      |_ assets
      |_ styles
      |_ vendors
      |_ js
          |_ app.js

app.js 是我的切入点。 在我的 package.json 中，我定义了以下脚本：

"scripts": {
    "build": "webpack -p --progress",
    "start": "webpack-dev-server"
}

还有我的Procfile

web: webpack-dev-server

这是我的 webpack.config.js 文件：

var path = require("path");
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, './src/js/app.js'),

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

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.less$/,
        loader: "style!css!less"
      },
      {
        test: /\.(jpg|png|gif)$/,
        include: /img/,
        loader: 'url'
      },
    ]},

    plugins: [
      new CopyWebpackPlugin([
        { from: './src/index.html' }
      ]),
      new CopyWebpackPlugin([
        { from: './src/vendors/vendor.min.js' }
      ]),
      new CopyWebpackPlugin([
        { from: './src/assets', to: 'assets' }
      ])
    ],

    devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      port: 5000,
      headers: {
        "Access-Control-Allow-Origin": "*"
      }
    }
};

如果我在本地运行应用程序，一切正常。但是，在我通过键入git push heroku master 在heroku 上推送我的应用程序后，部署正常，但我无法通过heroku open 打开应用程序，我收到错误消息。实际上，我不知道如何在 heroku 上运行我的应用程序。

感谢任何帮助。

这是我的日志

2017-01-11T13:27:35.645636+00:00 app[web.1]: npm ERR! 
2017-01-11T13:27:35.645849+00:00 app[web.1]: npm ERR! Failed at the pegaladrao@1.0.0 start script 'webpack-dev-server'.
2017-01-11T13:27:35.646053+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2017-01-11T13:27:35.646249+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the pegaladrao package,
2017-01-11T13:27:35.646475+00:00 app[web.1]: npm ERR! not with npm itself.
2017-01-11T13:27:35.646685+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2017-01-11T13:27:35.646899+00:00 app[web.1]: npm ERR!     webpack-dev-server
2017-01-11T13:27:35.647130+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2017-01-11T13:27:35.647532+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2017-01-11T13:27:35.647369+00:00 app[web.1]: npm ERR!     npm bugs pegaladrao
2017-01-11T13:27:35.647742+00:00 app[web.1]: npm ERR!     npm owner ls pegaladrao
2017-01-11T13:27:35.647942+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2017-01-11T13:27:35.652129+00:00 app[web.1]: 
2017-01-11T13:27:35.652339+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2017-01-11T13:27:35.652442+00:00 app[web.1]: npm ERR!     /app/npm-debug.log
2017-01-11T13:27:35.725498+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T13:27:35.714352+00:00 heroku[web.1]: Process exited with status 1
2017-01-11T13:37:15.944416+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T13:37:18.456711+00:00 heroku[web.1]: Starting process with command `npm start`
2017-01-11T13:37:21.392243+00:00 app[web.1]: 
2017-01-11T13:37:21.392258+00:00 app[web.1]: > pegaladrao@1.0.0 start /app
2017-01-11T13:37:21.392259+00:00 app[web.1]: > webpack-dev-server
2017-01-11T13:37:21.392260+00:00 app[web.1]: 
2017-01-11T13:37:21.400189+00:00 app[web.1]: sh: 1: webpack-dev-server: not found
2017-01-11T13:37:21.406100+00:00 app[web.1]: 
2017-01-11T13:37:21.414419+00:00 app[web.1]: npm ERR! Linux 3.13.0-105-generic
2017-01-11T13:37:21.414827+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
2017-01-11T13:37:21.415115+00:00 app[web.1]: npm ERR! node v6.2.1
2017-01-11T13:37:21.415585+00:00 app[web.1]: npm ERR! npm  v3.9.3
2017-01-11T13:37:21.415878+00:00 app[web.1]: npm ERR! file sh
2017-01-11T13:37:21.416076+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2017-01-11T13:37:21.416260+00:00 app[web.1]: npm ERR! errno ENOENT
2017-01-11T13:37:21.416441+00:00 app[web.1]: npm ERR! syscall spawn
2017-01-11T13:37:21.416605+00:00 app[web.1]: npm ERR! pegaladrao@1.0.0 start: `webpack-dev-server`
2017-01-11T13:37:21.416753+00:00 app[web.1]: npm ERR! spawn ENOENT
2017-01-11T13:37:21.416905+00:00 app[web.1]: npm ERR! 
2017-01-11T13:37:21.417068+00:00 app[web.1]: npm ERR! Failed at the pegaladrao@1.0.0 start script 'webpack-dev-server'.
2017-01-11T13:37:21.417220+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2017-01-11T13:37:21.417365+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the pegaladrao package,
2017-01-11T13:37:21.417517+00:00 app[web.1]: npm ERR! not with npm itself.
2017-01-11T13:37:21.417661+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2017-01-11T13:37:21.417804+00:00 app[web.1]: npm ERR!     webpack-dev-server
2017-01-11T13:37:21.417948+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2017-01-11T13:37:21.418094+00:00 app[web.1]: npm ERR!     npm bugs pegaladrao
2017-01-11T13:37:21.418244+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2017-01-11T13:37:21.418407+00:00 app[web.1]: npm ERR!     npm owner ls pegaladrao
2017-01-11T13:37:21.422856+00:00 app[web.1]: 
2017-01-11T13:37:21.423142+00:00 app[web.1]: npm ERR!     /app/npm-debug.log
2017-01-11T13:37:21.423030+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2017-01-11T13:37:21.418591+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2017-01-11T13:37:21.512091+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T13:37:21.499631+00:00 heroku[web.1]: Process exited with status 1
2017-01-11T13:40:32.051966+00:00 heroku[slug-compiler]: Slug compilation started
2017-01-11T13:40:32.051974+00:00 heroku[slug-compiler]: Slug compilation finished
2017-01-11T13:40:31.858391+00:00 app[api]: Deploy da11e80 by user pablodarde@gmail.com
2017-01-11T13:40:31.858391+00:00 app[api]: Release v10 created by user pablodarde@gmail.com
2017-01-11T13:40:32.191176+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T13:40:34.783548+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T13:40:37.475574+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T13:40:37.575920+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T13:40:37.585438+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T13:42:00.220939+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=game-pega-ladrao.herokuapp.com request_id=e88c7f11-ec3d-4a9c-bce0-e116bb692f61 fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T13:42:00.744864+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=game-pega-ladrao.herokuapp.com request_id=9e1e96b3-15a8-4915-9d58-008b9edcaa15 fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T13:49:22.413923+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T13:49:24.395890+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T13:49:26.583343+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T13:49:26.525449+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T13:49:26.600280+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T14:14:36.683508+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T14:14:39.320308+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T14:14:41.990804+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T14:14:42.107745+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T14:14:42.099658+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T14:56:53.024731+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T14:56:55.165335+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T14:56:57.911706+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T14:56:57.996355+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T14:56:57.988466+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T16:27:07.649780+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T16:27:09.953062+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T16:27:11.936009+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T16:27:11.888475+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T16:27:11.946530+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T18:25:46.669394+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=game-pega-ladrao.herokuapp.com request_id=74811720-1a10-4b97-9842-da6d0010addb fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T18:25:47.200025+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=game-pega-ladrao.herokuapp.com request_id=fc371066-439b-4577-96a0-50a939b1d89b fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T18:28:28.039141+00:00 heroku[slug-compiler]: Slug compilation started
2017-01-11T18:28:28.039146+00:00 heroku[slug-compiler]: Slug compilation finished
2017-01-11T18:28:27.876738+00:00 app[api]: Deploy 78b5ba3 by user pablodarde@gmail.com
2017-01-11T18:28:27.876738+00:00 app[api]: Release v11 created by user pablodarde@gmail.com
2017-01-11T18:28:28.173651+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T18:28:31.152586+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T18:28:33.608949+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T18:28:33.473917+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T18:28:33.610173+00:00 heroku[web.1]: State changed from crashed to starting
2017-01-11T18:28:33.571897+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T18:28:35.516449+00:00 heroku[web.1]: Starting process with command `webpack-dev-server`
2017-01-11T18:28:37.581803+00:00 heroku[web.1]: Process exited with status 127
2017-01-11T18:28:37.481833+00:00 app[web.1]: bash: webpack-dev-server: command not found
2017-01-11T18:28:37.563587+00:00 heroku[web.1]: State changed from starting to crashed
2017-01-11T18:30:41.542396+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=game-pega-ladrao.herokuapp.com request_id=4105e69a-2dcc-42c8-9e77-46552cd9af42 fwd="177.135.168.30" dyno= connect= service= status=503 bytes=
2017-01-11T18:30:42.148595+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=game-pega-ladrao.herokuapp.com request_id=f0018d93-366f-435e-86c0-3d0ba9fcf563 fwd="177.135.168.30" dyno= connect= service= status=503 bytes=

这是我在终端上运行“git push heroku master”后得到的响应：

Node.js app detected
remote: 
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote: 
remote: -----> Installing binaries
remote:        engines.node (package.json):  6.2.1
remote:        engines.npm (package.json):   3.9.3
remote:        
remote:        Downloading and installing node 6.2.1...
remote:        npm 3.9.3 already installed with node
remote: 
remote: -----> Restoring cache
remote:        Loading 2 from cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (not cached - skipping)
remote: 
remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote: 
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote: 
remote: -----> Build succeeded!
remote:        └── (empty)
remote:        
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote: 
remote: -----> Compressing...
remote:        Done: 24.5M
remote: -----> Launching...
remote:        Released v16
remote:        https://game-pega-ladrao.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.

Answer 1

经过一些尝试，我可以使用以下架构在 Heroku 上部署我的 webpack 项目。

1. 创建一个运行 webpack-dev-server 用于开发的 Webpack 配置文件。
2. 使用 express 服务器创建一个 server.js 文件，以便在 Heroku 上部署。

我为那些对使用部署在 Heroku 中的 webpack 感兴趣的人创建了一个小 github repo。

Answer 2

在您的 Heroku 日志中，看起来事情无法正常工作的原因似乎是因为 Heroku 正在尝试运行 webpack-dev-server 命令，但没有找到它。

这通常意味着您的package.json 中没有webpack。如果它不包含在其中，则意味着 Heroku 不会安装它，并且将无法运行您的服务器。

确保将 webpack 和所需的任何其他依赖项添加到 package.json，然后将代码重新部署到 Heroku =)

更新：别忘了你需要修改你的Procfile命令说：./node_modules/webpack-dev-server/bin/webpack-dev-server.js而不是webpack-dev-server。

之所以会这样，是因为 webpack 会从你的package.json 安装。因此，无法进行“全局”安装以使该命令全局可用。相反，您必须从 node_modules 运行命令。

Answer 3

你可以试试heroku config:set NODE_ENV=staging

如果不行，你也可以尝试将devDependencies中的所有包复制到dependencies中