javascript - 获取应用程序错误代码 503 favicon angular
问题描述
这是我第一次在 Heroku 中部署我的应用程序。
我的部署成功,但出现如下错误。
当我运行 heroku logs --tail
我收到此错误
我从在线和stackoverlow尝试了最大的尝试仍然遇到同样的错误
这是我的 package.json
{
"name": "ff-fabric",
"version": "1.0.1",
"description": "ImagEditor",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --o",
"build": "ng build",
"dist": "ng build --prod --aot=false",
"test": "ng test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build",
"lint": "ng lint",
"e2e": "ng e2e"
},
"engines": {
"node": "14.15.4",
"npm": "7.6.0"
},
"author": "check",
"keywords": [
"kitchensink",
"canvas",
"angular",
"fabricjs",
"editor",
"images",
"fabric"
],
"dependencies": {
"@angular/common": "^11.2.3",
"@angular/compiler": "^11.2.3",
"@angular/core": "^11.2.3",
"@angular/forms": "^11.2.3",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^11.2.3",
"@angular/platform-browser-dynamic": "^11.2.3",
"@angular/router": "^11.2.3",
"@ng-bootstrap/ng-bootstrap": "^9.0.2",
"@types/fabric": "^4.2.2",
"bootstrap": "^4.6.0",
"core-js": "^3.9.1",
"fabric": "^4.3.1",
"font-awesome": "^4.7.0",
"ng-lazyload-image": "^9.1.0",
"ng2-dnd": "^5.0.2",
"ng2-file-upload": "^1.4.0",
"ng2-nouislider": "^1.8.3",
"ng2-pagination": "^2.0.2",
"ng2-toastr": "^4.1.2",
"ngx-color-picker": "^11.0.0",
"ngx-font-picker": "^11.0.1",
"nouislider": "^14.6.3",
"rxjs": "^6.6.6",
"serve": "^11.3.2",
"serve-favicon": "^2.5.0",
"zone.js": "^0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.2",
"@angular/cli": "11.2.2",
"@angular/compiler-cli": "^11.2.3",
"@types/jasmine": "3.6.4",
"@types/node": "~14.14.31",
"codelyzer": "~6.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~6.0.0",
"karma": "~6.1.1",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~7.0.0",
"ts-node": "~9.1.1",
"tslint": "~5.20.1",
"typescript": "~4.0.0"
}
}
这是我的 SRC
解决方案
对您的 package.json 进行少量配置更改即可使其正常工作。
将 Angular cli 从 devDependencies 移动到依赖项。这是因为默认情况下,Heroku 只会安装依赖项对象中列出的包,而忽略 devDependencies 中的包。由于我们希望应用程序构建步骤发生在服务器上而不是我们的本地机器上,因此服务器上的 ng 命令将无法访问,因为它被称为 Angular 应用程序的开发依赖项。
"@angular/cli": "11.2.2", "@angular/compiler-cli": "^11.2.3"
在 package.json 的脚本部分
"start": "node server.js" "heroku-postbuild": "ng build --prod"
通过在终端中运行以下命令来安装 express 服务器
npm install express path --save
在应用程序的根目录中创建一个“server.js”文件,以便从创建的“dist”文件夹中为应用程序提供服务。
//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/<name-of-app>')); app.get('/*', function(req,res) { res.sendFile(path.join(__dirname+'/dist/<name-of-app>/index.html')); }); // Start the app by listening on the default Heroku port app.listen(process.env.PORT || 8080);
希望这可以帮助。
推荐阅读
- ansible - 来自 virsh 控制台的 Ansible 退出期望
- notion-api - Notion API 中可用的块类型
- python - 检查目标时出错:预期 dense_3 的形状为 (6,) 但得到的数组的形状为 (5,)
- ruby-on-rails - Rails + Docker - 如何使用 Heroku 堆栈映像但更新 Ruby 版本?
- python - 在 Python 中使用 OGR 几何十六进制数据
- python - 将循环中创建的每个序列与前一个序列进行比较
- spring-security - 使用redis作为会话存储的keycloak backchannel logout spring session
- r - Cstack 大小限制问题 - r
- karate - 如何在不更改项目结构的情况下获取空手道可执行 jar 文件?
- kubernetes - 为什么叫“容器注册表”?