1
我會將我的Web應用程序部署到Heroku。 這是我的項目的樹：將Heroku 4/NodeJS部署到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）建立角4應用程序使用ng build -prod --aot=false
2）點的NodeJS應用角度指數.html文件在/ dist文件夾中。
這裏的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.
這是我的角度的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"
}
如果我有很好的理解，角HTTP路線沒有得到部署，因爲Heroku上沒有建築角的應用程序，但怎麼辦呢？
在構建的Angular應用程序中，您看起來有錯誤的API端點。在您使用Angular CLI時，請查看環境功能：https：//github.com/angular/angular-cli/wiki/stories-application-environments。如果你像這樣部署，生產環節應該是相對的。 – jonrsharpe
我不明白如何解決我的問題與您的鏈接 – infodev