如何将前端 Angular 与 NestJS 后端合并

How to merge togheter Angular frontend with NestJS backend

我正在学习 Sololearn 上的教程,了解如何使用 NestJS[=29 创建应用程序=] 它说我需要 运行 Angular 服务器和 NestJS 服务器分开,有没有办法 运行 他们在同一个服务器?我曾经在 PHP 中编写代码,那里有不同的路线,你根据它们打磨 HTML 页面,但现在我有一个页面根据它们进行更改在 url 上。所以,在所有这一切之后,问题仍然是一样的:有没有办法将 运行 Angular 和 NestJS 作为同一台服务器?

您可以 运行 它们在同一个“物理”服务器上。 但是他们需要单独开始(出于开发目的)ng serve for angular 和 nest start for the nest backend.

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

简短回答:
为此:
前端 (angular):

  • 将您的 angular 项目中 api 的 url 更改为 /api
  • 构建您的 angular 项目 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

访问你的网站了

了解更多详情:

Server Static nestjs doc

Use nest as your server-side application with an Angular frontend