如何将 Angular 前端与 NestJS 后端合并在一起

Question

我正在关注 Sololearn 的教程，了解如何使用 NestJS 和 Angular 创建应用程序，它说我需要分别运行 Angular 服务器和 NestJS 服务器，有没有办法运行他们在同一台服务器上？我曾经用 PHP 进行编码，并且有不同的路线，并根据它们打磨 HTML 页面，但现在我有一个根据 url 进行更改的页面。所以，在这一切之后，问题仍然是一样的：有没有办法将 Angular 和 NestJS 作为同一服务器运行？

Answer 1

简短的回答：是的。
为此：
前端（角度）：

• 将 Angular 项目中 API 的 URL 更改为

  /api

  
  
• 构建你的角度项目

  ng build // or ng build --prod // for     poduction

  
  

后端（Nestjs）：

• 安装

  npm install --save @nestjs/serve-static

  以提供静态文件

• 将 Angular 构建输出

  dist

  文件夹移动到具有不同名称的 Nestjs 项目，例如

  frontend

  
  

• 将

  ServerStaticModule

  导入到

  Appmodule

      imports: [
      ServeStaticModule.forRoot({
        rootPath: join(__dirname, '..', 'frontend'),
      }),
    ], 
  
  
  

然后你就可以从 http://localhost:port 访问你的网站了

了解更多详情：

服务器静态nestjs文档

使用 Nest 作为带有 Angular 前端的服务器端应用程序

Answer 2

您可以在同一台“物理”服务器上运行它们。 但他们需要单独开始（出于开发目的）ng 为 Angular 提供服务，并为 Nest 后端提供 Nest 启动。

完全没有必要在不同的“物理”服务器上执行它们:)。

Answer 3

是的，您可以在同一服务器上运行 Angular 和 NestJS。 一种方法（尽管不是必需的）是在 Docker 容器中运行每个方法。

我已将 Angular 和 NestJS 集成到一个样板项目中。 您可以参考那里的“prod”文件夹并检查 docker compose 文件。 请随意分叉该项目并将其用作您自己的项目的基础。

https://github.com/godardth/typescript-fullstack-boilerplate