web-dev-qa-db-fra.com

Déployer l'application Angular 5 + Nodejs Express sur Heroku

J'ai un angulaire 5 App. 

C'est ce que j'ai dans mon 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"
  }
}

J'ai créé un serveur.js avec ce contenu. 

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');

Ensuite, je lance ces commandes 

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

Déboguer

J'ai essayé de courir ça 

⚡️ 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)

Résultat

tout va bien. 

Heroku Log show Construire le succès.

-----> 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

MAIS quand je vais à l'APP: 

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

Je vois ça 

 enter image description here

Des questions

Comment peut-on s'y prendre et déboguer plus loin? 

Je suis ouvert à toute suggestion en ce moment. 

Toute astuce/suggestion/aide sur ce sera sera très apprécié! 

node.jsangularherokuangular5package.json
15
kyo

Voici comment je crée mon application angulaire pour la déployer et travailler sur Heroku:

  1. Votre server.js devrait ressembler à quelque chose comme ça: https://hastebin.com/zavehahide.js
  2. Dans votre package.json, déplacez @angular/cli et @angular/compiler-cli de devDependencies à dependencies
  3. Également dans votre package.json, ajoutez postinstall: ng build --prod et start: node server.js à scripts

Vous devriez être prêt à partir.

9
Chau Tran

Habituellement, lorsque cette erreur se produit, j'ai des problèmes avec les dépendances de nœuds. Essayez de supprimer le dossier node_modules et le dossier dist. À partir de là, tout re-tourne, cela imite comment heroku construira votre projet.

2
Fernando Ania

Vous devrez faire face à un problème de mémoire dépassé si vous voulez construire une prod sur heroku. Donc, le type gratuit ne fonctionnera pas.

Essayez donc de construire en local et de servir vos fichiers dist en utilisant express.

Utiliser la même commande dans le fichier PROC 

Heroku local ou Heroku local: vérifiez vos modifications en local 

1
Mrugank Dhimmar

Je suggère pour plus de simplicité, si vous souhaitez déployer le backend sur heroku comme api et le frontal sur github et activer le partage de ressources croisées sur ordinateur de navigation, je suis en train de construire cette application, ce qui est mon plan sinon, si vous en recevez bonne nouvelle de cette façon vous faites me mettre à jour

1
Daouda

En réponse comment déboguer plus loin. Lancez votre application, puis connectez-vous immédiatement à Heroku, accédez à votre application, puis dans le menu déroulant "Plus", cliquez sur "Afficher les journaux". Devrait vous aider!

Je crois qu’il existe un moyen de visualiser les journaux en temps réel via le terminal afin que vous puissiez voir exactement ce qui ne fonctionne pas.

1
Si-N

Dans votre server.js, vous devez rediriger votre appel http vers l'index.

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

Dans ce qui précède, tout appel vers votre fichier index.html sera redirigé.

1
Mike Tung

Corrigez votre code dans 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');

Pour référence future -

essayez d'exécuter la commande logs avant d'appuyer sur l'URL.

$ heroku logs

Ensuite, consultez les journaux pour plus de détails.

1
Fuad

Essayez d’ajouter @angular-devkit/build-optimizer en tant que package dans le fichier package.json.

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

Cela permet à l'indicateur de post-installation --aot de s'exécuter. Pour une raison quelconque, ce paquet n'est plus intégré.

0
Lauren