将Angular 4 / NodeJS部署到Heroku

时间：2017-10-14 22:47:05

标签： node.js angular heroku package.json

我会将我的Web应用程序部署到Heroku。 这是我项目的树：

├── client // Angular project is Here
├── db
├── express-admin
├── index.js
├── node_modules
├── package.json
├── package-lock.json
├── port
├── Procfile
├── README.md
├── routes
└── test.html

我已经做了这些步骤：

1）使用ng build -prod --aot=false

构建Angular 4应用

2）将Point Nodes应用程序指向/ dist文件夹中的Angular index.html文件。

这里是 index.js 文件：

// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
var cool = require('cool-ascii-faces');

//var db = require('./db/connect.js');
// Get our API routes
//const api = require('./server/routes/api');
var appRoutes = require('./routes/index');
const app = express();

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

// Point static path to dist
app.use(express.static(path.join(__dirname, 'client/dist/')));
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');

  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
app.use('/', appRoutes)
// Set our api routes
//app.use('/api', api);

// Catch all other routes and return the index file
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/dist/index.html'));
});
app.get('/cool', function(request, response) {
  response.send(cool());
});
/**
 * Get port from environment and store in Express.
 */
const port = process.env.PORT || '4001';
app.set('port', port);

/**
 * Create HTTP server.
 */
const server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port, () => console.log(`API running on localhost:${port}`));

3）我使用official Heroku Guide部署NodeJS应用

当我打开Heroku生成的链接时，索引页面被加载但是当我尝试使用登录时出现此错误：

Mixed Content: The page at 'https://lit-island-95274.herokuapp.com/signup' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:4001/login'. This request has been blocked; the content must be served over HTTPS.

这是我的Angular Package.json 文件：

{
  "name": "projecttt",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.1.2",
    "@angular/common": "^4.1.2",
    "@angular/compiler": "^4.1.2",
    "@angular/core": "^4.1.2",
    "@angular/flex-layout": "^2.0.0-beta.7",
    "@angular/forms": "^4.1.2",
    "@angular/http": "^4.1.2",
    "@angular/material": "2.0.0-beta.4",
    "@angular/platform-browser": "^4.1.2",
    "@angular/platform-browser-dynamic": "^4.1.2",
    "@angular/router": "^4.1.2",
    "angular-2-local-storage": "^1.0.1",
    "hammerjs": "^2.0.8",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "systemjs": "^0.20.14",
    "typings": "^2.1.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.7",
    "@angular/compiler-cli": "^4.4.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^8.0.7",
    "codelyzer": "~3.0.1",
    "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",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~5.1.2",
    "rimraf": "^2.5.4",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "^2.3.4"
  },
  "repository": {},
  "main": "karma-test-shim.js"
}

如果我很好理解，Angular http路由没有部署，因为Heroku没有构建Angular应用程序，但是如何做到这一点？

2 个答案:

答案 0 :(得分：0)

默认情况下，heroku不会安装任何dev依赖项，因此请移动

    Provider: SUN
  Algorithm: SHA1PRNG
  Algorithm: NativePRNG
  Algorithm: NativePRNGBlocking
  Algorithm: NativePRNGNonBlocking
  Algorithm: SHA1withDSA
  Algorithm: NONEwithDSA
  Algorithm: SHA224withDSA
  Algorithm: SHA256withDSA
  Algorithm: SHA1withDSAinP1363Format
  Algorithm: NONEwithDSAinP1363Format
  Algorithm: SHA224withDSAinP1363Format
  Algorithm: SHA256withDSAinP1363Format
  Algorithm: DSA
  Algorithm: MD2
  Algorithm: MD5
  Algorithm: SHA
  Algorithm: SHA-224
  Algorithm: SHA-256
  Algorithm: SHA-384
  Algorithm: SHA-512
  Algorithm: DSA
  Algorithm: DSA
  Algorithm: DSA
  Algorithm: X.509
  Algorithm: PKCS12
  Algorithm: JKS
  Algorithm: CaseExactJKS
  Algorithm: DKS
  Algorithm: JavaPolicy
  Algorithm: JavaLoginConfig
  Algorithm: PKIX
  Algorithm: PKIX
  Algorithm: Collection
  Algorithm: com.sun.security.IndexedCollection
