在Heroku上部署AngularJs + webpack + gulp

我有一个与webpack和gulp的AngularJs应用程序。 它build立在https://github.com/AngularClass/NG6-starter之上，我想在Heroku.com上部署它。 从构build日志看起来好像一切正​​常，当我尝试访问Web应用程序时，我收到以下消息：

从Heroku应用程序日志：

2016-07-25T11：48：27.455165 + 00：00 app [web.1]：npm ERR！ 或者，如果这不可用，您可以通过以下方式获取他们的信息：

2016-07-25T11：48：27.455164 + 00：00 app [web.1]：npm ERR！ npm错误ng6-starter

2016-07-25T11：48：27.462393 + 00：00 app [web.1]：

2016-07-25T11：48：27.462658 + 00：00 app [web.1]：npm ERR！ 请包括以下任何支持请求的文件：

2016-07-25T11：48：27.455166 + 00：00 app [web.1]：npm ERR！ npm所有者ls ng6-starter

2016-07-25T11：48：27.455163 + 00：00 app [web.1]：npm ERR！ 吞噬服务

2016-07-25T11：50：18.830449 + 00：00 heroku [router]：at = error code = H10 desc =“App crashed”method = GET path =“/”host = someapp.herokuapp.com request_id = x fwd = “0.0.0.0”dyno = connect = service = status = 503 bytes =

2016-07-25T11：50：19.372880 + 00：00 heroku [router]：at = error code = H10 desc =“应用程序崩溃”method = GET path =“/ favicon.ico”host = someapp.herokuapp.com request_id = x fwd =“0.0.0.0”dyno = connect = service = status = 503 bytes =

在我已经添加的package.json文件中

"scripts": { "test": "karma start", "build": "gulp webpack", "start": "gulp" } 

从Heroku生成日志：

  Node.js app detected Creating runtime environment NPM_CONFIG_LOGLEVEL=error NPM_CONFIG_PRODUCTION=true NODE_ENV=production NODE_MODULES_CACHE=true Installing binaries engines.node (package.json): unspecified engines.npm (package.json): unspecified (use default) Resolving node version (latest stable) via semver.io... Downloading and installing node 5.11.1... Using default npm version: 3.8.6 Restoring cache Loading 2 from cacheDirectories (default): - node_modules - bower_components (not cached - skipping) Building dependencies Installing node modules (package.json) Caching build Clearing previous node cache Saving 2 cacheDirectories (default): - node_modules - bower_components (nothing to cache) Build succeeded! ├── angular@1.5.8 ├── angular-animate@1.5.8 ├── angular-aria@1.5.8 ├── angular-file-upload@2.3.4 ├── angular-material@1.1.0-rc.5 ├── angular-messages@1.5.8 ├── angular-sanitize@1.5.8 ├── angular-translate@2.11.1 ├── angular-ui-router@0.2.18 ├── gulp@3.9.1 ├── json-loader@0.5.4 ├── lodash@3.10.1 ├── material-design-icons@2.2.3 ├── moment@2.14.1 ├── node-uuid@1.4.7 ├── normalize.css@3.0.3 ├── objectpath@1.2.1 ├── promise-polyfill@5.2.1 └── tv4@1.2.7 Discovering process types Procfile declares types -> (none) Default types for buildpack -> web Compressing... Done: 50.8M Launching... Released v12 https://someapp.herokuapp.com/ deployed to Heroku 

我有点迷失在这里，任何帮助都很受欢迎。

Answer 1

在这种情况下，你还没有安装webpack模块，它缺less的依赖不允许运行gulp webpack构build脚本

所以你需要在heroku上手动安装依赖关系，它会给terminal下面的命令

 heroku run bash npm install webpack 

这将添加webpack模块，并尝试运行你的应用程序

Answer 2

我只是用webpack（没有咕噜声）在heroku上部署angularjs应用程序，但错误看起来类似。 作为替代scheme，您只需要将webpack作为您的依赖项，而不是在package.json中的devdependencies。

如何只用webpack在heroku上部署angularjs

 { "name": "", "version": "1.0.0", "description": "github call", "main": "./src/bundle.js", "engines": { "node": "6.4.0" }, "scripts": { "dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", "deploy:WINDOWS": "set NODE_ENV=production && webpack -p && node ./src/server.js", "deploy": "NODE_ENV=production webpack -p && node ./src/server.js", "start": "node ./src/server.js", "postinstall": "NODE_ENV=production webpack -p" }, "author": "", "license": "ISC", "dependencies": { "angular": "^1.5.8", "angular-route": "^1.5.8", "angular-sanitize": "^1.5.8", "express": "^4.14.0", "webpack": "^1.13.2", "markdown": "^0.5.0" }, "devDependencies": { "babel-angular": "0.0.5", "babel-core": "^6.14.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.14.0", "css-loader": "^0.25.0", "style-loader": "^0.13.1", "webpack-dev-server": "^1.16.1" } } 

编辑：我包括package.json为您的参考，感谢您的反馈。

记下依赖关系列表。 当你把engine放在版本后面时，你可以指出你想要安装哪个版本的节点。 在同一时间，快递是必要的呈现你angular度的应用程序。

postinstall和start是为heroku部署的关键命令。 Heroku将运行postinstall首先按照start

webpack被列为依赖关系NOT devDependencies。