Node.js应用程序部署在heroku中

I have the following file structure of my MEAN app:

我的MEAN应用程序的文件结构如下:

root
|---> public
      |----> css
      |----> js
              |----> controller
              |----> app.js
      |----> views
      |----> index.html

|---> app
      |----> server.js
|---> node_modules
|---> bower_components
|---> gulpfile.js
|---> package.json
|---> Procfile

In this app, I run public/index.html using gulp,

在这个应用程序中,我使用gulp运行public / index.html,

gulpfile.js:

var gulp = require('gulp');
var browserSync = require('browser-sync');
var server = require('gulp-live-server');

gulp.task('server', function() {
     live = new server('app/server.js');
     live.start();
})
gulp.task('serve', ['server'], function() {
   browserSync.init({
      notify: false,
      port: process.env.PORT || 8080,
      server: {
        baseDir: ['public'],
        routes: {
            '/bower_components': 'bower_components'
        }
      }
   });
    gulp.watch(['public/**/*.*'])
        .on('change', browserSync.reload);
});

Then communicate with app using REST API. This is working in local machine. I have uploaded this project into heroku.

然后使用REST API与app通信。这是在本地机器上工作。我已将此项目上传到heroku。

My Procfile:

web: node node_modules/gulp/bin/gulp serve

But It shows error. I have the following error into heroku logs

但它显示错误。我在heroku日志中有以下错误

2017-05-21T16:26:57.305350+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=myapp.herokuapp.com request_id=some-request-id fwd="fwd-ip" dyno= connect= service= status=503 bytes= protocol=https

2017-05-21T16:26:57.305350 + 00:00 heroku [router]:at = error code = H10 desc =“App crashed”method = GET path =“/ favicon.ico”host = myapp.herokuapp.com request_id = some-request-id fwd =“fwd-ip”dyno = connect = service = status = 503 bytes = protocol = https

2017-05-21T15:53:50.942664+00:00 app[web.1]: Error: Cannot find module '/app/node_modules/gulp/bin/gulp'

2017-05-21T15:53:50.942664 + 00:00 app [web.1]:错误:找不到模块'/ app / node_modules / gulp / bin / gulp'

My package.json file:

我的package.json文件:

 {
    "name": "myapp",
    "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "start": "gulp serve"
    },
    "repository": {
        "type": "git",
        "url": ""
    },
    "dependencies": {
        "async": "^2.4.0",
        "body-parser": "^1.17.2",
        "express": "^4.15.3",
        "mongoose": "^4.10.0",
        "morgan": "^1.8.1",
        "multer": "^1.3.0",
        "underscore": "^1.8.3"
    },
    "devDependencies": {
        "browser-sync": "^2.18.11",
        "gulp": "^3.9.1",
        "gulp-live-server": "0.0.30"
    }
}

Any suggestion? Thanks in Advance.

有什么建议吗?提前致谢。

2 个解决方案

#1

You probably have gulp defined as a development dependency (under devDepenenies) in your package.json file. NPM only installs devDependencies when NODE_ENV is not set to production.

您可能已将gulp定义为package.json文件中的开发依赖项(在devDepenenies下)。当NODE_ENV未设置为生产时,NPM仅安装devDependencies。

When you deploy to heroku, NODE_ENV=production, so gulp is never installed. Hence the error...

当您部署到heroku时,NODE_ENV =生产,因此从未安装gulp。因此错误......

Error: Cannot find module '/app/node_modules/gulp/bin/gulp'

错误:找不到模块'/ app / node_modules / gulp / bin / gulp'

Just move gulp and whatever else is required for building your bundle from devDependencies to dependencies. You can make npm move it for you with..

只需将gulp以及构建捆绑包所需的任何其他内容从devDependencies转移到依赖项。你可以让npm为你移动它..

npm uninstall --save-dev gulp
npm install --save gulp

Repeat this for each dev dependency required to build your bundle. Or you can just copy and paste them all yourself.

对构建捆绑包所需的每个dev依赖项重复此操作。或者您可以自己复制并粘贴它们。

This is a common issue without an ideal solution AFAIK. NPM expects that in production, you will have already pre-built your files. As you would if you were publishing them to NPM. However, in heroku and other push to deploy solutions, this is not the case.

这是一个没有理想解决方案AFAIK的常见问题。 NPM希望在生产中,您已经预先构建了文件。就像你将它们发布到NPM一样。但是,在heroku和其他推动部署解决方案时,情况并非如此。

#2

Charlie Martin is correct about dev-dependencies and the --production flag (which Heroku passes, correctly). You can see further explanation in the nodejs docs for npm install and package.json - this piece of the question has been elaborated on elsewhere.

Charlie Martin对于dev-dependencies和--production标志(Heroku正确传递)是正确的。你可以在nodejs docs中看到关于npm install和package.json的进一步解释 - 这个问题已经在其他地方详细阐述过了。

However, I would strongly recommend that on deployment you do not run the serve task via gulp and instead, define your npm script start to run browserSync's CLI. This way, you can keep gulp as a dev dependency.

但是,我强烈建议您在部署时不要通过gulp运行serve任务,而是定义你的npm脚本开始运行browserSync的CLI。这样,您可以将gulp保持为dev依赖项。

It would probably look something like this: package.json

它可能看起来像这样:package.json

{
  ... other properties ...
  "scripts": {
    "start": "browser-sync start --port 8080 -s"
  },
  ... other stuff ...
}

Browsersync's documentation is pretty good so you should find what you need. I'd fiddle with it locally until npm start and gulp serve do the same thing, then I'd deploy with heroku to see if it worked.

Browsersync的文档非常好,所以你应该找到你需要的东西。我会在本地进行操作,直到npm开始并且gulp服务执行相同的操作,然后我将使用heroku进行部署以查看它是否有效。

#1