node.js - 将 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) 我使用了 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 应用程序，但是如何做到这一点？

Answer 1

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

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

到依赖部分，然后就可以部署了。 由于这些依赖项位于 devDependency 中，因此 heroku 无法找到导致部署失败的库。 希望对您有帮助。