2017-05-21 11 views
7

Mam następującą strukturę plików z moich OZNACZA aplikacja:node.js aplikacja wdrożyć w Heroku

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

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

W tej aplikacji, biegnę public/index.html użyciu 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); 
}); 

Następnie skontaktuj się z app przy użyciu REST API. To działa na lokalnym komputerze. Przesłałem ten projekt do heroku.

Moja Procfile:

web: node node_modules/gulp/bin/gulp serve 

ale pokazuje błąd. Mam następujący błąd do 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'

Moja package.json file:

{ 
    "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" 
    } 
} 

Wszelkie sugestie? Z góry dziękuję.

+0

Gdzie znajduje się twoje 'pakiet.json' i jaka jest jego zawartość? – therobinkim

Odpowiedz

4

Prawdopodobnie masz gulp zdefiniowane jako zależność programistyczna (pod devDepenenies) w pliku package.json. NPM instaluje tylko devDependencies, gdy NODE_ENV jest nie ustawiony na production.

Po wdrożeniu w heroku, NODE_ENV=production, tak gulp nigdy nie jest instalowany. Stąd błąd ...

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

Wystarczy przesunąć gulp i co tam jeszcze jest potrzebne do budowania zawiniątko z devDependencies do dependencies. Możesz zrobić npm przenieść go dla ciebie z ..

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

Powtórz to dla każdego zależnego od dewelopera wymaganego do zbudowania pakietu. Lub możesz po prostu skopiować i wkleić je samemu.


Jest to typowy problem bez idealnego rozwiązania AFAIK. NPM spodziewa się, że podczas produkcji będziesz miał już gotowe pliki. Tak samo, jakbyś publikował je w NPM. Jednak w heroku i innych metodach wdrażania rozwiązań nie ma to miejsca.

+0

Dlaczego spadamy? –

0

Charlie Martin ma poprawną wartość o dev-dependencies i flagę --production (którą Heroku poprawnie przekazuje). Możesz zobaczyć further explanation in the nodejs docs dla npm install i package.json - tę część pytania has been elaborated on elsewhere.

Jednak chciałbym zalecamy że na wdrożeniu ty Nie uruchamiaj służyć zadanie poprzez haustem i zamiast definiować swoje npm scriptstart uruchomić browserSync's CLI. W ten sposób, możesz zachować łyk jako zależność od dev.

To prawdopodobnie wyglądać następująco: package.json

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

Browsersync's documentation jest całkiem dobre, więc trzeba znaleźć to, czego potrzebujemy. Bawiłam się lokalnie, dopóki npm start i gulp serve zrobi to samo, a następnie wdrożyłem z heroku, aby sprawdzić, czy zadziałało.