如何使用Node.js服務器部署Angular 5應用

Question

我已經編寫了一個Angular 5應用程序，該應用程序從node.js服務器獲取數據。 我已經能夠將應用程序部署到我的Web服務器（它將在FastComet上運行node.js），但是該服務器似乎無法正常工作。 我不確定是否必須單獨部署它，或者是否將其作為主要ng構建的一部分包含在內。

這是我的設置，以便您查看，以防它們有所幫助：

package.json

{
  "name": "paracordcalc",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "concurrently --kill-others \"ng build --watch --no-delete-output-path\" \"node server.js\"",
    "build": "ng build && node server.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --prod --base-href /para-calc/"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "~5.0.0",
    "@angular/animations": "~5.0.0",
    "@angular/common": "~5.0.0",
    "@angular/compiler": "~5.0.0",
    "@angular/core": "~5.0.0",
    "@angular/forms": "~5.0.0",
    "@angular/http": "~5.0.0",
    "@angular/platform-browser": "~5.0.0",
    "@angular/platform-browser-dynamic": "~5.0.0",
    "@angular/router": "~5.0.0",
    "body-parser": "~1.18.2",
    "bootstrap": "~3.3.7",
    "cookie-parser": "~1.4.3",
    "core-js": "~2.4.1",
    "debug": "~3.1.0",
    "express": "~4.16.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
    "ngx-image-gallery": "^1.3.1",
    "rxjs": "~5.5.2",
    "serve-favicon": "~2.4.5",
    "zone.js": "~0.8.14"
  },
  "devDependencies": {
    "@angular/language-service": "~5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "concurrently": "~3.5.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.0",
    "karma-cli": "~1.0.1",
    "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": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

server.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 routes = require('./server/routes/index');
    var items = require('./server/routes/items');
    var config = require('./server/routes/config');
    var errors = require('./server/routes/errors');

    var app = express();

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

    app.use(favicon(path.join(__dirname, 'dist/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, 'dist')));

    // app.use('/', routes);
    app.use('/api/config', config);
    app.use('/api/items', items);
    app.use('/api/errors', errors);
    app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
    });

    // 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 handlers

    // development error handler
    // will print stacktrace
    if (app.get('env') === 'development') {
        app.use(function(err, req, res, next) {
            res.status(err.status || 500);
            res.render('error', {
                message: err.message,
                error: err
            });
        });
    }

    // production error handler
    // no stacktraces leaked to user
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: {}
        });
    });

    var debug = require('debug')('server');

    app.set('port', process.env.PORT || 3000);

    app.listen(app.get('port'));

    console.log('Listening on port: ' + app.get('port'));

    module.exports = app;

這是我的服務器代碼結構的屏幕截圖：

我有什么想念嗎？

在我的機器上的調試中一切正常。 我不確定節點服務器是否正在部署並且僅不在服務器上運行，或者我需要做什么。 我已經在Google上搜索了很多，試圖找到答案，但看不到任何有意義的內容。

我還試圖將其嵌入到Wordpress網站頁面中，這是另一個我都找不到幫助的問題，但這是另一天的討論。 我很可能會嘗試將其嵌入到iFrame中。

您將在部署和運行服務器方面提供的任何幫助將不勝感激。 我僅在Angular中開發了大約3個月。

Answer 1

將您的server.js文件和node_module文件夾平行於angular應用程序中的src目錄。 這樣它就可以聽到您的Angular項目的nodejs操作。

這張圖片中的app.js與您的server.js文件相同。 遵循這種體系結構層次結構。 希望它能對您有所幫助。

Answer 2

據我了解，這里的問題是啟動NodeJS服務器。 您能否通過控制台提供您正在使用的命令，當然還要提供輸出，以及服務器返回的錯誤。 我相信這將清楚地表明導致此問題的真正原因。

我最好的猜測是ng二進制文件未部署在服務器上，您可以通過與FastComet技術支持團隊聯系來解決。 我聽說他們反應靈敏:)