前端和后端组合的应用程序未部署到Heroku [英] app with combined frontend and backend not deploying to Heroku

问题描述

我有一个有角度的前端和nodejs后端应用程序.我遇到的问题是，当我部署到Heroku时，构建和编译成功，但是当我单击打开应用程序时，我认为只有后端在heroku上运行.我查看了有关如何在heroku上部署angular和nodejs应用程序的多个教程和资源，并按照所有说明进行操作，但是无法成功获取完整的Web应用程序(Angular前端和nodejs后端都已部署到Heroku.

I have a angular frontend and nodejs backend app. The issue I am having is when I deploy to Heroku, the build and compile succeeds but I think only the backend is being run on heroku when I click open app. I looked at multiple tutorials and resources on how to deploy an angular and nodejs app on heroku and followed all the instructions but am unable to successfully get the full web app(both angular frontend and nodejs backend to Heroku.

从heroku网址导航到应用程序时得到的输出是:

the output I get when navigating to the app from the heroku url is:

{"message":"Invalid Token"}

我的package.json是:

my package.json is :

{
  "name": "eserver",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "main": "server.js",
    "heroku-postbuild": "ng build --prod",
    "preinstall": "npm install -g @angular/cli @angular/compiler-cli 
typescript",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.11",
    "@angular/cdk": "~7.3.3",
    "@angular/common": "^7.2.11",
    "@angular/compiler": "^7.2.11",
    "@angular/core": "^7.2.11",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "^7.2.11",
    "@angular/http": "^7.2.11",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "^7.2.11",
    "@angular/platform-browser-dynamic": "^7.2.11",
    "@angular/router": "^7.2.11",
    "@fortawesome/fontawesome-free": "^5.6.3",
    "@types/chart.js": "^2.7.42",
    "@types/web-bluetooth": "0.0.4",
    "angular-bootstrap-md": "^7.4.3",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "cors": "^2.8.5",
    "dotenv": "^6.1.0",
    "express": "^4.16.4",
    "hammerjs": "^2.0.8",
    "material-design-lite": "^1.3.0",
    "ng-multiselect-dropdown": "^0.2.3",
    "popper.js": "^1.15.0",
    "pusher-js": "^4.4.0",
    "rxjs": "^6.4.0",
    "@angular-devkit/build-angular": "^0.6.8",
    "rxjs-compat": "^6.3.3",
    "@angular/compiler-cli": "^7.2.11",
    "@angular/cli": "~7.3.7",
    "tslib": "^1.9.0",
    "uuid": "^3.3.2",
    "zone.js": "^0.8.29",
    "bcryptjs": "^2.4.3",
    "express-jwt": "^5.3.1",
    "jsonwebtoken": "^8.2.2",
    "mongodb": "^3.0.10",
    "mongoose": "^5.1.4",
    "pusher": "^2.2.0",
    "rootpath": "^0.1.2",
    "typescript": "~3.2.4"
  },
  "devDependencies": {
    "@angular/language-service": "^7.2.11",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "angular-cli-ghpages": "^0.5.3",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.1",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

我的server.js是:

my server.js is:

require('rootpath')();
const express = require('express');
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser');
const jwt = require('./eserver-backend/_helpers/jwt');
const errorHandler = require('./eserver-backend/_helpers/error- handler');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());

// use JWT auth to secure the api
app.use(jwt());

// api routes
app.use('/users', require('./eserver- 
backend/users/users.controller'));
app.use('/categories', require('./eserver- 
backend/categories/categories.controller'));
app.use('/items', require('./eserver- 
backend/items/items.controller'));
app.use('/tableOrder', require('./eserver- 
backend/tableOrder/tableOrder.controller'));
app.use('/orders', require('./eserver- 
backend/order/order.controller'));
// global error handler
app.use(errorHandler);

// start server
const port = process.env.NODE_ENV === 'production' ? (process.env.PORT || 80) : 4000;
const server = app.listen(port, function () {
console.log('Server listening on port ' + port);
});

我的procfile是:

my procfile is:

web: node server.js

我的文件结构是: 文件结构

推荐答案

将此添加到server.js中可解决此问题 app.use(express.static(__ dirname +'/dist/angular-registration-login-example'));

Adding this to the server.js fixed the issue app.use(express.static(__dirname + '/dist/angular-registration-login-example'));

app.get('/*', function(req,res) {

  res.sendFile(path.join(__dirname+'/dist/angular-registration-login-example/index.html'));
});

这篇关于前端和后端组合的应用程序未部署到Heroku的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！