@nestjs/serve-static

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

Static File Serving 옵션 추가하기

작성

안녕하세요 강사님, 'Static File Serving에서 옵션 추가하기' 강좌에서 @nestjs/serve-static 설치하는 과정에서 버전 문제 때문인지 의존성 충돌 문제가 일어나는 것 같습니다.
혹시라도 다른 분들도 저와 같은 문제 겪으실까봐 글 작성합니다.
-----------------------------------

npm add @nestjs/serve-static 실행
-----------------------------------

- 오류:
npm add @nestjs/serve-static npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: cf_sns@0.0.1 npm error Found: @nestjs/common@10.4.17 npm error node_modules/@nestjs/common npm error @nestjs/common@"^10.0.0" from the root project npm error npm error Could not resolve dependency
-----------------------------------
2. npm install @nestjs/serve-static@4.0.0 // 버전 맞춰서 설치
-----------------------------------
- 브라우저 오류 발생: {"message":"Cannot GET /public/44f57f3f-7afa-4262-b2a3-13ee7053f920.jpg","error":"Not Found","statusCode":404}

- npm run start: dev 오류 : no such file directory ~~\.index.html
// 정확하지는 않지만 index.html 파일까지 찾아서 jpg 파일을 찾는 것 같아서 claude에게 물어봤더니...
-----------------------------------
- 해결:
```
@Module({
  // 다른 모듈을 불러올 때 사용
  imports: [
    PostsModule,
    ServeStaticModule.forRoot({
      rootPath: PUBLIC_FOLDER_PATH,
      serveRoot: '/public',
      serveStaticOptions: {
        index: false
      }
    }),
```
이렇게 하니 해결 됐습니다... 이게 맞는건지 궁금합니다!! 일단 브라우저 요청했더니 jpg 사진은 잘 나옵니다!!

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다!

[코드팩토리 디스코드]
https://bit.ly/3HzRzUM

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

javascript typescript rest-api nestjs backend

답변 2

코드팩토리

지식공유자

안녕하세요!

공유 감사합니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 윤상현님.

@nestjs/serve-static 패키지를 설치하는 과정에서 의존성 충돌 문제가 발생하신 것과 관련해 도움을 드리겠습니다. 이 문제는 이미 설치한 @nestjs/common 패키지와 혼선을 빚으면서 발생할 수 있습니다. @nestjs/serve-static과 @nestjs/common의 버전 간의 호환성 문제로 보입니다.

오류 해결 방법

올바른 버전 매칭: @nestjs/serve-static 패키지를 설치할 때, 현재 프로젝트의 @nestjs/common 버전을 확인하시고, 동일하거나 호환 가능한 버전의 @nestjs/serve-static을 설치해야 합니다. 만약 이것이 번거로우시다면, @nestjs/serve-static의 최신 버전을 설치하여 최신의 @nestjs/common과 함께 사용하도록 하는 것도 방법입니다.
ServeStaticModule 구성: 이미 해결하신 것처럼 ServeStaticModule을 구성하여 serveRoot와 rootPath 설정을 정확히 지정해주시면 이미지 파일이 잘 나오는 것을 확인할 수 있습니다. serveStaticOptions에서 index: false를 설정한 부분도 정적 파일 제공 시 유용합니다.

질문하신 해결 방법은 올바르게 적용된 것으로 보이며, 목적한대로 정적 컨텐츠가 제공되었다니 잘 해결하신 것 같습니다.

추가로, 비슷한 이슈를 겪은 다른 수강생들의 경험도 참고해보세요:

yarn add 후에 아래 에러가 발생하는것 같습니다.: 이 게시물은 패키지 버전 문제로 인한 충돌과 해결 사례를 포함하고 있어 유사한 문제 해결의 힌트를 제공합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

@nestjs/serve-static

오류 해결 방법