[nestjs] How to return image from external API using NestJs? 정적 파일 제공

📑 [ 상황 ]

nestjs 를 사용해서 API 서버를 개발하던 중

이미지 파일들을 정적으로 제공해주는 기능에서 삽질이 시작됐다.

이미지 파일 다운로드가 아니라 브라우저 상에서 이미지를 띄우는 기능이다.

 

1. 프로젝트 폴더 구조

files/images 하위의 파일을 제공하려고 한다.

 

2. 공식문서 방법

nest 공식문서에서 안내하는 정적파일 제공 방법이다.

@nestjs/serve-static 라이브러를 설치하고, ServeStaticModule 설정을 통해 정적파일을 제공할 수 있다고 한다.

npm install --save @nestjs/serve-static

import { join } from 'path';
import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'client'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

 

😡 [ 문제 ]

공식문서와 동일한 방법으로 ServerStaticModule 설정했지만 안 된다!! 😅

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: path.join(__dirname, '../..', 'files'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

 

`rootPath`로 설정한 URL(C:\Users\superpower\dev\nest-001\files)는 정확하게 가르키고 있다.

URI로 가르키는 zz2.png 파일이 아니라 index.html 파일로 찾아간다.

[Nest] 14668  - 2022. 01. 16. 오후 3:15:37   ERROR [ExceptionsHandler] ENOENT: no such file
  or directory, stat 'C:\Users\superpower\dev\nest-001\files\index.html'
Error: ENOENT: no such file or directory, stat 'C:\Users\superpower\dev\nest-001\files\index.html'
GET /api/images/zz2.png 404 2.071 ms - 125

 

🧪 [ 원인 ]

• @nestjs/serve-static 패키지 공식문서를 모두 확인하고 설정값을 이렇게 저렇게 적용해도 안된다.
• 구글링에도 @nestjs/serve-static <- 라이브러리로 해결된 이슈가 없다.
• 해당 라이브러리는 SPA 프로젝트의 빌드 파일만 제공할 수 있나 보다.(참고)

In order to serve static content like a Single Page Application (SPA) we can use the ServeStaticModule from the @nestjs/serve-static package.

 

🎉 [ 해결 ]

Nest, by default, makes use of the Express library under the hood. Hence, every technique for using the MVC (Model-View-Controller) pattern in Express applies to Nest as well.

Model-View-Controller 패턴의 View 기능을 이용해서 사용자에게 이미지를 보여주자.(참고)

프로젝트의 루트파일에서 다음과 같이 useStaticAssets 메소드를 이용해서 설정하면 된다.

해당 기능은 @nestjs/platform-express 에 내장되어 있어 별도의 설치는 필요없다.

const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(path.join(__dirname, '../..', 'files'), {
  prefix: `/${GLOBAL_PREFIX}/`,
});

prefix 옵션은 브라우저에서 입력하는 URL의 prefix 설정을 의미한다.

app.setGlobalPrefix(GLOBAL_PREFIX); 를 해줬지만 별도로 설정해야 적용이 된다.

 

🤗🤗🤗🤗🤗 잘 나온다. 🤗🤗🤗🤗