如何通过部署在 Heroku 上的 Nodejs/Nestjs 服务器为我的 Angular 前端提供服务？

Question

我有一个来自 Angular 的 NestJS api，我想用它来为前端提供服务。这已部署到 heroku 上。通过后端路由使用前缀“/api”，我希望所有其他请求都使用我构建的 Angular 应用程序中的 index.html 进行响应。

我部署的应用程序的文件夹结构是：

-dist
  -client
    -index.html
    -.js files
  -server
    -main.js
    -other dirs/modules

到目前为止，我已经尝试过各种方法，并且它们都在本地工作。问题是部署到heroku。我得到的最接近的（在本文的帮助下：https://medium.com/@bo.vandersteene/use-nest-as-your-server-side-application-with-an-angular-frontend-540b0365bfa3）正在 NestJS 应用程序中创建一个前端中间件，该中间件查看请求路径和文件扩展名，然后使用 res.sendFile 和 path.resolve 创建要响应的文件路径。

import { Injectable, NestMiddleware } from '@nestjs/common';
import { apiPrefix } from '../../config';
import { Request, Response } from 'express';
import { resolve } from 'path';

const allowedExtentions = [
  '.js',
  '.ico',
  '.css',
  '.png',
  '.jpg',
  '.woff2',
  '.woff',
  '.ttf',
  '.svg',
];

const prefix = apiPrefix;

@Injectable()
export class FrontendMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: () => void) {
    const { baseUrl } = req;
    if (baseUrl.indexOf(prefix) === 0) {
      next();
    } else if (
      allowedExtentions.filter(extention => baseUrl.indexOf(extention) > 0)
        .length > 0
    ) {
      res.sendFile(resolve(`./dist/client/${baseUrl}`));
    } else {
      res.sendFile(resolve('./dist/client/index.html'));
    }
  }
}

这在本地有效。当部署到heroku时，我收到一个错误：[ExceptionsHandler] ENOENT: no such file or directory, stat '/app/dist/client/index.html'但这没有意义，因为当登录我的项目的Heroku bash时，我可以看到确切的文件路径和文件。该文件存在，但由于某种原因，NestJS 无法识别它。

任何帮助，将不胜感激。

Answer 1

我所做的非常成功的事情是在您的main.ts文件中添加，app.useStaticAssets('your/path/to/dist/client')然后在您的GET /路线上提供该index.html文件。例如

@Injectable()
export class AppController {
  @Get()
  sendApplication(@Res() res) {
    res.sendFile('index.html');
  }
}

ng build --prod我应该提到，这需要在 Herokubuild阶段或在代码进入 Heroku 之前使用您的 Angular 应用程序进行构建。