在this guide和this 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);
有什么想法吗?
答案 0 :(得分:1)
好的,我不记得是我更改了该设置还是默认设置了该设置,但是在angular.json
中,还有一种设置输出目录(outputPath
)的方法。由于某种原因,此设置为
"outputPath": "dist/<project-name>"
我将其更改为
"outputPath": "dist"
现在一切正常。
答案 1 :(得分:0)
如果您要从/dist/
提供应用的静态文件,则必须通过切换到ng build
命令来将其告知成角度:
ng build --prod --deploy-url /dist/