將Angular 4 / NodeJS部署到Heroku

Question

我會將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）將Nodejs應用程序指向/ 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）我使用了官方的Heroku指南來部署NodeJS應用

當我打開Heroku生成的鏈接時，會加載索引頁面，但是當我嘗試使用login時，會出現此錯誤：

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應用，但該如何做？

Answer 1

默認情況下，heroku不安裝任何開發依賴項，因此請移動您的

"@angular/cli": "^1.4.7",
"@angular/compiler-cli": "^4.4.0",
"typescript": "^2.3.4"

到“依賴項”部分，然后可以進行部署。 由於這些依賴關系屬於devDependency，因此heroku找不到導致部署失敗的庫。 希望對您有幫助。

Answer 2

我最近在heroku上部署了Angular應用程序。 我的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使用的dependencies項中添加一些devDependencies 。