Provider: SunRsaSign
  Algorithm: RSA
  Algorithm: RSA
  Algorithm: MD2withRSA
  Algorithm: MD5withRSA
  Algorithm: SHA1withRSA
  Algorithm: SHA224withRSA
  Algorithm: SHA256withRSA
  Algorithm: SHA384withRSA
  Algorithm: SHA512withRSA
Provider: SunJSSE
  Algorithm: RSA
  Algorithm: RSA
  Algorithm: MD2withRSA
  Algorithm: MD5withRSA
  Algorithm: SHA1withRSA
  Algorithm: MD5andSHA1withRSA
  Algorithm: SunX509
  Algorithm: NewSunX509
  Algorithm: SunX509
  Algorithm: PKIX
  Algorithm: TLSv1
  Algorithm: TLSv1.1
  Algorithm: TLSv1.2
  Algorithm: TLS
  Algorithm: DTLSv1.0
  Algorithm: DTLSv1.2
  Algorithm: DTLS
  Algorithm: Default
  Algorithm: PKCS12
Provider: SunJCE
  Algorithm: RSA
  Algorithm: DES
  Algorithm: DESede
  Algorithm: DESedeWrap
  Algorithm: PBEWithMD5AndDES
  Algorithm: PBEWithMD5AndTripleDES
  Algorithm: PBEWithSHA1AndDESede
  Algorithm: PBEWithSHA1AndRC2_40
  Algorithm: PBEWithSHA1AndRC2_128
  Algorithm: PBEWithSHA1AndRC4_40
  Algorithm: PBEWithSHA1AndRC4_128
  Algorithm: PBEWithHmacSHA1AndAES_128
  Algorithm: PBEWithHmacSHA224AndAES_128
  Algorithm: PBEWithHmacSHA256AndAES_128
  Algorithm: PBEWithHmacSHA384AndAES_128
  Algorithm: PBEWithHmacSHA512AndAES_128
  Algorithm: PBEWithHmacSHA1AndAES_256
  Algorithm: PBEWithHmacSHA224AndAES_256
  Algorithm: PBEWithHmacSHA256AndAES_256
  Algorithm: PBEWithHmacSHA384AndAES_256
  Algorithm: PBEWithHmacSHA512AndAES_256
  Algorithm: Blowfish
  Algorithm: AES
  Algorithm: AES_128/ECB/NoPadding
  Algorithm: AES_128/CBC/NoPadding
  Algorithm: AES_128/OFB/NoPadding
  Algorithm: AES_128/CFB/NoPadding
  Algorithm: AES_128/GCM/NoPadding
  Algorithm: AES_192/ECB/NoPadding
  Algorithm: AES_192/CBC/NoPadding
  Algorithm: AES_192/OFB/NoPadding
  Algorithm: AES_192/CFB/NoPadding
  Algorithm: AES_192/GCM/NoPadding
  Algorithm: AES_256/ECB/NoPadding
  Algorithm: AES_256/CBC/NoPadding
  Algorithm: AES_256/OFB/NoPadding
  Algorithm: AES_256/CFB/NoPadding
  Algorithm: AES_256/GCM/NoPadding
  Algorithm: AESWrap
  Algorithm: AESWrap_128
  Algorithm: AESWrap_192
  Algorithm: AESWrap_256
  Algorithm: RC2
  Algorithm: ARCFOUR
  Algorithm: DES
  Algorithm: DESede
  Algorithm: Blowfish
  Algorithm: AES
  Algorithm: RC2
  Algorithm: ARCFOUR
  Algorithm: HmacMD5
  Algorithm: HmacSHA1
  Algorithm: HmacSHA224
  Algorithm: HmacSHA256
  Algorithm: HmacSHA384
  Algorithm: HmacSHA512
  Algorithm: DiffieHellman
  Algorithm: DiffieHellman
  Algorithm: DiffieHellman
  Algorithm: DiffieHellman
  Algorithm: DES
  Algorithm: DESede
  Algorithm: PBE
  Algorithm: PBEWithMD5AndDES
  Algorithm: PBEWithMD5AndTripleDES
  Algorithm: PBEWithSHA1AndDESede
  Algorithm: PBEWithSHA1AndRC2_40
  Algorithm: PBEWithSHA1AndRC2_128
  Algorithm: PBEWithSHA1AndRC4_40
  Algorithm: PBEWithSHA1AndRC4_128
  Algorithm: PBES2
  Algorithm: PBEWithHmacSHA1AndAES_128
  Algorithm: PBEWithHmacSHA224AndAES_128
  Algorithm: PBEWithHmacSHA256AndAES_128
  Algorithm: PBEWithHmacSHA384AndAES_128
  Algorithm: PBEWithHmacSHA512AndAES_128
  Algorithm: PBEWithHmacSHA1AndAES_256
  Algorithm: PBEWithHmacSHA224AndAES_256
  Algorithm: PBEWithHmacSHA256AndAES_256
  Algorithm: PBEWithHmacSHA384AndAES_256
  Algorithm: PBEWithHmacSHA512AndAES_256
  Algorithm: Blowfish
  Algorithm: AES
  Algorithm: GCM
  Algorithm: RC2
  Algorithm: OAEP
  Algorithm: DiffieHellman
  Algorithm: DES
  Algorithm: DESede
  Algorithm: PBEWithMD5AndDES
  Algorithm: PBEWithMD5AndTripleDES
  Algorithm: PBEWithSHA1AndDESede
  Algorithm: PBEWithSHA1AndRC2_40
  Algorithm: PBEWithSHA1AndRC2_128
  Algorithm: PBEWithSHA1AndRC4_40
  Algorithm: PBEWithSHA1AndRC4_128
  Algorithm: PBEWithHmacSHA1AndAES_128
  Algorithm: PBEWithHmacSHA224AndAES_128
  Algorithm: PBEWithHmacSHA256AndAES_128
  Algorithm: PBEWithHmacSHA384AndAES_128
  Algorithm: PBEWithHmacSHA512AndAES_128
  Algorithm: PBEWithHmacSHA1AndAES_256
  Algorithm: PBEWithHmacSHA224AndAES_256
  Algorithm: PBEWithHmacSHA256AndAES_256
  Algorithm: PBEWithHmacSHA384AndAES_256
  Algorithm: PBEWithHmacSHA512AndAES_256
  Algorithm: PBKDF2WithHmacSHA1
  Algorithm: PBKDF2WithHmacSHA224
  Algorithm: PBKDF2WithHmacSHA256
  Algorithm: PBKDF2WithHmacSHA384
  Algorithm: PBKDF2WithHmacSHA512
  Algorithm: HmacMD5
  Algorithm: HmacSHA1
  Algorithm: HmacSHA224
  Algorithm: HmacSHA256
  Algorithm: HmacSHA384
  Algorithm: HmacSHA512
  Algorithm: HmacPBESHA1
  Algorithm: PBEWithHmacSHA1
  Algorithm: PBEWithHmacSHA224
  Algorithm: PBEWithHmacSHA256
  Algorithm: PBEWithHmacSHA384
  Algorithm: PBEWithHmacSHA512
  Algorithm: SslMacMD5
  Algorithm: SslMacSHA1
  Algorithm: JCEKS
  Algorithm: SunTlsPrf
  Algorithm: SunTls12Prf
  Algorithm: SunTlsMasterSecret
  Algorithm: SunTlsKeyMaterial
  Algorithm: SunTlsRsaPremasterSecret

到依赖性部分，然后就可以部署了。 因为这些依赖是在devDependency中所以heroku找不到那些导致部署失败的库。 希望对你有帮助。

答案 1 :(得分：0)

我最近在Angular部署了heroku个应用。我的package.json看起来像这样。

{
  "name": "porfolio",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node app.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.0",
    "@angular/cli": "1.6.8",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "express": "^4.16.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "ng-teximate": "^0.6.3",
    "path": "^0.12.7",
    "rxjs": "^5.5.6",
    "typescript": "~2.5.3",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@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"
  },
  "engines": {
    "node": "8.9.4",
    "npm": "5.6.0"
  }
}

您的start应为node fileName.js。并且postinstall将在heroku使用部署之前构建您的应用程序。您还需要添加engines来说明您正在运行的引擎版本 正如@monsur所指出的那样，你必须将一些devDependencies添加到heroku使用的dependencies。

相关问题
最新问题