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

标签 heroku

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

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.

最佳答案

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

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

我创建了一点github repo对于那些有兴趣使用 Heroku 中部署的 webpack 的人。

关于heroku - 如何在heroku上部署webpack应用程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41592957/

上一篇：selenium - 确定 jqGrid 是否已加载并准备好使用 Selenium 的最佳方法

下一篇：winapi - SW_SHOW和SW_SHOWNORMAL的含义

相关文章：

ssl - Heroku ssl 证书未与自定义域切换

django - 在谷歌上索引一个 heroku 网站

ruby-on-rails - bundle 安装不起作用 - Rails 4.0

java - 在 JVM(12 因素应用程序)中将管理/管理任务作为一次性进程运行

angularjs - 如何在不使用 yeoman 的情况下使用 Node.js 在 Heroku 中托管 AngularJS 应用程序？

mysql - 使用 AWS RDS 在 Heroku App 上获取 Mysql2::Error(SSL 连接错误:ASN:错误的其他签名确认)

ruby-on-rails - heroku db :push 的点击问题

heroku - 如何以root身份在Heroku上运行？

node.js - Heroku 键 "Cannot read property ' 运行“未定义”

javascript - NextJS + Heroku : env variables not loading

©2024 IT工具网  联系我们