前端和后端相结合的应用程序未部署到 Heroku

问题描述

我有一个 angular 前端和 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 url 导航到应用程序时得到的输出是:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！