将Angular应用成功部署到heroku之后的HTTP 404

时间:2018-11-04 10:16:04

标签: angular heroku

this guidethis guide之后,我试图将Angular应用程序部署到heroku。

我实际上有两个 个应用。一个在工作,另一个在工作,我看不出区别在哪里。

如果我部署了该应用程序,它“看起来就像”一切正常(这不起作用):

..
remote: -----> Compressing...
remote:        Done: 59.7M
remote: -----> Launching...
remote:        Released v6
remote:        https://*********.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/*********.git
   5604a1b..6ee9624  master -> master

我还在heroku日志中看到状态被设置为up

2018-11-04T10:10:19.360364+00:00 heroku[web.1]: State changed from up to starting
2018-11-04T10:10:20.374632+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2018-11-04T10:10:20.492521+00:00 heroku[web.1]: Process exited with status 143
2018-11-04T10:10:31.000000+00:00 app[api]: Build succeeded
2018-11-04T10:10:33.593410+00:00 heroku[web.1]: Starting process with command `npm start`
2018-11-04T10:10:37.121051+00:00 app[web.1]: 
2018-11-04T10:10:37.121068+00:00 app[web.1]: > ********@0.0.0 start /app
2018-11-04T10:10:37.121070+00:00 app[web.1]: > node server.js
2018-11-04T10:10:37.121071+00:00 app[web.1]: 
2018-11-04T10:10:37.849823+00:00 heroku[web.1]: State changed from starting to up
2018-11-04T10:10:38.968886+00:00 heroku[router]: at=info method=GET path="/" host=********.herokuapp.com request_id=81ca531b-c462-4264-a593-7d9b2d676f1d fwd="84.115.204.37" dyno=web.1 connect=1ms service=76ms status=404 bytes=383 protocol=https

但是,如果我现在正在访问https://*********.herokuapp.com/,我将得到

Cannot GET /

来自HTTP 404 Not Found响应。

我看不到哪里出错了,所以这里是package.json

{
  "name": "********",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "engines": {
    "node": "8.12.0",
    "npm": "6.4.1"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "6.1.7",
    "@angular/cdk": "^6.4.7",
    "@angular/cli": "6.2.2",
    "@angular/common": "6.1.7",
    "@angular/compiler": "6.1.7",
    "@angular/compiler-cli": "6.1.7",
    "@angular/core": "6.1.7",
    "@angular/flex-layout": "^6.0.0-beta.18",
    "@angular/forms": "6.1.7",
    "@angular/http": "6.1.7",
    "@angular/material": "^6.4.7",
    "@angular/material-moment-adapter": "^6.4.7",
    "@angular/platform-browser": "6.1.7",
    "@angular/platform-browser-dynamic": "6.1.7",
    "@angular/router": "6.1.7",
    "@fortawesome/angular-fontawesome": "^0.2.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-brands-svg-icons": "^5.3.1",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@ngx-share/button": "^6.0.1",
    "@ngx-share/core": "^6.0.1",
    "angular-mentions": "^0.8.0",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.7",
    "express": "^4.16.3",
    "http-status-codes": "^1.3.0",
    "ng-pick-datetime": "^6.0.16",
    "ngx-logger": "^3.1.0",
    "ngx-moment": "^3.1.0",
    "rxjs": "^6.3.2",
    "typescript": "^2.9.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.8.2",
    "@angular/language-service": "6.1.7",
    "@types/googlemaps": "^3.30.11",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~10.9.4",
    "codelyzer": "^4.4.4",
    "enhanced-resolve": "^4.1.0",
    "jasmine-core": "~3.2.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^1.3.1",
    "protractor": "^5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "^5.11.0"
  }
}

这里是一个diff,它向您显示与不工作的应用程序的 package.json 的区别。如您所见,没有本质区别。

这是 server.js -直到两个应用程序的最后一个字符都相同:

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

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

// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

好的,我不记得是我更改了该设置还是默认设置了该设置,但是在angular.json中,还有一种设置输出目录(outputPath)的方法。由于某种原因,此设置为

"outputPath": "dist/<project-name>"

我将其更改为

"outputPath": "dist"

现在一切正常。

答案 1 :(得分:0)

如果您要从/dist/提供应用的静态文件,则必须通过切换到ng build命令来将其告知成角度:

ng build --prod --deploy-url /dist/