如何构建NodeJS 2+ Web应用程序？

Question

这真的很简单，我知道，但这是我第一次使用nodejs。

我有一个Angular 2应用程序，并安装了Angular CLI来使用我的应用程序。

我可以通过运行ng build成功地构建客户端。

此后，我在我的应用程序根目录中添加了一个server.js和服务器文件夹(包含api路由)，以运行nodejs后端：

当前文件夹结构

​

​

通过运行ng build和node server，我可以在本地运行服务器端和客户机。

运行ng build只构建客户端并将其放置到dist文件夹中以供部署，但我如何做相同的操作-- server.js和服务器文件夹，并将其添加到dist文件夹中，以便客户端能够与服务器通信？

有那么多的工具，比如格伦特，Webpack和布朗，但我不知道从哪里开始。

我知道package.json在我们的应用程序的配置中起着一定的作用，所以这里是：

    {
  "name": "Portfolio",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "build": "ng build && node server.js",
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.8",
    "@angular/compiler": "^2.4.8",
    "@angular/core": "^2.4.8",
    "@angular/forms": "^2.4.8",
    "@angular/http": "^2.4.8",
    "@angular/platform-browser": "^2.4.8",
    "@angular/platform-browser-dynamic": "^2.4.8",
    "@angular/router": "^3.4.8",
    "angular2-google-maps": "^0.17.0",
    "axios": "^0.15.3",
    "body-parser": "^1.16.1",
    "core-js": "^2.4.1",
    "express": "^4.14.1",
    "nodemailer": "^3.1.3",
    "rxjs": "^5.2.0",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.7.7"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.4.8",
    "@types/core-js": "^0.9.35",
    "@types/jasmine": "2.5.43",
    "@types/node": "^7.0.5",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~2.0.1",
    "grunt": "^1.0.1",
    "grunt-cli": "^1.2.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-cssmin": "^2.0.0",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^2.1.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-ts": "^6.0.0-beta.11",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.5.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.1",
    "ts-node": "2.1.0",
    "tslint": "^4.4.2",
    "typescript": "~2.2.1"
  }
}

问题

• 如何构建服务器代码并将其打包到dist文件夹中，以便进行部署？
• 实现这一目标的最常见方法是什么？

Answer 1

您的API和您的角2应用程序应该是相互独立的，其中您的API运行在自身，并联系到您的角2应用程序，2个不同的部署，它们不应该在同一个构建。

Answer 2

您不需要将2放在同一个文件夹中才能进行通信；确保server.js使用AngularJS的索引文件对未用于api的任何路由进行响应。如果server.js (根文件夹中的/server.js)正在监听端口8080：

// /server.js
var express = require("express");
var bodyParser = require("body-parser");
var path = require('path');

const appRoute = require("./routes/app"); // This route redirects all other requests to angular's index

//View Engine
app.set('view engine', "ejs");
app.engine("html", require('ejs').renderFile);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}));

//Set static folder, since there are AngularJS resources
app.use(express.static(path.join(__dirname, "dist")));

//app.get("/api/...", apiRoute....); Here you put routes for your api
app.get('/*', appRoute.index); // This route redirects all other requests to angular's index


const PORT = process.env.port || 8080;
app.listen(PORT, () => {
    console.log("Running on the port " +PORT);
});

在appRoute (存储在/routes/app.js中)中，如果这是您的AngularJS索引文件，则需要呈现/dist/index.html。

// /routes/app.js
var express = require("express");
var path = require('path');

exports.index = (req, res, next) => {
    res.sendFile(path.join(__dirname + '/..', 'dist/index.html'));
};

package.json可以指向节点服务器和AngularJS应用程序的启动脚本，但是server.js中的逻辑将与应用程序的两个方面建立链接，即server.js必须在某个时候通过呈现/dist/index.html来响应。如果您引用此示例，请注意路径。