Node.js 部署角度5+;向Heroku发送Nodejs Express应用程序
我有一个角度5应用程序 这就是我的包中的内容。jsonNode.js 部署角度5+;向Heroku发送Nodejs Express应用程序,node.js,angular,heroku,angular5,package.json,Node.js,Angular,Heroku,Angular5,Package.json,我有一个角度5应用程序 这就是我的包中的内容。json { "name": "web", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "node server
{
"name": "web",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot --prod"
},
"private": true,
"dependencies": {
"@angular/animations": "5.1.0",
"@angular/cli": "^1.6.4",
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@angular/router": "5.0.3",
"@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
"@ngx-translate/core": "8.0.0",
"@types/jquery": "3.2.16",
"angular2-image-upload": "^1.0.0-rc.0",
"bootstrap": "4.0.0-beta.2",
"core-js": "2.4.1",
"express": "^4.16.2",
"jquery": "3.2.1",
"jquery-slimscroll": "1.3.8",
"ngx-toastr": "8.0.0",
"ngx-uploader": "4.2.1",
"pace-js": "1.0.2",
"popper.js": "1.13.0",
"rxjs": "5.5.0",
"sticky-kit": "1.1.3",
"typescript": "~2.4.2",
"zone.js": "0.8.4"
},
"devDependencies": {
"@angular/language-service": "5.0.3",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0"
},
"engines": {
"node": "8.9.4",
"npm": "5.6.0"
}
}
我创建了一个包含这些内容的server.js
constexpress=require('express');
constapp=expres();
constpath=require('path');
app.us(express.static(__dirname+'/dist'));
app.listen(process.env.PORT||8080);
//PathLocationStradegy
app.get('/'function(req,res) {
res.sendFile(path.join(__dirname+'/dist/index.html'));
});
console.log('Console Listening');
然后,我运行这些命令
heroku auth:login
Email : johndoe@outlook.com
Password : #########
heroku create iproject-demo
heroku git:remote iproject-demo
git status
git add -A
git push heroku master
调试 我试着运行这个 ⚡️ web heroku ps
Free dyno hours quota remaining this month: 998h 46m (99%)
For more information on dyno sleeping and how to upgrade, see:
https://devcenter.heroku.com/articles/dyno-sleeping
=== web (Free): npm start (1)
web.1: crashed 2018/01/27 14:18:58 -0500 (~ 1m ago)
结果 一切看起来都很好 Heroku日志显示构建成功
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 8.x...
Downloading and installing node 8.9.4...
Using default npm version: 5.6.0
-----> Restoring cache
Skipping cache restore (not-found)
-----> Building dependencies
Installing node modules (package.json)
added 26 packages in 5.46s
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 34.4M
-----> Launching...
Released v3
https://iproject-demo.herokuapp.com/ deployed to Heroku
但当我进入应用程序时:
我看到了
如何进一步调试此功能?在
server.js
中,需要将http调用重定向到索引
app.route('/*', function(req,res) {
res.redirect(__dirname + '/dist/index.html')
})
在上面的示例中,它会将所有调用重定向到index.html。更正Server.js中的代码
const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(__dirname+'/dist'));
app.listen(process.env.PORT||8080);
//Path Location Strategy
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname+'/dist/index.html'));
});
console.log('Console Listening');
供日后参考-
在点击URL之前,请尝试运行logs
命令
$ heroku logs
然后查看日志以了解更多详细信息。如果要在heroku上构建prod,您将面临内存超出问题。所以自由类型不起作用 因此,尝试在本地构建,并使用express为您的dist文件提供服务 在PROC文件中使用相同的命令
Heroku local或Heroku local web:验证您在local中所做的更改。以下是我如何制作Angular应用程序来部署和使用Heroku:
server.js
应该如下所示:package.json
中,将@angular/cli
和@angular/compiler cli
从devdeependencies
移动到依赖项
package.json
中,将postinstall:ng build--prod
和start:node server.js
添加到脚本中
您应该准备好了。通常当我遇到此错误时,我会遇到节点依赖性问题。尝试删除node_modules文件夹和dist文件夹。从那以后,一切都重新开始,这模仿了heroku将如何构建您的项目。回答如何进一步调试。运行你的应用程序,然后直接登录Heroku,转到你的应用程序,然后在“更多”下拉列表中,单击“查看日志”。我应该帮助你
我相信也有一种方法可以通过终端查看实时日志,这样您就可以准确地看到失败的地方。尝试将
@angular devkit/build optimizer
作为包添加到package.json文件中
"dependencies": {
"@angular-devkit/build-optimizer": "^0.4.0",
...
}
这允许安装后标志
--aot
运行。出于某些原因,此软件包不再内置。为了更简单,我建议,如果您想在heroku上部署后端作为api,在github上部署前端,并在浏览计算机上激活跨源资源共享,我实际上正在构建这样的应用程序,这是我的计划,否则,如果你得到任何关于这种方式的好消息,你正在做的update meAngular是一个SPA,因此在你运行ng build
之后,你需要将所有http调用快速重定向回index.html,这样Angular就可以完全正确,那么我该如何解决这个问题呢?我已经附加了我的server.js。server.js真的是这样吗?这里面全是错误。@MikaS,你能推荐一个正确的吗?我是这个部署的新手。我看了这个视频:据他说,效果很好。我不知道其他人该做什么,也不知道该信任谁。@I我想我会根据你的建议更新我的server.js
,现在如何重新部署我的整个应用程序git push heroku master
?另一个问题,我是否应该删除我的应用程序。获取(…)
行?用你的替换?用我的替换你的,还要确保使用ng build
创建dist文件夹并指向它。你根本不必运行ng serve,我根本不用ng serve
。我认为日志是缓存。我删除了它,因为我不想让你们感到困惑。我希望它在我添加到我的包时运行node server.js
。json
您是否共享了完整的构建日志,因为我没有看到您的安装脚本在构建过程中运行。尝试重建项目。如何重建ng build--prod--aot
?我应该在哪里重建?本地?我想我的heroku日志显示的是旧日志。我在这里问了另外一个问题:你还有什么其他建议吗?谢谢,让我试试看。