Nest.Js將所有路由導向index(Angular)

前言

使用Nest.Js做後端;Angular做前端。最後Angular打包後放置於Nest.Js做為主頁面呈現,是一種滿容易出現的作法
但如果直接無腦的將所有路由導向首頁,就會發現連一開始做好的api都全部死掉了,因為都被導回首頁了XD
稍稍研究了一下,比較好的作法就是採用middleware了
但實際用時,卻發現api還是無法回傳

後來才發現原來Nest.Js middleware的exclude用法特別奇怪
而這部份在github上也有不少討論(見Middleware Exclude behaviour not working)
但原作者似乎認為這是express的特性,沒有打算調整
而官方文件說明也不甚清晰
最後整個討論也沒下文就結束了
於是只好自己嘗試實作這個需求

一、將前端打包,並放置指定路徑,設定Nest.Js靜態路徑

我打包後的Angular,放在/dist/frontend底下
即前、後端各自打包後,將前端的dist放到後端的/dist/frontend

打開Nest.Js的main.ts
在一開始宣告app的地方,create要加上泛型<NestExpressApplication>,指定為express
此時就可以使用useStaticAssets來指定靜態路徑

const app = await NestFactory.create<NestExpressApplication>(AppModule, {cors: true});

 // 放置Angular build完後的路徑
  app.useStaticAssets(path.join(`${process.cwd()}/dist/frontend`));

二、增加FrontendMiddleware,指定網址非/api/*,導回首頁

由於我在Nest.Js採用restful api,所有api路由固定/api/*。還算好處理
路由開頭只要非api的,一律導回首頁

import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response } from 'express';

@Injectable()
export class FrontendMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: () => void) {
    if (req.originalUrl.indexOf('api') !== -1) {
      next();
    } else {
      res.sendFile(`${process.cwd()}/dist/frontend/index.html`);
    }
  }
}

注意!
自動提示語法,會提示req.ip。但Nest.Js取出來是沒有值的!
要使用req.originalUrl才會得到路由

三、啟用middleware

打開app.module.ts,加入此FrontendMiddleware

@Module({
  //…略…
})
export class AppModule {
  configure(consumer: MiddlewareConsumer): void {
    consumer.apply(FrontendMiddleware).forRoutes(
      {
        path: '/**',
        method: RequestMethod.ALL,
      },
    );
  }
 }

完成!

後記

目前這樣的寫法,若 Angular 有個 user 頁面,路由是/user
照理說,我將http://{域名或ip}/user貼給別人,是直接觸發後端middware,而導回首頁
必須要由首頁點擊指向user的連結,才會再走Angular自己的route來導向

但我這樣做完後,直接貼上http://{域名或ip}/user,居然就會直接進到前端我所期望的頁面!

雖然覺得有錯,但又不知道錯在哪邊。而目前的結果又是我所期望的方式@@…
所以就…將錯就錯用著來了!

如果有人知道原因的話,再煩請告知了XD

2020/7/15補充更新:
發現若在main.ts使用app.setGlobalPrefix('api');
在browser輸入子網址(如http://{域名或ip}/user)時會直接像是打api那樣,最後變成找不到網站
而前述作法,/api/是寫在每一controller裡的,也較保有各別修改的靈活性!

參考資料

Stack Overflow/How to redirect all routes to index.html (Angular) in nest.js?
github/req.url is always ‘/‘ in Middleware
Middleware Exclude behaviour not working

若將網站部署至GAE,有遇到問題時,可以參考下列資料:
部署Nest.Js至GAE(二):掛載靜態網頁(Angular),syntaxError
部署Nest.Js至GAE(六):手動增加sitemap