我的 MEAN 应用程序的文件结构如下:
root
|---> public
|----> css
|----> js
|----> controller
|----> app.js
|----> views
|----> index.html
|---> app
|----> server.js
|---> node_modules
|---> bower_components
|---> gulpfile.js
|---> package.json
|---> Procfile
在此应用中,我使用public/index.html
,
gulp
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);
});
然后使用app
与REST API
进行通信。这是在本地机器上工作。我已将此项目上传到heroku
。
我的 Procfile :
web: node node_modules/gulp/bin/gulp serve
但它显示错误。我在heroku logs
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'
我的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"
}
}
有什么建议吗?在此先感谢。
答案 0 :(得分:4)
您可能已在gulp
文件中将devDepenenies
定义为开发依赖项(位于package.json
下)。仅当devDependencies
设置为NODE_ENV
时,NPM才会安装production
。
当您部署到heroku NODE_ENV=production
时,永远不会安装gulp
。因此错误......
Error: Cannot find module '/app/node_modules/gulp/bin/gulp'
只需移动gulp
以及从devDependencies
到dependencies
构建捆绑所需的其他内容。你可以让npm为你移动..
npm uninstall --save-dev gulp
npm install --save gulp
对构建捆绑包所需的每个dev依赖项重复此操作。或者你可以自己复制和粘贴它们。
这是一个没有理想解决方案AFAIK的常见问题。 NPM希望在生产中,您已经预先构建了文件。就像你将它们发布到NPM一样。但是,在heroku和其他推动部署解决方案时,情况并非如此。
答案 1 :(得分:0)
Charlie Martin关于dev-dependencies
和--production
标记(Heroku正确传递)是正确的。您可以看到npm install
和further explanation in the nodejs docs的package.json - 问题的这一部分has been elaborated on elsewhere。
但是,强烈建议部署时不通过gulp运行服务任务,而是定义npm script start
运行browserSync's CLI。这样,你可以保持gulp作为开发依赖。
它可能看起来像这样: 的的package.json 强>
{
... other properties ...
"scripts": {
"start": "browser-sync start --port 8080 -s"
},
... other stuff ...
}
Browsersync's documentation非常好,所以你应该找到你需要的东西。我会在本地进行操作,直到npm start
和gulp serve
执行相同的操作,然后我将使用heroku进行部署以查看它是否有效。