具有组合前端和后端的应用程序未部署到 Heroku

Question

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

从 heroku url 导航到应用程序时得到的输出是：

{"message":"Invalid Token"}

我的 package.json 是：

{
  "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 是：

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

web: node server.js

我的文件结构是： file structure

Answer 1

将此添加到 server.js 解决了问题 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'));
});

Answer 2

Node.js 应用程序应该提供 dist 文件夹中使用 ng build 构建的静态文件

在您的 server.js 文件中添加以下代码。

// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));

// For all GET requests, send back index.html
// so that PathLocationStrategy can be used
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});