我的 MEAN 应用程序有以下文件结构:
root
|---> public
|----> css
|----> js
|----> controller
|----> app.js
|----> views
|----> index.html
|---> app
|----> server.js
|---> node_modules
|---> bower_components
|---> gulpfile.js
|---> package.json
|---> Procfile
在这个应用程序中,我使用 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);
});
然后使用REST API
与app
通信。这在本地机器中工作。我已将这个项目上传到heroku
.
我的程序文件:
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"
}
}
有什么建议吗?提前谢谢。
package.json
文件中gulp
定义为开发依赖项(在devDepenenies
下(。NPM 仅在NODE_ENV
未设置为 production
时安装devDependencies
。
部署到 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
对生成捆绑包所需的每个开发依赖项重复此操作。或者您可以自己复制并粘贴它们。
这是一个没有理想解决方案AFAIK的常见问题。NPM 希望在生产中,您已经预先构建了文件。就像将它们发布到 NPM 一样。然而,在 heroku 和其他推动部署解决方案中,情况并非如此。
查理·马丁对dev-dependencies
和--production
旗是正确的(Heroku正确地通过了(。您可以在 nodejs 文档中看到 npm install
和 package.json 的进一步解释 - 这个问题已经在其他地方进行了详细说明。
但是,我强烈建议在部署时不要通过gulp运行服务任务,而是定义npm脚本start
以运行browserSync的CLI。这样,您可以将 gulp 保留为开发依赖项。
它可能看起来像这样:包.json
{
... other properties ...
"scripts": {
"start": "browser-sync start --port 8080 -s"
},
... other stuff ...
}
Browsersync的文档非常好,所以你应该找到你需要的东西。我会在本地摆弄它,直到npm start
并且gulp serve
做同样的事情,然后我会使用 heroku 进行部署,看看它是否有效。