HTTP 404 после успешного развертывания приложения Angular на heroku - PullRequest
0 голосов
/ 04 ноября 2018

После этого руководства , а также этого руководства Я пытаюсь развернуть свое приложение 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

Также в логах героку я вижу, что статус устанавливается на 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 голосов
/ 04 ноября 2018

Ладно, я не могу вспомнить, изменил ли я это или это установлено по умолчанию, но в angular.json есть также способ установить выходной каталог (outputPath). По какой-то причине это было установлено на

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

Я изменил это на

"outputPath": "dist"

и теперь все работает.

0 голосов
/ 04 ноября 2018

Если вы обслуживаете статические файлы вашего приложения с /dist/, то вы должны указать это как угловой, используя переключатель на команду ng build:

ng build --prod --deploy-url /dist/
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...