web-dev-qa-db-de.com

Stellen Sie die Angular 5 + Nodejs Express-App für Heroku bereit

Ich habe eine Angular 5 App. 

Das habe ich in meinem package.json

{
  "name": "web",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.1.0",
    "@angular/cli": "^1.6.4",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@angular/router": "5.0.3",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "@ngx-translate/core": "8.0.0",
    "@types/jquery": "3.2.16",
    "angular2-image-upload": "^1.0.0-rc.0",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.4.1",
    "express": "^4.16.2",
    "jquery": "3.2.1",
    "jquery-slimscroll": "1.3.8",
    "ngx-toastr": "8.0.0",
    "ngx-uploader": "4.2.1",
    "pace-js": "1.0.2",
    "popper.js": "1.13.0",
    "rxjs": "5.5.0",
    "sticky-kit": "1.1.3",
    "TypeScript": "~2.4.2",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/language-service": "5.0.3",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0"
  },
  "engines": {
    "node": "8.9.4",
    "npm": "5.6.0"
  }
}

Ich habe ein server.js mit diesen Inhalten erstellt. 

constexpress=require('express');
constapp=expres();
constpath=require('path');

app.us(express.static(__dirname+'/dist'));

app.listen(process.env.PORT||8080);


//PathLocationStradegy
app.get('/'function(req,res) {
  res.sendFile(path.join(__dirname+'/dist/index.html'));
});

console.log('Console Listening');

Dann führe ich diese Befehle aus 

heroku auth:login
Email : [email protected]
Password : #########
heroku create iproject-demo
heroku git:remote iproject-demo
git status
git add -A
git Push heroku master

Debuggen

Ich habe versucht, das auszuführen 

⚡️ web heroku ps 

Free dyno hours quota remaining this month: 998h 46m (99%)
For more information on dyno sleeping and how to upgrade, see:
https://devcenter.heroku.com/articles/dyno-sleeping

=== web (Free): npm start (1)
web.1: crashed 2018/01/27 14:18:58 -0500 (~ 1m ago)

Ergebnis

alles sieht gut aus. 

Heroku Log zeigt Erfolg beim Erstellen an.

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.9.4...
       Using default npm version: 5.6.0
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (package.json)
       added 26 packages in 5.46s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 34.4M
-----> Launching...
       Released v3
       https://iproject-demo.herokuapp.com/ deployed to Heroku

ABER wenn ich zur APP gehe: 

https://iproject-demo.herokuapp.com/

Ich sehe es 

 enter image description here

Fragen

Wie würde man das weitergehen und debuggen? 

Ich bin offen für alle Vorschläge in diesem Moment. 

Alle Hinweise/Vorschläge/Hilfen dazu werden sehr geschätzt! 

node.jsangularherokuangular5package.json
15
kyo

So mache ich meine Angular-App, um Heroku bereitzustellen und zu bearbeiten:

  1. Ihr server.js sollte in etwa folgendermaßen aussehen: https://hastebin.com/zavehahide.js
  2. Verschieben Sie in Ihrem package.json@angular/cli und @angular/compiler-cli von devDependencies nach dependencies.
  3. Fügen Sie auch in Ihrem package.jsonpostinstall: ng build --prod und start: node server.js zu scripts hinzu.

Du solltest gut sein.

9
Chau Tran

Wenn mir dieser Fehler passiert, habe ich normalerweise Probleme mit Knotenabhängigkeiten. Versuchen Sie, den Ordner node_modules und den Ordner dist zu entfernen. Von dort aus wird alles wieder hochgefahren. Dies ahmt nach, wie Heroku Ihr Projekt aufbaut.

2
Fernando Ania

Wenn Sie sich auf Heroku stützen, werden Sie mehr als nur Gedächtnis haben. Free Type funktioniert also nicht.

Versuchen Sie also, local einzurichten und Ihre dist-Dateien mit express bereitzustellen.

Verwenden Sie denselben Befehl in der PROC-Datei 

Heroku Local oder Heroku Local Web: Überprüfen Sie Ihre Änderungen in Local 

1
Mrugank Dhimmar

Ich schlage der Einfachheit halber vor: Wenn Sie das Backend auf Heroku als API und das Frontend auf Github bereitstellen und die Cross-Origin-Ressourcennutzung auf Browsing-Computern aktivieren möchten, baue ich tatsächlich eine solche App. Das ist mein Plan gute Nachricht von dieser Art und Weise aktualisieren Sie mich

1
Daouda

In der Antwort, wie man weiter debuggt. Starten Sie Ihre App, melden Sie sich dann sofort bei Heroku an, wechseln Sie zu Ihrer App und klicken Sie dann in der Dropdown-Liste "Mehr" auf "Protokolle anzeigen". Sollte dir helfen!

Ich glaube, es gibt eine Möglichkeit, die Live-Protokolle auch über das Terminal anzuzeigen, sodass Sie genau sehen können, was fehlschlägt.

1
Si-N

In Ihrem server.js müssen Sie Ihren http-Aufruf zum Index umleiten.

app.route('/*', function(req,res) {
  res.redirect(__dirname + '/dist/index.html')
})

In der obigen Liste werden alle Aufrufe an Ihre index.html weitergeleitet.

1
Mike Tung

Korrigieren Sie Ihren Code in Server.js

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(__dirname+'/dist'));

app.listen(process.env.PORT||8080);


//Path Location Strategy
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname+'/dist/index.html'));
});

console.log('Console Listening');

Für zukünftige Referenz -

versuchen Sie, den Befehl logs auszuführen, bevor Sie auf die URL klicken.

$ heroku logs

Überprüfen Sie dann die Protokolle auf weitere Details.

1
Fuad

Versuchen Sie, @angular-devkit/build-optimizer als Paket in der package.json-Datei hinzuzufügen.

"dependencies": {
    "@angular-devkit/build-optimizer": "^0.4.0",
    ...
}

Dadurch kann das Nachinstallationsflag --aot ausgeführt werden. Aus irgendeinem Grund ist dieses Paket nicht mehr eingebaut.

0
Lauren