Question

英语不是我的母语，所以请原谅任何错误。
我正在尝试在Heroku上部署我的angular 10.0.14应用程序。

按照步骤设置项目后，下属出现以下错误：

 Failed to load resource: the server responded with a status of 503 (Service Unavailable)

enter image description here

==========================
[hreoku构建日志]

heroku的构建结果：“构建成功！”
在活动的构建日志中没有看到明显的错误消息 https://www.evernote.com/l/AgiYqPvwz1tGYqSidTRBJRWDz0W8ufofYow/

==========================
[heroku应用程序链接失败]
https://first-angular20200829.herokuapp.com/

========步骤开始==================
[部署步骤]
A.创建+ install angular
1.ng new [项目名称]
2.cd [项目名称]
3.ng s

==========================
B.edit [项目名称] / package.json：
https://github.com/aloo31124/first-angular/blob/master/package.json

{
"name": " [project name ]",
...
  "scripts": {      
    "start" : "node server.js",
    "postinstall": "ng build --aot --prod",
    "heroku-postbuild": "ng build --prod",
//Some articles use "postinstall" and some are "heroku-postbuild" . I tried both but it still didn't work.
...
},
"engines": {
    "node": "10.16.0",
    "npm": "6.9.0"
  },

"dependencies": {
    ...
    "typescript": "~3.9.5"
},
"devDependencies": {
    "typescript": "~3.9.5"
}

===========================

C.install express
npm install express path --save

检查快递：

"dependencies": {
    "express": "^4.17.1",
}

==========================
D.在根目录[项目名称]中创建server.js：
https://github.com/aloo31124/first-angular/blob/master/server.js
[项目名称] /server.js

//Install express server
const express = require('express');
const path = require('path');
const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/[project name ]'));
app.get('/*', function(req,res) {
    res.sendFile(path.join(__dirname+'/dist/[project name]/index.html'));
});

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

==========================
E. github
git添加
git commit -m“ xxx”
git push
=========================
F.在heroku上部署
1.进入heroku主页
2.选择“部署”选项卡>“部署方法”字段，选择GitHub
3.在“手动部署”字段中按“部署”按钮

========步骤结束=============
感谢您阅读本文后的耐心配合，
我希望有人能给我建议。

==========================
参考：
https://www.youtube.com/watch?v=KVFrTf4VD2o
https://www.manonglife.com/2019/03/angular-heroku.html

将Angular 10部署到Heroku时，如何解决错误503的问题

0 个答案: