Ric*_*mer 3 deployment heroku node.js angular angular5
我正在使用 Github 部署在 Heroku 上部署 Angular 5 应用程序。Heroku 上的构建过程成功完成。这是构建日志：
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 9.0.0
engines.npm (package.json): 5.7.1
Resolving node version 9.0.0...
Downloading and installing node 9.0.0...
Bootstrapping npm 5.7.1 (replacing 5.5.1)...
npm 5.7.1 installed
-----> Restoring cache
Skipping cache restore (not-found)
-----> Building dependencies
Installing node modules (package.json + package-lock)
> uws@9.14.0 install /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0
> node-sass@4.8.3 install /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/linux-x64-59_binding.node
Download complete
Binary saved to /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass/vendor/linux-x64-59/binding.node
Caching binary to /tmp/npmcache.6p2xH/node-sass/4.8.3/linux-x64-59_binding.node
> uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
> node-sass@4.8.3 postinstall /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass
> node scripts/build.js
Binary found at /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine
> puckgames@0.0.0 postinstall /tmp/build_f955e847c7812f77225546f9f0519385
> ng build --aot -prod
Date: 2018-05-01T12:51:14.033Z
Hash: bae98aa0ec3557461128
Time: 54842ms
chunk {0} polyfills.46af3f84a403e219371b.bundle.js (polyfills) 59.7 kB [initial] [rendered]
chunk {1} main.2c0ad66a3c04faa09c51.bundle.js (main) 393 kB [initial] [rendered]
chunk {2} styles.63956080a26a0ea45a51.bundle.css (styles) 48.1 kB [initial] [rendered]
chunk {3} inline.63bc67a6d5411e8cbf28.bundle.js (inline) 1.45 kB [entry] [rendered]
added 1502 packages from 1260 contributors in 105.406s
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Pruning devDependencies
removed 1484 packages in 15.39s
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 36.7M
-----> Launching...
Released v3
由于应用程序错误，我的应用程序从未运行。使用npm start或 时，应用程序在本地运行良好heroku local web。
以下是应用程序中使用的版本：
我收到以下错误并且不知道如何解决：
2018-05-01T12:52:03.421925+00:00 应用程序[web.1]：npm 错误！退出状态 1 2018-05-01T12:52:03.422287+00:00 app[web.1]: npm 错误！2018-05-01T12:52:03.422552+00:00 应用程序[web.1]：npm 错误！puckgames@0.0.0 启动脚本失败。2018-05-01T12:52:03.422819+00:00 应用程序[web.1]：npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。2018-05-01T12：52：03.431523 + 00：00应用程序[web.1]：2018-05-01T12：52：03.431832 + 00：00应用程序[web.1]：npm错误！此运行的完整日志可以在以下位置找到：2018-05-01T12:52:03.432041+00:00 app[web.1]: npm ERR!
/app/.npm/_logs/2018-05-01T12_52_03_424Z-debug.log 2018-05-01T12:52:03.482946+00:00 heroku[web.1]：进程已退出，状态为 1 2018-05-01T12:52： 03.910224+00:00 heroku[路由器]: at=错误代码=H10 desc="应用程序崩溃" method=GET path="/" host=marcums-puck-games.herokuapp.com request_id=6e709bae-f4df-497f-89e9 -ddd22b8f9230 fwd="66.41.188.175" dyno= 连接= 服务= 状态=503 字节= 协议=https 2018-05-01T12:52:04.326950+00:00 heroku[路由器]: at=错误代码=H10 desc="应用程序崩溃” method=GET path="/favicon.ico" host=marcums-puck-games.herokuapp.com request_id=a45ab870-def7-422e-974a-1e25c16191bb fwd="66.41.188.175" dyno= connect= service= status =503字节=协议=https
服务器.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'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/index.html'));
});
// Start the app by listening on the default Heroku port
const port = process.env.PORT || 8080;
app.listen(port, () => {
console.log('Express server listening on port', port)
});
package.json 文件
{
"name": "puckgames",
"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"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.10",
"@angular/cdk": "^5.2.5",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/flex-layout": "^5.0.0-beta.14",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.5",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19",
"typescript": "~2.5.3"
},
"devDependencies": {
"@angular/cli": "1.6.8",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"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": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
},
"engines": {
"node": "9.0.0",
"npm": "5.7.1"
}
}
所有帮助将不胜感激。如果我忽略了提供调试此部署所需的任何内容，请告诉我。感谢您的时间。
Heroku 要求您的应用程序有后端。为了实现这一目标，我们将向您的应用程序添加node和express。我可以看到大多数更改已经存在于您的中package.json，但仍然请执行以下步骤，并请确保遵循下面提到的所有步骤：
在你的 package.json 中，复制
"@angular/cli": "1.7.3"", "@angular/compiler-cli": "^5.2.0"
从devDependencies到dependencies。
在 package.json 中创建安装后脚本-
在 下"scripts"，添加安装后命令：
"postinstall": "ng build --aot --prod"
这告诉 Heroku 使用提前 (AOT) 编译器构建应用程序并使其可用于生产。这将创建一个dist文件夹，我们的应用程序的所有 html 和 javascript 转换版本都将从中启动。
添加node和npm引擎-
您将需要添加 Heroku 将用来运行您的应用程序的 Node 和 NPM 引擎。最好它应该与您机器上的版本相同。因此，运行node -v并npm -v获取正确的版本并将其包含在您的package.json文件中，如下所示：
"engine": { "node": "8.9.4", "npm": "5.6.0" }
复制typescript到dependencies-
复制"typescript": "~2.5.3"从devDependencies到dependencies也告知 Heroku 使用什么 typescript 版本。
安装增强解析3.3.0：
运行命令：
npm install enhanced-resolve@3.3.0 --save-dev
安装服务器来运行您的应用程序：
在本地，我们从终端运行ng serve以在本地浏览器上运行我们的应用程序。但我们需要设置一个 Express 服务器来运行我们的生产就绪应用程序（从dist创建的文件夹中），以确保轻量级和快速加载。通过运行以下命令安装 Express 服务器：
npm install express path --save
在应用程序的根目录中创建一个 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'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);
现在运行：
git push heroku your_remote_name
Heroku 将查看您的package.json软件包并安装它们。它将运行postinstall，然后node server.js启动您的应用程序。您可以检查“活动”选项卡并打开“构建日志”以查看其实际运行情况。希望能帮助到你！
| 归档时间： |
|
| 查看次数： |
6755 次 |
| 最近记录： |