NestJs - Angular - 部署策略

Question

我为一家有特定需求的工厂开发了一个小型应用程序。这是一个小型应用程序，本地使用人数少于 10 人。

目前，我的后端和前端位于同一个 git 存储库中。

存储库结构如下所示

--README.md
--.gitignore
--document
--projects
  |--backend        // Nestjs API
  |--frontend       // Angular

我已经准备好 NestJS 来提供静态文件，这意味着我已经将 Angular 构建器配置为按如下方式工作：

angular.json

...
"options": {
    "outputPath": "../backend/client/dist",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
...

我的 NestJs 服务器配置为提供静态文件：

main.ts

const PORT = process.env.PORT || 8080;
async function bootstrap() {
   const app = await NestFactory.create<NestExpressApplication>(AppModule);
   app.enableCors();
   app.setGlobalPrefix('api');
   await app.listen(PORT);
}
...

app.module.ts

imports: [
    TypeOrmModule.forRoot(),
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'client/dist'),
    }),

直到今天，我都使用 npm 和

npm run start:dev

，它允许我自动构建数据库并运行后端服务器。 现在，我需要将后端和前端部署到同一服务器并构建所有内容。

最好的方法是什么？ 我应该首先将 Angular 构建到 dist 文件夹中，构建 Nestjs .. 我只能将 dist 文件夹放到生产服务器上，对吗？

Answer 1

我会做的是构建你的角度应用程序并复制你为前端提供服务的文件。如果您的应用程序已路由，您还必须配置后备到index.html，您可以在此处查看如何操作：Angular 部署

对于您的 Nestjs 应用程序，您几乎可以将其放在服务器上的任何位置，pm2 将在端口 8080 上为其提供服务。首先从 Nestjs 中提取所有文件并使用 npm install（使用 NestJS 时，您也需要 prod 中的 node_modules）。然后使用 Nest build 来构建您的应用程序。对于 pm2，您应该使用 main.js 来启动您的 api。然后我会研究代理反向配置，将所有 api 请求重定向到 8080。它的作用是，如果您到达 example.com/api，您的服务器将明白它必须在内部重定向到 8080，因此您不必打开任何其他端口然后 80 这就是你想要的。

我还会考虑在服务器启动时启动 pm2 并保存 pm2 配置，以便在您重新启动服务器时它会自动启动后端。

Answer 2

我已经经历过多次相同的过程，并决定分享一些基本演示，了解如何以最简单、最干净的方式实现这一目标。

我的方法是将前端和后端都打包在主机服务器上的 docker 镜像中。我还打包了一个 Jenkins 实例，它自动构建 Angular 和 NestJS 并重新加载 docker 容器。

您可以轻松部署应用程序并决定在每次提交时触发构建。它将自动推送到您的生产服务器。

您可以参考这里的示例项目：
https://github.com/godardth/typescript-fullstack-boilerplate