Question

我有一个带webpack和gulp的AngularJs应用程序。它建立在https://github.com/AngularClass/NG6-starter之上，我想在Heroku.com上部署它。从构建日志看起来一切都很好，当我尝试访问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 bugs 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 owner ls ng6-starter

2016-07-25T11：48：27.455163 + 00:00 app [web.1]：npm ERR！ gulp serve

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

2016-07-25T11：50：19.372880 + 00:00 heroku [router]：at = error code = H10 desc =＆＃34; App崩溃＆＃34; method = GET path =＆＃34; /favicon.ico" host = someapp.herokuapp.com request_id = x fwd =＆＃34; 0.0.0.0＆＃34; 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（没有grunt）在heroku上部署了angularjs app，但错误看起来很相似。作为替代方案，您只需要将webpack作为依赖项，而不是package.json中的devdependencies。

how to deploy angularjs on heroku with webpack only

{
  "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后跟版本时，您可以指明要安装的节点版本。同时，快递需要渲染角度应用程序。

postinstall和start是为heroku部署的关键命令。 Heroku将postinstall首先跟随start

webpack被列为依赖项NOT devDependencies。

Answer 2

在这种情况下，您尚未安装webpack模块，它缺少不允许运行gulp webpack构建脚本的依赖项

因此您需要在heroku上手动安装依赖项，它将为终端提供以下命令

heroku run bash

npm install webpack

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

在Heroku上部署AngularJs + webpack + gulp

2 个答案: