我应该以什么方式设置我的 Angular Universal 和我的后端 node.js 服务器

Question

我正在使用带有 nodejs 后端的 Angular 应用程序，我部署并开始工作。现在我正在尝试使用 Angular Universal，但我不明白应该如何将它与我的后端服务器集成。我是否先启动后端服务器，然后再启动前端服务器？

这就是我的应用程序结构的设置方式..

/backend <-- Basically nodejs that deals with api request
   /config
   /node_modules
   [...]
   index.js
/frontend
   [...]
   /dist
       /browser <-- in this I got basically Angular app
       /server
       server.js
   [...]

当我在没有 Universal 的情况下部署我的应用程序时，我只是在我的 /backend/index.js 文件中告诉 - 嘿，如果这条路由与这些路由器中的任何一个匹配，那么它就是一个 API 请求，但如果不匹配那么服务器来自 /frontend/dist/browser/index.html 的已编译静态文件。

现在，当我有 Angular 通用时，教程说在我编译了所有服务器端渲染内容后，我运行使用命令 node dist/server。现在这让我感到困惑，因为我的 /backend 这应该如何工作。我的后端不是运行ning.

我现在要启动两个节点服务器吗？在 /backend 运行 nodemon index.js 然后在 /frontend 运行 node dist/server

...或者我是否必须更改我的文件夹结构并以某种方式将它们集成为 /frontend/dist/server/

的一部分

...或者我需要将 /backend/index.js 中的所有路由写入 /frontend/server.ts

...或者我需要在 /frontend/server.ts 文件中添加一些东西，它会被编译，当我运行 node dist/server 它也会激活我的 /backend

目前我的/frontend/server.ts看起来像这样

    // These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));


// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

Answer 1

完全由您决定。我建议将它们分开并运行在不同的端口上。如果您想将它们公开在一起，您可以在它们前面使用类似 haproxy 的东西将请求路由到正确的端口，或者从子域提供后端服务，例如：api.yourdomain.com

我应该以什么方式设置我的 Angular Universal 和我的后端 node.js 服务器

In what way I am supposed to setup my Angular Universal and my backend node.js server

angular-universal

angular