angularjs - 在 Heroku 上部署 AngularJs + webpack + gulp

Question

我有一个带有 webpack 和 gulp 的 AngularJs 应用程序。它建立在 https://github.com/AngularClass/NG6-starter 之上我想将其部署在 Heroku.com 上。从构建日志看来一切都很好，当我尝试访问 Web 应用程序时，我收到以下消息:

来自 Heroku 应用程序日志:

2016-07-25T11:48:27.455165+00:00 应用程序[web.1]:npm 错误!或者，如果不可用，您可以通过以下方式获取他们的信息:

2016-07-25T11:48:27.455164+00:00 应用程序[web.1]:npm 错误! npm 错误 ng6-starter

2016-07-25T11:48:27.462393+00:00 应用程序[web.1]:

2016-07-25T11:48:27.462658+00:00 应用程序[web.1]:npm 错误!请在任何支持请求中包含以下文件:

2016-07-25T11:48:27.455166+00:00 应用程序[web.1]:npm 错误! npm 所有者 ls ng6-starter

2016-07-25T11:48:27.455163+00:00 应用程序[web.1]:npm 错误!一口气服务

2016-07-25T11:50:18.830449+00:00 heroku[router]: at=错误代码=H10 desc="应用程序崩溃"method=GET path="/"host=someapp.herokuapp.com request_id= x fwd="0.0.0.0"dyno= 连接= 服务= 状态=503 字节=

2016-07-25T11:50:19.372880+00:00 heroku[路由器]: at=错误代码=H10 desc="应用程序崩溃"method=GET path="/favicon.ico"host=someapp.herokuapp。 com request_id=x fwd="0.0.0.0"dyno= 连接= 服务= 状态=503 字节=

在我的 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 应用程序，但错误看起来很相似。作为替代方案，您只需要在 package.json 中包含 webpack 作为依赖项，而不是 devdependency。

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 放在版本后面时，您就表明您希望安装哪个版本的 Node 。同时，需要express来渲染你的 Angular 应用程序。

postinstall 和 start 是为heroku 部署的关键命令。 Heroku 将首先运行 postinstall，然后运行 ​​start

webpack 被列为依赖项而不是 devDependency。