static 파일제공 & View Engine & React

서버와 클라이언트를 제공하는 방법에는 크게 두가지가 있다.

1. 서버 자체에서 static 제공

2. 클라이언트와 서버 별도 호스팅

 

CRA의 경우엔 별도호스팅은 cors를 비롯한 보안설정을 해주어야하지만, 1번의 경우는 그런문제가 없다는 장점이 있다.(하지만 난 분리를 선호한다)

함께 호스팅하면 둘중 하나를 업데이트하면 불안해지고, 부하라고하면 서버에 부하가 커지기도 하기 때문이다.

 

하지만 템플릿 엔진을 사용해서, 간단한 SSR로 이용하기는 유용하다.

npm install --save @nestjs/serve-static

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: '1234',
      database: 'kong',
      synchronize: true,
      keepConnectionAlive: true,
      logging: 'all',
      charset: 'utf8mb4',
      autoLoadEntities: true,
    }),
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'),
    }),
    PostsModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})

이런식으로 제공이 가능하다

MVC

express 혹은 fastify 기반으로 view엔진을 렌더링 할 수 있다.

ejs, pug, hbs, 등 express 에서 사용하던 엔진을 그대로 사용할 수 있고,

main.ts에서 ExpressApplication으로 제네릭을 설정하면 자주사용하던 미들웨어를 등록하고, controller에서 템플릿파일을 렌더링 할 수 있다.

npm install --save ejs

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule); // 제네릭

  // app.useStaticAssets(join(__dirname, '..', 'public')); // 정적파일제공 (nest모듈로했으니 안해도된다.)
  app.setBaseViewsDir(join(__dirname, '..', 'views')); // dir
  app.setViewEngine('ejs'); // 템플릿 엔진설정

  await app.listen(3000);
}
bootstrap();

import { Controller, Get, Render } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  @Render('index')
  root() {
    return { message: 'kong server' }; // 데이터 전달
  }
}

React 호스팅하기

1. build된 결과물인 bundle파일을 모두 정적제공하는 폴더에 넣고, res 객체를 꺼내서 파일을 전송하면 된다.

import { Controller, Get, Render, Res } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  @Render('index')
  root() {
    return { message: 'kong server' };
  }

  @Get('/react')
  react(@Res() res) {
    res.sendFile('index.html', {
      root: 'public',
    });
  }
}

2. 아니면 템플릿 엔진을 html로 변경하고, render()해도 된다.

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('html'); // 여기

  await app.listen(3000);
}
bootstrap();

 

최종적으로 react와 별도의 image,동영상 등 정적파일을 모두 제공할 수 있는 형태가 됬다.