如何使用Node/Express運行純粹的前端Angular應用程序？

Question

我創建了一個完全在Angular上運行的MEAN棧應用程序。我試圖將其託管到Heroku，但Heroku需要Node才能運行該應用程序。因此，當我運行Heroku應用程序時，它將訪問該節點端口，並顯示在開始時建立的基本索引視圖。

我知道如何在節點中顯示視圖，但我不清楚如何在節點端口運行時顯示Angular應用程序。

可以指定角度端口作爲節點視圖渲染的一部分嗎？或者也許重定向節點來顯示Angular端口呢？

App.js

var express = require('express'); 
var path = require('path'); 
var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var ejs = require('ejs'); 

var index = require('./routes/index'); 
var users = require('./routes/users'); 

var app = express(); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs'); 

// uncomment after placing your favicon in /public 
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use('/', index); 
app.use('/users', users); 

// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 

// error handler 
app.use(function(err, req, res, next) { 
    // set locals, only providing error in development 
    res.locals.message = err.message; 
    res.locals.error = req.app.get('env') === 'development' ? err : {}; 

    // render the error page 
    res.status(err.status || 500); 
    res.render('error'); 
}); 

module.exports = app; 

Index.js路線

var express = require('express'); 
var router = express.Router(); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.render('index', { title: 'Express' }); 
}); 

module.exports = router; 

斌/ WWW

#!/usr/bin/env node 

/** 
* Module dependencies. 
*/ 

var app = require('../app'); 
var debug = require('debug')('aether-news:server'); 
var http = require('http'); 

/** 
* Get port from environment and store in Express. 
*/ 

var port = normalizePort(process.env.PORT || '3000'); 


app.set('port', port); 

/** 
* Create HTTP server. 
*/ 

var server = http.createServer(app); 

/** 
* Listen on provided port, on all network interfaces. 
*/ 

server.listen(port); 
server.on('error', onError); 
server.on('listening', onListening); 

/** 
* Normalize a port into a number, string, or false. 
*/ 

function normalizePort(val) { 
    var port = parseInt(val, 10); 

    if (isNaN(port)) { 
    // named pipe 
    return val; 
    } 

    if (port >= 0) { 
    // port number 
    return port; 
    } 

    return false; 
} 

/** 
* Event listener for HTTP server "error" event. 
*/ 

function onError(error) { 
    if (error.syscall !== 'listen') { 
    throw error; 
    } 

    var bind = typeof port === 'string' 
    ? 'Pipe ' + port 
    : 'Port ' + port; 

    // handle specific listen errors with friendly messages 
    switch (error.code) { 
    case 'EACCES': 
     console.error(bind + ' requires elevated privileges'); 
     process.exit(1); 
     break; 
    case 'EADDRINUSE': 
     console.error(bind + ' is already in use'); 
     process.exit(1); 
     break; 
    default: 
     throw error; 
    } 
} 

/** 
* Event listener for HTTP server "listening" event. 
*/ 

function onListening() { 
    var addr = server.address(); 
    var bind = typeof addr === 'string' 
    ? 'pipe ' + addr 
    : 'port ' + addr.port; 
    debug('Listening on ' + bind); 
} 

Answer 1

我最終使用webpack捆綁我的應用程序，並在我的服務器索引中包含bundle.js腳本文件。這使我可以通過localhost：3000顯示我的Angular應用程序。

Answer 2

您可以使用Github上的頁面，Netlify，時代週報現在CLI，或許多其他這些服務允許您在沒有後端配置的情況下部署前端應用程序。你爲什麼選擇Heroku？