在 Heroku 上部署 AngularJs + webpack + gulp

Posted 2023-03-07

技术标签:

【中文标题】在 Heroku 上部署 AngularJs + webpack + gulp【英文标题】：Deploy AngularJs + webpack + gulp on Heroku 【发布时间】：2016-11-28 18:29:15 【问题描述】：

我有一个带有 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 app[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[路由器]: 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="App crashed" 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

我有点迷路了，非常感谢任何帮助。

【问题讨论】：

使用 gulp 命令可以启动应用程序吗？是的，我可以用“gulp”启动我的应用程序，它会在本地运行良好有没有没有安装在heroku上的模块好吧，我不确定。在构建日志中，我希望在模块列表中也能看到 webpack。我将 webpack 附加到 package.json 中的“依赖项”，但是当 heroku 开始构建时我仍然看不到它。您也可以使用heroku run bash 手动安装它，这将提供终端 【参考方案1】：

我刚刚使用 webpack（没有 grunt）在 heroku 上部署了 angularjs 应用程序，但错误看起来很相似。作为替代方案，您只需在 package.json 中包含 webpack 作为依赖项，而不是 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 时，您指明要安装哪个版本的节点。同时，需要 express 来渲染你的 Angular 应用。

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

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

【讨论】：

【参考方案2】：

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

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